/* ==========================================================================
   KiwiScience theme — kept consistent with www.kiwiscience.com
   Palette:
     --ks-cream   #FDF6E3  page background / light text on dark
     --ks-ink     #2D2318  body text
     --ks-brown   #63452B  primary (header, headings, footer)
     --ks-brown-2 #7A5638  brown hover
     --ks-green   #4A7836  accent (links, buttons, selections)
     --ks-green-2 #3A6029  green hover
     --ks-tan     #EDE0C8  light borders / striping
     --ks-sand    #F3ECD9  soft fills
     --ks-rust    #A55A32  danger / alerts
   Typeface: Georgia serif throughout.
   ========================================================================== */

:root {
  --ks-cream:   #FDF6E3;
  --ks-ink:     #2D2318;
  --ks-brown:   #63452B;
  --ks-brown-2: #7A5638;
  --ks-green:   #4A7836;
  --ks-green-2: #3A6029;
  --ks-tan:     #EDE0C8;
  --ks-sand:    #F3ECD9;
  --ks-rust:    #A55A32;
  --ks-paper:   #FFFDF6;
  --ks-muted:   #77664E;
  --ks-green-tint: #EEF3E7;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --shadow-sm: 0 1px 3px rgba(45, 35, 24, 0.08);
  --shadow-md: 0 4px 14px rgba(45, 35, 24, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ks-ink);
  background-color: var(--ks-cream);
}

a { color: var(--ks-green); }
a:focus, a:hover { color: var(--ks-green-2); }

