: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);

  /* CHIP runs on one accent, Kinetic crimson, so it reads as the same
     family as KERF. Sawdust is the secondary, used for affiliate CTAs and
     rule-of-thumb labels. Amber carries warnings, nothing else. */
  --accent-1:    var(--kc-blood-hot);
  --accent-2:    var(--kc-flare);
  --accent-glow: rgba(232, 52, 51, 0.22);

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

  /* House design spec (vector-spec.html) */
  /* Links get a lightened flare rather than the full accent. Saturated red on
     a dark ground vibrates when a page carries thirty of them, and it spends
     the colour that means danger everywhere else. This reads as a link at a
     glance and is calm in bulk. Contrast on --bg is about 7:1. */
  --link:       #EE8D88;
  --link-line:  rgba(238, 141, 136, 0.55);

  --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;
}

* { 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;
}
/* Units switch (in / mm). The same segmented control KERF uses for machines.
   Two options instead of four, so the indicator is half width. */
.units-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(50% - 4px);
  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-units="imperial"] .toggle-indicator { transform: translateX(0); }
body[data-units="metric"]   .toggle-indicator { transform: translateX(100%); }

.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: 78px;
}
.toggle-btn:hover { color: var(--text-2); }
.toggle-btn.active { color: #fff; }
.toggle-btn .unit { font-size: 10px; font-weight: 500; opacity: 0.75; margin-left: 2px; }

.units-label {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-2);
  align-self: center;
}

/* The topbar's right end holds two things: CHIP's own primary call to action
   (Start Here) and the way back to the main Kinetic Carving site, the same red
   box KERF carries so the two siblings behave identically. They share one grid
   cell via .topbar-actions, with the outbound link last so "top right" is
   literally true. */
.topbar-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar-home {
  display: inline-flex;
  align-items: center;
  /* The label is two flex items ("Return to" + "Kinetic Carving") so phones
     can drop the first one. Flex discards the whitespace between items, so the
     word space has to be a gap or the words run together. */
  gap: 0.35em;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--kc-flare);
  border: 1px solid var(--kc-flare);
  color: #fff !important;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(232, 52, 51, 0.22);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.topbar-home:hover {
  background: #c62b2a;
  border-color: #c62b2a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 52, 51, 0.32);
}

/* Start Here call to action, sits at the right end of the topbar next to the
   way home. It used to be a filled red gradient. Sat beside the solid red
   Kinetic Carving box that reads as two competing primary buttons and puts a
   lot of red in the top strip, so it is now the outlined half of the pair,
   the same transparent-until-hover treatment .aff-cta already uses. */
.start-here {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--kc-flare);
  border: 1px solid var(--kc-flare);
  padding: 8px 15px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  white-space: nowrap;
}
.start-here:hover {
  background: var(--kc-flare);
  color: #fff;
  transform: translateY(-1px);
}
.start-here svg { flex-shrink: 0; }

/* ---- Category rail ----------------------------------------------------
   CHIP has ten knowledge areas, too many for the topbar's segmented pill,
   so they get their own sticky bar directly under it. Scrolls sideways on
   phones rather than wrapping to a second row. */
.cat-rail {
  position: sticky;
  top: var(--topbar-h);
  z-index: 45;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 7px 28px 0;
  background: rgba(16, 16, 16, 0.9);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cat-rail::-webkit-scrollbar { display: none; }

/* The ten areas used to be flat grey words with a red underline on the current
   one, which read as a sentence rather than a control: nothing said the other
   nine were clickable. They are real tabs now, each with its own ground and a
   rounded top, and the current one is filled in flare with a solid rule across
   its top edge. No border along the bottom, so the active tab runs into the
   page the way a tab should. */
.cat-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-subtle);
  border-bottom: 0;
  border-top: 2px solid transparent;
  border-radius: 7px 7px 0 0;
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 11px 14px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cat-btn:hover {
  background: rgba(232, 52, 51, 0.12);
  border-top-color: rgba(232, 52, 51, 0.5);
  color: var(--kc-bone);
}
.cat-btn.active {
  background: linear-gradient(180deg, rgba(232, 52, 51, 0.26), rgba(232, 52, 51, 0.07));
  border-color: rgba(232, 52, 51, 0.45);
  border-top: 2px solid var(--kc-flare);
  border-bottom: 0;
  color: var(--kc-bone);
}
/* The active tab covers the rail's own bottom rule, which is what makes it
   read as connected to the page rather than sitting on a shelf above it. */
.cat-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(232, 52, 51, 0.07);
}
.cat-btn:focus-visible {
  outline: 2px solid var(--kc-flare);
  outline-offset: -3px;
}
.cat-btn .cat-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.cat-btn.active .cat-count { color: var(--kc-flare); }

/* 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; }

/* 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: #FF8585; background: rgba(168, 28, 28, 0.18); }
.qa-result .badge.answer { color: var(--kc-sawdust); background: rgba(201, 162, 107, 0.16); }
.qa-result .badge.glossary { color: #B6C7D8; background: rgba(74, 107, 133, 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; }
}

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


/* 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 */
/* CHIP is built as a knowledge graph, so cross-links are dense: a paragraph can
   carry three or four. Setting every one in saturated accent at weight 600
   turned pages into a wall of red and, worse, spent the accent that elsewhere
   means danger. So the link text sits slightly brighter than body copy and the
   dotted red underline does the signalling. Red returns on hover, where it is
   a response rather than noise. Dotted underline = goes somewhere in CHIP;
   solid = leaves the site. */
.content a[data-module-link],
.content a[data-module-link]:visited {
  color: var(--link);
  text-decoration: underline solid var(--link-line);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  font-weight: 500;
  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;
  font-weight: inherit;
}
.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-flare, #E83433) !important;
  text-decoration-style: solid;
  text-decoration-color: var(--kc-flare, #E83433);
  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; }
}

/* 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; }
  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 CHIP 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; }
  .topbar-actions { grid-column: 1; justify-self: stretch; }
  .units-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; }
  /* The category rail has to drop out of the stacking context too. KERF drops
     the header and the disclaimer here so the search panel can open over them
     at full height; the rail was added later and kept its sticky z-index 45,
     which left it floating across the top of the search results. */
  .cat-rail { position: relative; top: auto; z-index: auto; }
  .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; }
}

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

/* Feedback form posts to Netlify Forms (Sep 11 2026). The honeypot field is
   off-screen for people and only bots fill it; the status line reports
   sending, sent, or failed. */
.feedback-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feedback-status { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.feedback-status.ok { color: var(--ok); }
.feedback-status.error { color: var(--kc-flare); }

/* ============================================================
   CHIP components
   Everything below is specific to the CNC field guide: the
   module header block, calculators, symptom cards, comparison
   grids, affiliate CTAs and the Start Here path. They all reuse
   the KERF tokens above so the two sites stay siblings.
   ============================================================ */

/* ---- Module header: quick answer, difficulty, summary ---- */
.quick-answer {
  position: relative;
  background: linear-gradient(135deg, rgba(168, 28, 28, 0.14) 0%, var(--panel-2) 65%);
  border: 1px solid rgba(232, 52, 51, 0.28);
  border-left: 3px solid var(--kc-flare);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 0 0 22px;
}
.quick-answer-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-flare);
  margin-bottom: 7px;
}
.quick-answer p { margin: 0; color: var(--text); font-size: 15px; line-height: 1.62; }
.quick-answer p + p { margin-top: 9px; }