:focus-visible {
  outline: 3px solid rgba(74, 120, 54, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

button { font-family: var(--serif); }

/* ---------- Header & hero ---------- */

.site-header {
  background: var(--ks-brown);
  color: var(--ks-cream);
  border-bottom: 4px solid var(--ks-green);
}

.site-header .header-top {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ks-cream) !important;
  text-decoration: none;
  font-size: 20px;
}
.brand img { height: 34px; width: auto; }
.brand:hover { color: #fff !important; }

.header-links { display: flex; gap: 8px; }

/* Left cluster in the header: drawer hamburger + brand (drawer nav is shared). */
.header-left { display: flex; align-items: center; gap: 10px; }

.hero {
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 20px 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* Portrait sits immediately left of the page title and opens the About dialog */
.hero-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-portrait {
  flex: none;
  padding: 0;
  border: 2px solid rgba(253, 246, 227, 0.55);
  border-radius: 50%;
  background: var(--ks-sand);
  cursor: pointer;
  overflow: hidden;
  width: 74px;
  height: 74px;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.hero-portrait:hover {
  border-color: var(--ks-cream);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}
.hero-portrait:active { transform: translateY(0); }

.hero h1 {
  margin: 0 0 6px 0;
  font-size: 44px;
  line-height: 1.1;
  font-weight: normal;
  color: var(--ks-cream);
  letter-spacing: 0.5px;
}

.hero .tagline {
  margin: 0;
  max-width: 560px;
  font-style: italic;
  font-size: 15.5px;
  color: var(--ks-tan);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: 16px;
  padding: 11px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ks-brown); color: var(--ks-cream); }
.btn-primary:hover { background: var(--ks-brown-2); color: #fff; }

.btn-cta { background: var(--ks-green); color: #fff; }
.btn-cta:hover { background: var(--ks-green-2); color: #fff; }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--ks-brown);
  color: var(--ks-brown);
}
.btn-ghost:hover { background: var(--ks-sand); }

.btn-cream {
  background: transparent;
  border: 1.5px solid rgba(253, 246, 227, 0.7);
  color: var(--ks-cream);
  font-size: 14px;
  padding: 7px 16px;
}
.btn-cream:hover { background: rgba(253, 246, 227, 0.12); color: #fff; }

.btn-mini {
  background: transparent;
  border: 1.5px solid var(--ks-brown);
  color: var(--ks-brown);
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-mini:hover { background: var(--ks-sand); }

/* ---------- Layout ---------- */

main.wizard {
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 20px 70px;
}

/* ---------- Stepper ---------- */

.stepper {
  list-style: none;
  display: flex;
  margin: 26px 0 8px;
  padding: 0;
}
.stepper li { flex: 1; position: relative; }

/* connector line */
.stepper li + li::before {
  content: '';
  position: absolute;
  top: 17px;
  left: calc(-50% + 22px);
  width: calc(100% - 44px);
  height: 2px;
  background: var(--ks-tan);
}
.stepper li.completed + li::before { background: var(--ks-green); }

.stepper button {
  position: relative;
  z-index: 1;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ks-brown);
  background: var(--ks-cream);
  color: var(--ks-brown);
  font-size: 15px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stepper button:hover .step-num { background: var(--ks-sand); }

.stepper li.active .step-num {
  background: var(--ks-brown);
  color: var(--ks-cream);
}
.stepper li.completed .step-num {
  background: var(--ks-green);
  border-color: var(--ks-green);
  color: #fff;
}

.step-name {
  font-size: 12.5px;
  color: var(--ks-brown);
  letter-spacing: 0.3px;
}
.stepper li.active .step-name { font-weight: bold; }

/* ---------- Sticky site summary bar ---------- */

.site-bar {
  position: sticky;
  top: 0;
  z-index: 1100; /* above Leaflet controls (1000) */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 2px;
  margin: 0 -2px;
  background: rgba(253, 246, 227, 0.96);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--ks-tan);
}

.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ks-tan);
  background: var(--ks-sand);
  border-radius: 999px;
  overflow: hidden;
}
.chip .chip-main {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ks-muted);
  padding: 5px 12px;
}
.chip .chip-main strong { color: var(--ks-ink); font-weight: bold; }
.chip .chip-main:hover { background: rgba(99, 69, 43, 0.07); }

.chip.set { background: var(--ks-green-tint); border-color: var(--ks-green); }
.chip.set .chip-main { color: var(--ks-green-2); }
.chip.set .chip-main strong { color: var(--ks-green-2); }

.chip .chip-x {
  background: none;
  border: none;
  border-left: 1px solid rgba(74, 120, 54, 0.3);
  color: var(--ks-green-2);
  cursor: pointer;
  font-size: 13px;
  padding: 5px 10px;
  line-height: 1;
}
.chip .chip-x:hover { background: rgba(74, 120, 54, 0.12); }

.count-pill {
  margin-left: auto;
  background: var(--ks-green);
  color: #fff;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13.5px;
  white-space: nowrap;
}
.count-pill strong { font-size: 16px; }
.count-pill.zero { background: var(--ks-rust); }

/* ---------- Step cards ---------- */

.wizard-step {
  display: none;
  background: var(--ks-paper);
  border: 1px solid var(--ks-tan);
  border-radius: 12px;
  padding: 30px 34px 26px;
  margin-top: 20px;
  box-shadow: var(--shadow-sm);
}
.wizard-step.active { display: block; }

.step-overline {
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ks-green);
  margin: 0 0 4px;
}

.step-title {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: normal;
  color: var(--ks-brown);
  line-height: 1.2;
}

.step-hint {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--ks-muted);
  max-width: 720px;
}
.step-hint a { white-space: nowrap; }

/* ---------- Option grids (soil, generic) ---------- */

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.option-card {
  border: 1.5px solid #E2D5BC;
  border-radius: 9px;
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
  text-align: left;
  background: #fff;
  font-size: 14.5px;
}
.option-card strong { display: block; font-size: 15px; color: var(--ks-ink); }
.option-card small { display: block; font-size: 12px; color: var(--ks-muted); line-height: 1.4; margin-top: 2px; }

.option-card:hover {
  border-color: var(--ks-brown);
  background: var(--ks-sand);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.option-card.selected {
  border-color: var(--ks-green);
  background: var(--ks-green-tint);
  box-shadow: inset 0 0 0 1px var(--ks-green);
}
.option-card.selected strong { color: var(--ks-green-2); }

.option-card.ignore-card { background: var(--ks-sand); border-style: dashed; }
.option-card.ignore-card strong { color: var(--ks-muted); font-style: italic; }
.option-card.ignore-card.selected { background: var(--ks-green-tint); border-style: solid; }
.option-card.ignore-card.selected strong { color: var(--ks-green-2); font-style: normal; }

/* ---------- Region step ---------- */

.region-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.region-controls .or { font-size: 14px; color: var(--ks-muted); font-style: italic; }

select.ks-select {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ks-ink);
  background: #fff;
  border: 1.5px solid #E2D5BC;
  border-radius: 8px;
  padding: 9px 12px;
  min-width: 230px;
  cursor: pointer;
}
select.ks-select:hover { border-color: var(--ks-brown); }

.pill-toggle {
  font-family: var(--serif);
  font-size: 15px;
  border: 1.5px dashed #E2D5BC;
  border-radius: 999px;
  background: var(--ks-sand);
  color: var(--ks-muted);
  font-style: italic;
  padding: 9px 20px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pill-toggle:hover { border-color: var(--ks-brown); }
.pill-toggle.selected {
  border: 1.5px solid var(--ks-green);
  background: var(--ks-green-tint);
  color: var(--ks-green-2);
  font-style: normal;
}
.pill-toggle.selected::before { content: '\2713\00a0'; }

#regionMap {
  height: 460px;
  width: 100%;
  border: 1px solid var(--ks-tan);
  border-radius: 10px;
  margin: 4px 0 8px;
}

.status-line {
  font-size: 13px;
  color: var(--ks-muted);
  min-height: 20px;
  font-style: italic;
}

/* ---------- Moisture step ---------- */

.moisture-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 22px 0 10px;
}