.difficulty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.difficulty::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.difficulty.beginner     { color: #5FD68A; border-color: rgba(95, 214, 138, 0.35); }
.difficulty.intermediate { color: var(--kc-amber); border-color: rgba(245, 180, 69, 0.35); }
.difficulty.advanced     { color: var(--kc-flare); border-color: rgba(232, 52, 51, 0.35); }

/* ---- Value-type labels. CHIP always says what kind of number a
   reader is looking at, so nobody treats a rule of thumb as a
   manufacturer spec. ---- */
.vtype {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 8px;
  white-space: nowrap;
}
.vtype.is-formula   { background: rgba(111, 163, 194, 0.16); color: #8FC3E0; }
.vtype.is-thumb     { background: rgba(201, 162, 107, 0.16); color: var(--kc-sawdust); }
.vtype.is-start     { background: rgba(245, 180, 69, 0.14); color: var(--kc-amber); }
.vtype.is-spec      { background: rgba(95, 214, 138, 0.14); color: #5FD68A; }
.vtype.is-measured  { background: rgba(232, 52, 51, 0.14); color: var(--kc-flare); }

/* ---- Formula block ---- */
.formula {
  background: var(--kc-ink);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 18px 0;
  overflow-x: auto;
}
.formula-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 9px;
}
.formula-eq {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--kc-bone);
  line-height: 1.75;
  white-space: nowrap;
}
.formula-eq em { color: var(--kc-flare); font-style: normal; font-weight: 500; }

/* On a phone the column is about 305px and a 15px mono formula does not fit.
   CHIP's formulas are short expressions rather than long code lines, so
   wrapping them across two lines reads better than making the reader scroll a
   box sideways to find the end of an equation. */
@media (max-width: 760px) {
  .formula-eq { white-space: normal; font-size: 14px; line-height: 1.9; }
}
.formula-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.formula-note code { font-size: 12.5px; }

/* ---- Calculators ---- */
.calc {
  background: linear-gradient(135deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin: 22px 0;
}
.calc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.calc-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kc-bone);
}
.calc-eyebrow {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-flare);
}
.calc-desc { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.6; }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.calc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.calc-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.calc-field input,
.calc-field select {
  width: 100%;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 9px 10px;
  border-radius: var(--radius);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.calc-field select { font-family: var(--font-sans); font-size: 13px; }
.calc-field input:focus,
.calc-field select:focus { border-color: var(--kc-flare); box-shadow: 0 0 0 3px rgba(232, 52, 51, 0.14); }
.calc-units { font-size: 10.5px; color: var(--muted-2); font-weight: 500; letter-spacing: 0.04em; }

/* Field tooltip. A small question mark that explains the input in place. */
.calc-help {
  width: 14px; height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  cursor: help;
  padding: 0;
}
.calc-help:hover, .calc-help:focus-visible { color: var(--kc-flare); border-color: var(--kc-flare); }
/* The dot itself stays 14px so it does not shout in the label row, but the
   thing you actually tap is 38px. Without this the tooltips are unusable on a
   phone, which would quietly remove the explanations from every calculator
   field for anyone reading on one. */
.calc-help { position: relative; }
.calc-help::after {
  content: "";
  position: absolute;
  inset: -12px;
}
.calc-tip {
  grid-column: 1 / -1;
  background: var(--kc-ink);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--kc-flare);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.6;
}

.calc-out {
  background: var(--kc-ink);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.calc-result-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.calc-result-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.calc-result {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--kc-flare);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.calc-result-unit { font-size: 13px; color: var(--muted); font-family: var(--font-sans); }
.calc-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.calc-sec-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calc-sec-label {
  font-size: 9.5px;
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.calc-sec-val { font-family: var(--font-mono); font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.calc-verdict {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.calc-verdict strong { color: var(--text); }
.calc-verdict.ok   { border-top-color: rgba(95, 214, 138, 0.3); }
.calc-verdict.warn { border-top-color: rgba(245, 180, 69, 0.35); }
.calc-verdict.bad  { border-top-color: rgba(232, 52, 51, 0.35); }
.calc-flag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: 1px;
}
.calc-verdict.ok   .calc-flag { background: rgba(95, 214, 138, 0.16); color: #5FD68A; }
.calc-verdict.warn .calc-flag { background: rgba(245, 180, 69, 0.16); color: var(--kc-amber); }
.calc-verdict.bad  .calc-flag { background: rgba(232, 52, 51, 0.16); color: var(--kc-flare); }
.calc-foot { margin: 14px 0 0; font-size: 12px; color: var(--muted-2); line-height: 1.6; }

/* ---- Troubleshooting: symptom card ---- */
.symptom {
  background: linear-gradient(135deg, rgba(232, 52, 51, 0.10) 0%, var(--panel) 60%);
  border: 1px solid rgba(232, 52, 51, 0.24);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  margin: 0 0 24px;
}
.symptom-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-flare);
  margin-bottom: 8px;
}
.symptom p { margin: 0; font-size: 15px; color: var(--text); line-height: 1.62; }

/* Ranked cause list. Most common first, numbered by frequency. */
.causes { list-style: none; padding: 0; margin: 18px 0; counter-reset: cause; }
.causes li {
  position: relative;
  counter-increment: cause;
  padding: 12px 14px 12px 46px;
  margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-2);
  line-height: 1.62;
}
.causes li::before {
  content: counter(cause);
  position: absolute;
  left: 12px; top: 12px;
  width: 22px; height: 22px;
  border-radius: 5px;
  background: rgba(232, 52, 51, 0.14);
  color: var(--kc-flare);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  display: grid;
  place-items: center;
}
.causes li strong { color: var(--text); }
.causes li .freq {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: 1px;
}

/* First-thing-to-check banner */
.check-first {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--kc-ink);
  border: 1px solid var(--border);
  border-left: 3px solid var(--kc-amber);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 18px 0;
}
.check-first-mark {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-amber);
  flex-shrink: 0;
  padding-top: 2px;
}
.check-first div:last-child { color: var(--text-2); line-height: 1.62; }
.check-first strong { color: var(--text); }

/* ---- Related modules ---- */
.related {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}
.related-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 12px;
}
/* The column count comes from app.js fitRelated(), which picks one that never
   strands a single card alone on the last row. 79 of CHIP's 98 modules carry
   exactly four related links, and auto-fill laid those out 3 + 1 at most
   reading widths, which looked like a bug rather than a layout. Four now goes
   2 x 2. The declaration below is the pre-script fallback only. */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.related-card { height: 100%; }
.related-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 11px 13px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
  min-width: 0;
}
.related-card:hover {
  border-color: rgba(232, 52, 51, 0.45);
  background: var(--panel-2);
  transform: translateY(-1px);
}
.related-card-cat {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-flare);
}
.related-card-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.related-card-sum {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Affiliate CTA ---- */
.aff {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 15px 17px;
  margin: 22px 0;
}
.aff-body { flex: 1 1 240px; min-width: 0; }
.aff-brand {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-sawdust);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.aff-tag {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 500;
}
.aff-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 5px; }
.aff-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--kc-sawdust);
  color: var(--kc-sawdust);
  padding: 9px 15px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
  border-bottom-width: 1px;
}
.aff-cta:hover { background: var(--kc-sawdust); color: var(--kc-ink); }
.aff-cta svg { flex-shrink: 0; }

/* ---- "This is what I run" card ----------------------------------------
   The neutral .aff block above says "here is a product that fits this
   subject". This one says "this is the one that is actually in my shop",
   which is a much stronger claim, so it looks different on purpose: a solid
   flare rule down the left, the sentence set as speech rather than as
   marketing copy, and the same affiliate tag the neutral card carries.
   It may only be used where the claim is literally true. */
.iuse {
  position: relative;
  background: linear-gradient(180deg, rgba(232, 52, 51, 0.07), rgba(232, 52, 51, 0.02));
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--kc-flare);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 24px 0;
}
.iuse-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.iuse-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-flare);
}
.iuse-what {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--kc-bone);
  margin: 0 0 8px;
}
.iuse-body { font-size: 14px; color: var(--muted); line-height: 1.65; }
.iuse-body p { margin: 0 0 9px; }
.iuse-body p:last-child { margin-bottom: 0; }
.iuse-note {
  font-size: 12.5px;
  color: var(--muted-2);
  line-height: 1.6;
  margin: 10px 0 0;
}
.iuse-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  background: var(--kc-flare);
  border: 1px solid var(--kc-flare);
  color: #fff !important;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.iuse-cta:hover {
  background: #c62b2a;
  border-color: #c62b2a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 52, 51, 0.28);
}
.iuse-cta svg { flex-shrink: 0; }

/* Kinetic's Recommendation rows in the machine maker tables. Ported from KERF
   so the two directories read identically: the picked brand sits first in its
   tier, outlined in brand red, with a badge and the relationship stated on the
   row itself rather than buried in a disclosure at the bottom of the page.
   As a stacked phone card the whole card takes the outline. */