.moisture-card {
  border: 1.5px solid #E2D5BC;
  border-radius: 12px;
  padding: 24px 16px 20px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
  text-align: center;
  background: #fff;
}
.moisture-card:hover {
  border-color: var(--ks-brown);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.moisture-card.selected {
  border-color: var(--ks-green);
  background: var(--ks-green-tint);
  box-shadow: inset 0 0 0 1px var(--ks-green);
}

.moisture-icon { display: block; margin: 0 auto 10px; color: var(--ks-green); }
.moisture-card strong { font-size: 17px; color: var(--ks-brown); }
.moisture-card.selected strong { color: var(--ks-green-2); }
.moisture-card small { display: block; font-size: 12.5px; color: var(--ks-muted); margin-top: 4px; line-height: 1.4; }

/* ---------- Plant use step ---------- */

.use-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.use-card {
  position: relative;
  border: 1.5px solid #E2D5BC;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  padding: 0;
  text-align: left;
  display: block;
  width: 100%;
}
.use-card:hover {
  border-color: var(--ks-brown);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.use-card.selected { border-color: var(--ks-green); box-shadow: inset 0 0 0 1.5px var(--ks-green); }
.use-card.selected::after {
  content: '\2713 selected';
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--ks-green);
  color: #fff;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
}

.use-card .use-thumb {
  width: 100%;
  height: 92px;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  background: var(--ks-sand);
  border-bottom: 1px solid var(--ks-tan);
}
.use-card .use-body { padding: 10px 14px 13px; }
.use-card h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: bold;
  color: var(--ks-brown);
}
.use-card p { margin: 3px 0 0; font-size: 12.5px; color: var(--ks-muted); line-height: 1.4; }

/* Diagram view */
.diagram-step { display: none; }
.diagram-step.active { display: block; }

.back-to-categories {
  background: none;
  border: 1.5px solid var(--ks-brown);
  color: var(--ks-brown);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 14px;
  font-family: var(--serif);
}
.back-to-categories:hover { background: var(--ks-sand); }

.diagram-step h3 {
  margin: 4px 0 6px;
  font-size: 24px;
  font-weight: normal;
  color: var(--ks-brown);
}
.diagram-step h4 {
  margin: 18px 0 6px;
  font-size: 15px;
  color: var(--ks-brown);
}
.diagram-intro { margin: 0 0 12px; font-size: 14.5px; color: var(--ks-muted); }

.diagram-scroll { overflow-x: auto; }