table.settings tr.kc-pick td {
  background: rgba(232, 52, 51, 0.07);
  border-top: 1px solid var(--kc-flare);
  border-bottom: 1px solid var(--kc-flare);
}
table.settings tr.kc-pick td:first-child { border-left: 1px solid var(--kc-flare); }
table.settings tr.kc-pick td:last-child { border-right: 1px solid var(--kc-flare); }
/* Stacked, the row keeps the outline but the TINT has to stay on the cells.
   A background set on a <tr> that the stack rule has switched to display:block
   does not paint; the cells do. Verified at 375px, where the row read as a
   plain card with a red outline and no fill. */
table.settings.table-stack tr.kc-pick { border: 1px solid var(--kc-flare); }
table.settings.table-stack tr.kc-pick td { border: 0; }
.kc-badge {
  display: block;
  width: fit-content;
  margin-bottom: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--kc-flare);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}
.kc-note { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted-2); }

/* ---- .offer: a call to action banner, sized to sit inside another card ----
   .aff and .iuse both stand on var(--panel), which is also the ground of the
   Start Here day blocks, so dropping either one inside a day made it vanish.
   This carries its own tint and left rule instead.

   The visible row IS the offer: a one line pitch and the real button. Only the
   argument for it collapses, because open the whole thing ran about 300px
   inside a day whose own content is a five item list, and the offer outweighed
   the lesson. Not a <details>, see initOfferToggles() in app.js. */
.offer {
  background: linear-gradient(180deg, rgba(232, 52, 51, 0.11), rgba(232, 52, 51, 0.045));
  border: 1px solid rgba(232, 52, 51, 0.28);
  border-left: 3px solid var(--kc-flare);
  border-radius: var(--radius);
  margin: 4px 0 2px;
}

.offer-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 15px;
}
/* The pitch takes the slack so the buttons stay pinned right. min-width:0 lets
   it wrap rather than shoving them off the row. */
.offer-pitch {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
/* Inline in the pitch, so it needs to sit with the text rather than stretch
   to the flex row's height. */
.offer-pitch .aff-perk {
  display: inline-block;
  margin-left: 8px;
  vertical-align: baseline;
}
.offer-pitch strong {
  color: var(--kc-bone);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 3px;
}

.offer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--kc-flare);
  border: 1px solid var(--kc-flare);
  color: #fff !important;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.offer-cta:hover {
  background: #c62b2a;
  border-color: #c62b2a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 52, 51, 0.28);
}
.offer-cta svg { flex-shrink: 0; }

/* The quiet half of the pair: the button must not compete with the CTA, but it
   still has to look pressable rather than like a caption. */
.offer-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 9px 12px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.offer-more:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--kc-flare);
  color: var(--kc-bone);
}
.offer-more:focus-visible { outline: 2px solid var(--kc-flare); outline-offset: 2px; }
.offer-more svg { flex-shrink: 0; transition: transform 0.18s ease; }
.offer-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.offer-body {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  padding: 0 15px 14px;
  border-top: 1px solid rgba(232, 52, 51, 0.18);
  margin-top: 2px;
  padding-top: 13px;
}
/* The house rule: a block element's [hidden] is honoured, but state this
   explicitly so a later display change on .offer-body cannot break the
   collapse the way it did for .calc-field and .diagram-hint. */
.offer-body[hidden] { display: none !important; }
.offer-body p { margin: 0 0 9px; }
.offer-body p:last-child { margin-bottom: 0; }
.offer-body strong { color: var(--kc-bone); }
.offer-foot { margin: 11px 0 0 !important; }

/* Inside a Start Here day the list above already has bottom padding, and the
   day block clips its own corners, so the offer needs room on both sides. */
.path-day .offer { margin: 12px 16px 16px; }

@media (max-width: 700px) {
  /* The pitch takes its own line and the two buttons share the next one, with
     the CTA taking the space so it stays the obvious action. */
  .offer-banner { gap: 10px; padding: 13px 13px; }
  .offer-pitch { flex: 1 1 100%; }
  /* stretch, because a long CTA label wraps to two lines here and the Details
     button next to it does not. Left to themselves they came out 57px and
     36px, which reads as a mistake. */
  .offer-actions { width: 100%; align-items: stretch; }
  .offer-cta { flex: 1 1 auto; justify-content: center; white-space: normal; letter-spacing: 0.06em; }
  .offer-more { flex: 0 0 auto; }
}
@media (max-width: 540px) {
  .path-day .offer { margin: 12px 12px 14px; }
  .offer-body { padding-left: 13px; padding-right: 13px; }
}

/* ---- Start Here learning path ---- */
.path-day {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  overflow: hidden;
}
.path-day-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--panel-2);
  flex-wrap: wrap;
}
.path-day-num {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-flare);
  background: rgba(232, 52, 51, 0.12);
  border-radius: 3px;
  padding: 3px 8px;
  flex-shrink: 0;
}
.path-day-title { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; min-width: 0; }
.path-day-time { font-size: 11px; color: var(--muted-2); margin-left: auto; white-space: nowrap; }
.path-links { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.path-links li { margin: 0; }
.path-links a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--text-2);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.45;
  border-bottom: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.path-links a:hover { background: var(--panel-2); color: var(--text); }
.path-links a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--kc-steel);
  flex-shrink: 0;
  transform: translateY(-2px);
}
.path-links a:hover::before { background: var(--kc-flare); }
.path-links .path-note { color: var(--muted-2); font-size: 12px; }

/* ---- Glossary ---- */
.glossary { display: grid; gap: 6px; margin: 20px 0; }
.gloss-item {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  align-items: baseline;
}
.gloss-term {
  font-weight: 700;
  color: var(--text);
  font-size: 13.5px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gloss-def { color: var(--text-2); font-size: 13.5px; line-height: 1.6; min-width: 0; }
.gloss-def a { font-size: inherit; }
@media (max-width: 620px) {
  .gloss-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Category landing grid ---- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 22px 0;
}
.cat-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 15px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color 0.18s ease, transform 0.18s ease;
  min-width: 0;
}
.cat-card:hover { border-color: rgba(232, 52, 51, 0.45); transform: translateY(-1px); }
.cat-card-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.cat-card-sum { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cat-card-meta {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-flare);
}

/* ---- Spec strip: compact key and value facts ---- */
/* Flex rather than grid, deliberately. With auto-fit columns, a block whose
   item count does not divide evenly leaves empty tracks on the last row, and
   because the 1px gaps are the container background showing through, that
   empty space reads as a cell with missing data. Flex lets the last row's
   items grow to fill instead, so any count looks intentional at any width. */
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 20px 0;
}
.spec {
  flex: 1 1 150px;
  background: var(--panel);
  padding: 12px 14px;
  min-width: 0;
}
.spec-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.spec-val { font-size: 13.5px; color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
.spec-val.good { color: #5FD68A; }
.spec-val.mid  { color: var(--kc-amber); }
.spec-val.bad  { color: var(--kc-flare); }

/* ---- Alias line under a module title in search results ---- */
.qa-alias {
  font-size: 11.5px;
  color: var(--muted-2);
  margin-top: 3px;
  line-height: 1.45;
}

/* ---- Answers: direct answers surfaced by search ---- */
.answer-card {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--kc-sawdust);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.answer-q { font-weight: 700; color: var(--text); font-size: 14px; margin-bottom: 6px; line-height: 1.4; }
.answer-a { color: var(--text-2); font-size: 13.5px; line-height: 1.62; }
.answer-a p { margin: 0 0 8px; }
.answer-a p:last-child { margin-bottom: 0; }

/* ---- Disclosure block at the end of a module ---- */
.disclosure {
  font-size: 11.5px;
  color: var(--muted-2);
  line-height: 1.6;
  border-top: 1px solid var(--border-subtle);
  margin-top: 26px;
  padding-top: 14px;
}

@media (max-width: 800px) {
  .start-here { flex: 1 1 0; justify-self: stretch; justify-content: center; }
  .topbar-home { flex: 1 1 0; justify-content: center; }
  .chip { padding-block: 7px; }
  .cat-rail { padding: 6px 12px 0; gap: 3px; }
  .cat-btn { padding: 10px 11px; letter-spacing: 0.08em; }
  .calc { padding: 16px 14px; }
  .calc-result { font-size: 22px; }
  .symptom { padding: 15px 16px; }
  .causes li { padding-left: 42px; }
}

/* ---- Further viewing: pointers to people who show it well ----
   CHIP never reproduces anyone else's material. Where a topic is better
   watched than read, a module links out to the channel's own search for
   that topic, which never goes stale the way a single video id does. */
.watch {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--kc-sawdust);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
  margin: 22px 0;
}
.watch-label {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kc-sawdust);
  margin-bottom: 8px;
}
.watch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.watch-list li { margin: 0; }
.watch-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.5;
  border-bottom: 0;
  padding: 3px 0;
}
.watch-list a:hover { color: var(--text); }
.watch-list a::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--kc-sawdust);
  flex-shrink: 0;
  transform: translateY(-1px);
}
.watch-by {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

/* ---- Diagrams ----
   Original inline SVG built by assets/diagrams.js. They inherit the page's
   tokens, so there is no image to load and nothing to go out of theme. */
.diagram {
  margin: 22px 0;
  padding: 16px 14px 12px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.diagram-body { overflow-x: auto; overflow-y: hidden; }
.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  /* The floor set by CHIPDiagram.figure(). Above it the diagram simply fits the
     column. Below it the .diagram-body scrolls instead of shrinking the labels
     into illegibility. */
  min-width: var(--dmin, 0px);
}
/* Shown by app.js only on a diagram that is genuinely scrollable at the
   current width, so it never lies on a screen where everything fits. */
.diagram-hint {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-display);
  color: var(--muted-2);
  margin-top: 9px;
}
.diagram-hint::before { content: "↔"; margin-right: 7px; }
.diagram-hint[hidden] { display: none !important; }
.diagram figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  text-align: left;
}
.diagram figcaption strong { color: var(--text-2); font-weight: 600; }