.diagram-container {
  position: relative;
  display: block;
  width: 100%;
  min-width: 620px;
  max-width: 1024px;
  margin: 6px 0 14px;
  border: 1px solid var(--ks-tan);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.diagram-container img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.diagram-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.diagram-zone {
  position: absolute;
  border: 1px dashed rgba(99, 69, 43, 0.25);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.diagram-zone:hover {
  background: rgba(99, 69, 43, 0.16);
  border: 2px solid rgba(99, 69, 43, 0.6);
}
.diagram-zone.selected {
  background: rgba(74, 120, 54, 0.32);
  border: 2px solid var(--ks-green);
  box-shadow: 0 0 10px rgba(74, 120, 54, 0.5);
}
.diagram-zone-label {
  font-size: 11px;
  color: var(--ks-brown);
  background: rgba(255, 255, 255, 0.94);
  padding: 2px 7px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  margin-bottom: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.diagram-zone:hover .diagram-zone-label,
.diagram-zone.selected .diagram-zone-label { opacity: 1; }

.also-row { margin: 4px 0 0; font-size: 13.5px; color: var(--ks-muted); }
.also-row .also-label { margin-right: 6px; font-style: italic; }
.also-chip {
  display: inline-block;
  margin: 3px 4px 3px 0;
  padding: 3px 12px;
  border: 1px solid var(--ks-tan);
  border-radius: 999px;
  background: var(--ks-sand);
  color: var(--ks-brown);
  text-decoration: none;
  font-size: 12.5px;
  cursor: pointer;
}
.also-chip:hover { border-color: var(--ks-brown); background: var(--ks-tan); text-decoration: none; }
.also-chip.selected { border-color: var(--ks-green); background: var(--ks-green-tint); color: var(--ks-green-2); }

/* Current use selection bar */
.use-info {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 16px;
  background: var(--ks-green-tint);
  border: 1px solid var(--ks-green);
  border-radius: 9px;
  font-size: 14px;
}
.use-info.on { display: flex; }
.use-info .lbl { color: var(--ks-green-2); }

.current-selection-tag {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--ks-green);
  border-radius: 999px;
  padding: 3px 13px;
  font-size: 13px;
  color: var(--ks-green-2);
}

.clear-link {
  background: none;
  border: none;
  color: var(--ks-rust);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--serif);
  text-decoration: underline;
  padding: 2px 4px;
}
.clear-link:hover { color: #7d401f; }

/* ---------- Wizard nav ---------- */

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ks-tan);
}
.wizard-arrow-placeholder { width: 10px; }

/* ---------- Results ---------- */

.results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 6px;
}

.results-title {
  margin: 0;
  font-size: 30px;
  font-weight: normal;
  color: var(--ks-brown);
  line-height: 1.15;
}
.results-title .count-big { color: var(--ks-green); font-weight: bold; }

.results-filters { margin: 2px 0 18px; font-size: 14px; color: var(--ks-muted); font-style: italic; }

.results-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.segmented {
  display: inline-flex;
  border: 1.5px solid var(--ks-brown);
  border-radius: 8px;
  overflow: hidden;
}
.segmented button {
  background: transparent;
  border: none;
  font-family: var(--serif);
  font-size: 13.5px;
  padding: 7px 16px;
  cursor: pointer;
  color: var(--ks-brown);
}
.segmented button + button { border-left: 1.5px solid var(--ks-brown); }
.segmented button.on { background: var(--ks-brown); color: var(--ks-cream); }

.species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 22px;
  margin-top: 10px;
}

.sp {
  padding: 9px 4px;
  border-bottom: 1px dotted var(--ks-tan);
  break-inside: avoid;
}
.sp a { font-size: 15.5px; text-decoration: none; }
.sp a:hover { text-decoration: underline; }
.sp a em::after {
  content: ' \2197';
  font-style: normal;
  font-size: 11px;
  color: var(--ks-muted);
}
.sp .sp-common {
  display: block;
  font-size: 13px;
  color: var(--ks-muted);
}
.sp .sp-meta { display: block; margin-top: 4px; }
.sp .sp-meta span {
  display: inline-block;
  background: var(--ks-sand);
  border: 1px solid var(--ks-tan);
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--ks-brown);
  padding: 1px 7px;
  margin-right: 5px;
}

/* Planting-stage grouping on the results page */
.stage-group { margin: 22px 0 8px; }
.stage-group + .stage-group { border-top: 1px solid var(--ks-tan); padding-top: 14px; }
.stage-head {
  margin: 0;
  font-size: 18px;
  font-weight: normal;
  color: var(--ks-green-2);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.stage-head .stage-count {
  font-size: 12px;
  font-weight: bold;
  color: var(--ks-cream);
  background: var(--ks-green);
  border-radius: 999px;
  padding: 1px 9px;
}
.stage-blurb { margin: 3px 0 4px; font-size: 13px; color: var(--ks-muted); font-style: italic; }

/* Ecosystem-service chips (Detailed mode) */
.sp .sp-services { display: block; margin-top: 5px; }
.sp .sp-services .svc {
  display: inline-block;
  background: var(--ks-green-tint);
  border: 1px solid #cdddbf;
  border-radius: 5px;
  font-size: 11px;
  color: var(--ks-green-2);
  padding: 1px 7px;
  margin: 0 4px 4px 0;
}
.sp .sp-services .svc-wild {
  background: #f6e9d2;
  border-color: #e2c99a;
  color: var(--ks-brown-2);
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--ks-muted);
}
.empty-state .big { font-size: 42px; display: block; margin-bottom: 10px; }
.empty-state p { max-width: 420px; margin: 0 auto 18px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ks-brown);
  color: var(--ks-tan);
  padding: 28px 20px 34px;
  font-size: 14px;
  margin-top: 30px;
}
.site-footer .footer-inner { max-width: 1040px; margin: 0 auto; }
.site-footer p { margin: 0 0 8px; }
.site-footer a { color: var(--ks-cream); }
.site-footer a:hover { color: #fff; }

/* ==========================================================================
   Help & guides page (help.html)
   Two-part document: the Tika Tipu user guide, then the planting field guide.
   ========================================================================== */

.help-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 20px 60px;
}

/* ---------- Sticky part switcher ---------- */

.help-nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(253, 246, 227, 0.96);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--ks-tan);
}
.help-nav-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.help-nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 15px;
  border: 1px solid var(--ks-tan);
  background: var(--ks-sand);
  border-radius: 999px;
  color: var(--ks-brown);
  text-decoration: none;
  font-size: 14px;
}
.help-nav-link:hover {
  border-color: var(--ks-brown);
  background: var(--ks-tan);
  color: var(--ks-brown);
}
.help-nav-num {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ks-green-2);
}
.help-nav-cta {
  margin-left: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--ks-green);
  color: #fff !important;
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
}
.help-nav-cta:hover { background: var(--ks-green-2); }

/* ---------- Part openers ---------- */

.part-opener {
  border-top: none !important;
  margin: 34px 0 0;
  padding: 26px 28px 22px !important;
  background: var(--ks-paper);
  border: 1px solid var(--ks-tan);
  border-left: 5px solid var(--ks-green);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.part-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ks-green);
}
.part-title {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: normal;
  line-height: 1.15;
  color: var(--ks-brown);
}
.part-lede {
  margin: 0;
  font-size: 17px;
  color: var(--ks-muted);
  max-width: 62ch;
}

/* ---------- Contents ---------- */

.help-body nav.toc {
  background: var(--ks-paper);
  border: 1px solid var(--ks-tan);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
}
.help-body nav.toc h2 {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.help-body nav.toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 34px;
}
.help-body nav.toc li { margin: 5px 0; font-size: 15px; }

/* ---------- Sections & headings ---------- */