/* A standing member perk attached to a partner, e.g. a subscriber discount. */
.aff-perk {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--kc-amber);
  border: 1px solid rgba(245, 180, 69, 0.4);
  background: rgba(245, 180, 69, 0.1);
  border-radius: 3px;
  padding: 1px 6px;
  font-weight: 600;
  white-space: nowrap;
}

/* A calculator field that does not apply to the current "solve for" choice is
   hidden with the hidden attribute. .calc-field sets display:flex, which beats
   the browser's own [hidden] rule, so it has to be turned off explicitly. */
.calc-field[hidden] { display: none !important; }

/* ---- Link density: lists that are entirely links ----
   A page whose whole job is to be a set of links (the Start Here path, the
   glossary's "Read more" column) does not need each row marked up as a link.
   The row, the bullet and the hover state already say so. */
/* In a list where every row is a link, the colour alone is enough: this is a
   navigation menu, not a link buried in a sentence, so the underline-in-prose
   accessibility rule does not apply. They still have to LOOK clickable, which
   means they carry the link colour. */
.content .path-links a[data-module-link],
.content .path-links a[data-module-link]:visited {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}
.content .path-links a[data-module-link]:hover,
.content .path-links a[data-module-link]:focus-visible {
  color: var(--kc-flare) !important;
  text-decoration: underline solid var(--kc-flare);
  text-underline-offset: 3px;
}
.content .gloss-def a[data-module-link],
.content .gloss-def a[data-module-link]:visited {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.content .gloss-def a[data-module-link]:hover {
  color: var(--kc-flare) !important;
  text-decoration: underline solid var(--kc-flare);
}
/* Inside a comparison table a link sits among a lot of small text, so it keeps
   the underline as its cue but not the colour. */
.content table.settings a[data-module-link],
.content table.settings a[data-module-link]:visited { color: var(--link); font-weight: 500; }

/* Under 430px the two header buttons cannot both hold their full label on one
   row, so the outbound box loses "Return to" exactly as KERF's does. */
@media (max-width: 430px) {
  .topbar-actions { gap: 8px; }
  .topbar-home { padding: 8px 10px; font-size: 10.5px; letter-spacing: 0.08em; }
  .topbar-home-full { display: none; }
  .start-here { padding: 9px 10px; font-size: 10.5px; letter-spacing: 0.06em; }
}