.help-body section {
  padding: 30px 0;
  border-top: 1px solid var(--ks-tan);
}
.help-body h2.sec {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 27px;
  font-weight: normal;
  line-height: 1.2;
  color: var(--ks-brown);
}
.help-body h2.sec .num {
  flex: none;
  position: relative;
  top: -3px;
  font-size: 14px;
  color: #fff;
  background: var(--ks-green);
  border-radius: 8px;
  padding: 3px 10px;
}
.help-body h3 {
  margin: 26px 0 6px;
  font-size: 19px;
  font-weight: bold;
  color: var(--ks-brown);
}
.help-body p { margin: 10px 0; }
.help-body li { margin: 6px 0; }
.help-body ol.steps { padding-left: 22px; }
.help-body ol.steps li { margin: 9px 0; }

.guide-lede { font-size: 17.5px; color: var(--ks-muted); }
.guide-note { font-size: 14px; color: var(--ks-muted); }
.reflink { font-size: 14.5px; color: var(--ks-muted); }

.pill {
  display: inline-block;
  background: var(--ks-green-tint);
  border: 1px solid #cdddbf;
  color: var(--ks-green-2);
  border-radius: 999px;
  padding: 2px 11px;
  font-size: 13px;
  margin: 2px 3px 2px 0;
}

/* ---------- Callout boxes ---------- */

.box {
  position: relative;
  border-radius: 10px;
  padding: 15px 18px 15px 46px;
  margin: 18px 0;
  font-size: 15.5px;
}
.box .ic {
  position: absolute;
  left: 15px;
  top: 15px;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.2;
}
.box p { margin: 6px 0; }
.box p:first-child { margin-top: 0; }
.box p:last-child { margin-bottom: 0; }
.box b { color: var(--ks-brown); }

.box.tip   { background: var(--ks-green-tint); border: 1px solid #cdddbf; }
.box.tip   .ic { color: var(--ks-green); }
.box.watch { background: #F7E9DE; border: 1px solid #E4C3AC; }
.box.watch .ic { color: var(--ks-rust); }
.box.key   { background: var(--ks-sand); border: 1px solid var(--ks-tan); }
.box.key   .ic { color: var(--ks-brown-2); }

/* ---------- Figures ---------- */

.help-body figure {
  margin: 22px 0;
  background: var(--ks-paper);
  border: 1px solid var(--ks-tan);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.help-body figure .art { padding: 10px 10px 0; }
.help-body figure svg { display: block; width: 100%; height: auto; }
.help-body figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ks-sand);
  /* Tall portrait photos would otherwise dwarf the text beside them */
  max-height: 420px;
  object-fit: cover;
}
.help-body figcaption {
  padding: 11px 16px;
  font-size: 13.5px;
  color: var(--ks-muted);
  border-top: 1px solid var(--ks-tan);
}
.help-body figcaption b { color: var(--ks-brown); }

.lead-figure { margin-top: 26px !important; }

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* ---------- Colin Meurk bio ---------- */

.bio {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items: start;
  background: var(--ks-paper);
  border: 1px solid var(--ks-tan);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 18px 0;
  box-shadow: var(--shadow-sm);
}
.bio img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--ks-tan);
  display: block;
}
.bio-text h3 { margin: 0 0 8px; font-size: 20px; }
.bio-text p:last-child { margin-bottom: 0; }
.bio-role {
  display: block;
  font-size: 13px;
  font-weight: normal;
  font-style: italic;
  color: var(--ks-muted);
  letter-spacing: 0.3px;
}

/* Compact credit card used on the selector itself */
.credit-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ks-paper);
  border: 1px solid var(--ks-tan);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 26px 0 0;
  box-shadow: var(--shadow-sm);
}
.credit-card img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  object-position: 62% 30%;
  border-radius: 50%;
  border: 2px solid var(--ks-tan);
  flex: none;
}
.credit-card p { margin: 0; font-size: 14.5px; color: var(--ks-muted); }
.credit-card p strong { color: var(--ks-brown); }

/* ---------- Tables ---------- */

table.at {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}
table.at th, table.at td {
  border: 1px solid var(--ks-tan);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}
table.at th {
  background: var(--ks-green-tint);
  color: var(--ks-brown);
  font-weight: bold;
}
table.at tr:nth-child(even) td { background: var(--ks-paper); }

/* ---------- Checklist ---------- */

.checklist {
  background: var(--ks-paper);
  border: 1px solid var(--ks-tan);
  border-radius: 12px;
  padding: 8px 22px;
  box-shadow: var(--shadow-sm);
}
.checklist ul { list-style: none; padding: 0; margin: 12px 0; }
.checklist li { position: relative; padding-left: 30px; margin: 9px 0; }
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--ks-green);
  border-radius: 4px;
}

.disclaim {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--ks-tan);
  font-size: 13px;
  color: var(--ks-muted);
}

/* ---------- "About Colin Meurk" dialog ---------- */

.about-dialog {
  width: min(620px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--ks-tan);
  border-top: 5px solid var(--ks-green);
  border-radius: 12px;
  background: var(--ks-paper);
  color: var(--ks-ink);
  font-family: var(--serif);
  box-shadow: 0 12px 40px rgba(45, 35, 24, 0.32);
}
.about-dialog::backdrop { background: rgba(45, 35, 24, 0.55); }

.about-body { padding: 24px 28px 26px; }
.about-body p { margin: 12px 0; font-size: 15.5px; }
.about-body p:last-child { margin-bottom: 0; }

.about-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ks-tan);
}
.about-head img {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--ks-tan);
}
.about-head h2 {
  margin: 0;
  font-size: 23px;
  font-weight: normal;
  color: var(--ks-brown);
  line-height: 1.2;
}
.about-role {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-style: italic;
  color: var(--ks-muted);
  letter-spacing: 0.3px;
}
.about-sub {
  margin: 6px 0 0 !important;
  font-size: 14px !important;
  color: var(--ks-green-2);
}
.about-more { padding-top: 4px; }

.about-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ks-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.about-close:hover { background: var(--ks-sand); color: var(--ks-brown); }

/* Hidden form elements (used by the filtering engine) */
.hidden-selects { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 680px) {
  .hero h1 { font-size: 34px; }
  .hero { padding-bottom: 22px; }
  .hero-main { gap: 13px; }
  .hero-portrait { width: 56px; height: 56px; }
  .about-head img { width: 74px; height: 74px; }
  .about-body { padding: 20px 18px 22px; }
  .wizard-step { padding: 20px 16px 18px; }
  .step-title { font-size: 24px; }
  .stepper .step-name { font-size: 10.5px; }
  .step-num { width: 28px; height: 28px; font-size: 13px; }
  .stepper li + li::before { top: 14px; left: calc(-50% + 18px); width: calc(100% - 36px); }
  #regionMap { height: 330px; }
  .count-pill { margin-left: 0; }
  .wizard-nav { flex-wrap: wrap; }
  .wizard-nav .btn { flex: 1; text-align: center; }

  /* Help page */
  .help-body nav.toc ol { columns: 1; }
  .two { grid-template-columns: 1fr; }
  .bio { grid-template-columns: 1fr; }
  .bio img { max-width: 200px; }
  .part-opener { padding: 20px 18px 18px !important; }
  .part-title { font-size: 26px; }
  .help-body h2.sec { font-size: 22px; }
  .help-nav-cta { margin-left: 0; }
  .credit-card { flex-wrap: wrap; }

  /* Wide tables and diagrams scroll rather than breaking the page */
  table.at { display: block; overflow-x: auto; white-space: nowrap; }
  table.at td, table.at th { white-space: normal; min-width: 130px; }
}

/* ---------- Print ---------- */

@media print {
  body { background: #fff; }
  .site-header, .stepper, .site-bar, .wizard-nav, .results-tools,
  .site-footer, .hero button, .help-nav { display: none !important; }
  .wizard-step { border: none; box-shadow: none; padding: 0; }
  .sp a em::after { content: ''; }

  /* Help page: keep it readable on paper, avoid splitting figures and boxes */
  .help-body section { page-break-inside: auto; }
  .help-body figure, .box, .bio, .checklist, table.at { page-break-inside: avoid; }
  .part-opener { page-break-before: always; }
  .help-body nav.toc { page-break-after: avoid; }
}