/* IntelliCulture Install Guide — shared styles
   Mobile-first. Mirrors the look of the native InstallGuide.js
   (white cards on light gray, colored accents per harness). */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f8fafc;
  color: #1f2024;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.4;
  /* Suppress mobile WebView's double-tap-to-zoom on tappable elements so
     rapid Next/Back taps register as two clicks, not "zoom into this
     button". Pinch-zoom (e.g. lightbox reference photos) still works
     because that's a separate gesture. */
  touch-action: manipulation;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 30px;
}

/* Per-language visibility — toggled by app.js based on ?lang= */
[data-lang] {
  display: none;
}
html[lang="en"] [data-lang="en"],
html[lang="es"] [data-lang="es"] {
  display: revert;
}

/* --- Language toggle pills --- */
.lang-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 16px 0;
  background-color: #f8fafc;
}

.lang-toggle {
  display: inline-flex;
  border-radius: 999px;
  background-color: #f3f4f6;
  padding: 2px;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
}

.lang-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #4b5563;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 32px;
  transition: background-color 0.1s ease, color 0.1s ease;
}

/* Round country flag inside the language pills — same assets as the main
   IC web app's Topbar selector (usa-flag-circle / mexico-flag-circle) for
   cross-product consistency. */
.lang-flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lang-toggle button.is-active {
  background-color: #056906;
  color: #fff;
}

.lang-toggle button:not(.is-active):active {
  background-color: #e5e7eb;
}

/* --- Header --- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background-color: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-title {
  font-size: 17px;
  font-weight: 600;
  color: #1f2024;
  margin: 0;
  text-align: center;
  flex: 1;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-title.small {
  font-size: 15px;
}

.header-action {
  color: #056906;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  min-width: 50px;
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.header-action.right {
  text-align: right;
}

.header-spacer {
  min-width: 50px;
}

/* Page subhead — used on harness step pages instead of the full nav header.
   When the guide is loaded inside the mobile app's WebView, the native chrome
   already provides Back/Cancel, so duplicating them here is confusing. The
   subhead is just an unobtrusive label identifying which harness page the
   user is on, with no interactive elements. */
.page-subhead {
  padding: 12px 16px 4px;
  background-color: transparent;
}

.page-subhead-title {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* --- Harness selector --- */
.selector-title {
  font-size: 22px;
  font-weight: 800;
  color: #1f2024;
  margin: 0 0 6px;
}

.selector-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 18px;
  line-height: 20px;
}

.harness-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #e5e7eb;
  border-left-width: 4px;
  text-decoration: none;
  color: inherit;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.05s ease, background-color 0.1s ease;
}

.harness-card:active {
  transform: scale(0.99);
  background-color: #f9fafb;
}

/* Cards that have a hardware photo header. The photo lives in a softly-
   tinted gradient tray INSIDE the card padding (not edge-to-edge), so
   the (now-transparent) product shot floats on a tint instead of fighting
   the card's white edges. Cards WITHOUT .has-photo keep the default
   flex-row treatment (e.g. the J1939 + Crossover card). */
.harness-card.has-photo {
  flex-direction: column;
  align-items: stretch;
  padding: 12px 12px 16px;
}

.harness-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 140px;
  padding: 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 10px;
  overflow: hidden;
}

.harness-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Crossover card: two photos (J1939 base + crossover adapter) joined by
   a plus symbol. Each image takes ~40% of the tray width; the + sits
   between them. Conveys "you need J1939 PLUS this extra piece" at a glance. */
.harness-photo--combo {
  gap: 4px;
}
.harness-photo--combo img {
  max-width: 42%;
  flex-shrink: 1;
}
.photo-plus {
  font-size: 32px;
  font-weight: 800;
  color: #94a3b8;
  flex-shrink: 0;
  line-height: 1;
}

/* "Photo coming soon" placeholder inside the gradient tray. Used on cards
   where we haven't picked a lead hero shot yet (currently Bluetooth Tracking).
   Same tray as a real photo so the card visually matches the others. */
.photo-coming-soon {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.harness-row {
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 12px;
}

.harness-dot {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  margin-right: 12px;
  flex-shrink: 0;
}

.harness-body {
  flex: 1;
  min-width: 0;
}

.harness-label {
  font-size: 17px;
  font-weight: 700;
  color: #1f2024;
  margin: 0 0 4px;
}

/* Second-line "Common: ..." / "Required for: ..." callout under the main
   description. Visually quieter than the main desc but the label is bolded
   so it scans at a glance. */
.harness-common {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
}
.harness-common-label {
  font-weight: 700;
  color: #1f2024;
}

/* Crossover card: the engine list is the only signal that tells the
   installer they need THIS harness vs. plain J1939. Easy to miss in
   regular body text, so we tint the line with the card's accent color
   (a soft lavender that picks up the purple left-border). Subtle bump
   in noticeability — no icons, no caps, no scary colors. */
.harness-common--required {
  display: inline-block;
  background: #f5edff;
  color: #4c1d95;
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 6px;
}
.harness-common--required .harness-common-label {
  color: #6b21a8;
}

.harness-desc {
  font-size: 13px;
  color: #4b5563;
  line-height: 18px;
  margin: 0;
}

.chevron {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  flex-shrink: 0;
  color: #94a3b8;
}

/* --- Support footer --- */
.support-footer {
  margin-top: 24px;
  padding: 16px;
  background-color: #f3f4f6;
  border-radius: 12px;
  text-align: center;
}

.support-label {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  margin: 0 0 8px;
}

.support-link {
  display: block;
  font-size: 14px;
  color: #056906;
  font-weight: 600;
  text-decoration: none;
  margin: 2px 0;
  padding: 4px 0;
}

/* --- Progress dots (step view) --- */
.dots-row {
  display: flex;
  justify-content: center;
  padding: 14px 16px 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #d6dadd;
  margin: 0 4px;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.dot.active {
  width: 24px;
}

.dot.done {
  background-color: #10b981;
}

.step-counter {
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

/* --- Intro card (first step) --- */
.intro-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
}

.intro-title {
  font-size: 18px;
  font-weight: 800;
  color: #1f2024;
  margin: 0 0 2px;
}

.intro-version {
  font-size: 11px;
  color: #6b7280;
  margin: 0 0 16px;
}

.tools-label {
  font-size: 11px;
  font-weight: 700;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
}

.tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tools-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: #1f2024;
  margin-bottom: 2px;
  line-height: 1.45;
}

.tools-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: #4b5563;
  font-weight: 700;
}

/* --- Reference photos button --- */
.reference-button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  margin-top: 14px;
  background-color: #ebf5eb;
  border-radius: 10px;
  border: 1px solid #c8e6c8;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #056906;
  text-align: left;
}

.reference-button:active {
  background-color: #c8e6c8;
}

.reference-button-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}

.reference-button-text {
  flex: 1;
}

.reference-button-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  margin-top: 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #056906;
  cursor: pointer;
}

.reference-button-inline-text {
  margin-left: 6px;
  text-decoration: underline;
}

/* --- Step content --- */
.step-section {
  display: none;
}
.step-section.is-current {
  display: block;
}

.step-title {
  font-size: 22px;
  font-weight: 800;
  color: #1f2024;
  margin: 0 0 10px;
}

.step-body {
  font-size: 15px;
  color: #1f2024;
  line-height: 22px;
  white-space: pre-wrap;
}

/* --- Video card / Loom embed --- */
.video-wrap {
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #0f172a;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Shown by app.js when navigator.onLine is false (Loom embeds need
   internet — Phase 1 limitation, MP4 self-host coming in Phase 2). */
.video-offline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #cbd5e1;
  text-align: center;
  gap: 6px;
}
.video-offline svg {
  color: #94a3b8;
  margin-bottom: 4px;
}
.video-offline-text {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
}
.video-offline-sub {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

/* --- Footer nav buttons --- */
.footer-nav {
  display: flex;
  gap: 10px;
  padding: 16px 16px 24px;
  background-color: #fff;
  border-top: 1px solid #e5e7eb;
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.btn {
  flex: 1;
  border-radius: 12px;
  border: 1px solid #056906;
  background-color: #fff;
  color: #056906;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

.btn:active {
  opacity: 0.85;
}

.btn-primary {
  background-color: #056906;
  color: #fff;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Lightbox (reference photos modal) --- */
.lightbox {
  position: fixed;
  inset: 0;
  background-color: #000;
  z-index: 100;
  display: none;
  flex-direction: column;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  flex-shrink: 0;
}

.lightbox-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.lightbox-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
}

.lightbox-scroll {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding-bottom: 30px;
  touch-action: pan-x pan-y pinch-zoom;
}

.lightbox-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 12px;
  /* Aspect ratio matches the source PDF page 1080:1397 */
  max-width: 100%;
}

.lightbox-caption {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 24px 0;
  margin: 0;
}

/* Body scroll lock when lightbox is open */
body.lightbox-open {
  overflow: hidden;
}

/* ─── Breadcrumb (Option E — compact bar with home icon) ─────────────────
   Lives on every page except the hardware picker root (index.html). Sticky
   at the top so the home icon is always reachable for "get me out of here".
   Past items are <a> links that jump to that level; current item is a span. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 11;
}
.bc-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -4px -4px -6px;
  border-radius: 8px;
  color: #056906;
  flex-shrink: 0;
  text-decoration: none;
  transition: background-color 0.1s ease;
}
.bc-home:active {
  background: #ebf5eb;
}
.bc-home svg {
  width: 18px;
  height: 18px;
}
.bc-text {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f2024;
}
.bc-item {
  color: inherit;
  text-decoration: none;
}
.bc-item--past {
  color: #94a3b8;
  font-weight: 500;
  transition: color 0.1s ease;
}
.bc-item--past:active {
  color: #475569;
}
.bc-item--current {
  color: #1f2024;
}
.bc-sep {
  color: #cbd5e1;
  margin: 0 6px;
  font-weight: 400;
}

/* Pages that bake in multiple variants based on ?from= (currently breadcrumbs
   and footer back-buttons on 3-wire.html, since it can be reached either as
   the GO Anywhere Plus direct path or the GR9 → 3-Wire → General path). All
   start hidden; app.js adds .is-active to the variant matching ?from=. If JS
   is broken nothing shows for these elements — the page itself still works. */
.breadcrumb[data-from],
.footer-nav[data-from] {
  display: none;
}
.breadcrumb[data-from].is-active,
.footer-nav[data-from].is-active {
  display: flex;
}

/* ─── Install-steps accordion ─────────────────────────────────────────────
   Replaces the linear next/back step navigation. Each install step is an
   accordion card: tap the header to expand (single-open — opening one
   collapses the others), tap "Mark done" inside to track completion in
   localStorage so installers can resume across sessions. Currently used by
   3-wire.html; j1939 + j1939-crossover will follow once this is settled. */
.tools-box {
  background: #f3f4f6;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.tools-box .tools-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.tools-box .tools-list { padding: 0; margin: 0 0 4px; }
.tools-box .reference-button { margin-top: 14px; }

.steps-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 18px 0 10px;
}

.accordion { display: block; }

.acc-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.acc-card.is-open { border-color: #056906; }
.acc-card.is-done { background: #f8fafc; }

.acc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  background: #f3f4f6;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease;
}
.acc-head:active { background-color: #e5e7eb; }
/* Tint the ribbon green when the card is open so it's obvious which header
   belongs to the visible content below. */
.acc-card.is-open .acc-head { background: #ebf5eb; }

/* Troubleshooting variant — amber "?" icon + amber ribbon when open so it
   doesn't read as a numbered step. Lives at the end of step-page accordions
   for symptom → fix reference. No mark-done button (it's reference content,
   not a do-once step). */
.acc-card--troubleshoot .acc-num {
  background: #f59e0b;
  font-size: 0;
}
.acc-card--troubleshoot .acc-num::before {
  content: '?';
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.acc-card--troubleshoot.is-open { border-color: #f59e0b; }
.acc-card--troubleshoot.is-open .acc-head { background: #fef3c7; }

/* LED Quick Reference table — always-visible reference at the top of the
   troubleshooting card. More scannable than prose. */
.led-ref {
  background: #f3f4f6;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 18px;
}
.led-ref-title {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.led-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #1f2024;
}
.led-ref-table th {
  text-align: left;
  font-weight: 700;
  color: #475569;
  padding: 6px 4px;
  border-bottom: 1px solid #e5e7eb;
}
.led-ref-table td {
  padding: 6px 4px;
  vertical-align: top;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.35;
}
.led-ref-table tr:last-child td { border-bottom: none; }
.led-ref-table td:first-child { font-weight: 700; white-space: nowrap; }

/* Common-issues section heading inside the troubleshooting card. */
.trouble-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}

/* Symptom mini-accordion using native <details>. Each row is collapsed by
   default with a one-line summary; tap to expand the fix. No JS needed,
   browser-native behaviour. Flatter visual than the outer .acc-card so the
   nesting doesn't feel heavy. */
.trouble-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.trouble-item summary {
  cursor: pointer;
  padding: 10px 36px 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2024;
  list-style: none;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.35;
}
.trouble-item summary::-webkit-details-marker { display: none; }
.trouble-item summary::after {
  content: '+';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}
.trouble-item[open] summary::after { content: '−'; }
.trouble-item[open] summary { border-bottom: 1px solid #f1f5f9; }
.trouble-fix {
  padding: 10px 14px 12px;
  font-size: 13px;
  color: #1f2024;
  line-height: 1.55;
}
.trouble-fix p { margin: 0 0 8px; }
.trouble-fix p:last-child { margin-bottom: 0; }
.trouble-fix ol { margin: 0; padding-left: 20px; }
.trouble-fix ol li { margin-bottom: 6px; }
.trouble-fix ol li:last-child { margin-bottom: 0; }
.trouble-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* Sub-bullets inside a numbered troubleshooting check. Block-level with a
   hanging indent so wrapped lines align under the text, not the bullet. */
.trouble-fix .sub-bullet {
  display: block;
  position: relative;
  padding-left: 14px;
  margin-top: 6px;
}
.trouble-fix .sub-bullet::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: #6b7280;
}

/* Harness Selection lookup — root downloads page. Search box filters the
   make chips; tapping a make shows the recommended harness badge + note.
   Data comes from the IC Harness Selection Lookup Google Sheet (live fetch
   with a baked fallback in harness-lookup.js). */
.lookup-box {
  background: linear-gradient(180deg, #f3faf3 0%, #fff 70%);
  border: 1px solid #c8e6c8;
  border-left: 4px solid #056906;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
.lookup-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.lookup-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #056906;
  color: #fff;
  flex-shrink: 0;
}
.lookup-head-text { min-width: 0; }
.lookup-title {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #1f2024;
  line-height: 1.3;
}
.lookup-sub {
  display: block;
  font-size: 13px;
  color: #475569;
  margin-top: 2px;
  line-height: 1.4;
}
.lookup-input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: #1f2024;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #f8fafc;
  outline: none;
  -webkit-appearance: none;
}
.lookup-input:focus {
  border-color: #056906;
  background: #fff;
}
.lookup-select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #1f2024;
  padding: 11px 38px 11px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background-color: #f8fafc;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.lookup-select:focus {
  outline: none;
  border-color: #056906;
  background-color: #fff;
}
.lookup-result {
  margin-top: 14px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.lookup-result-label,
.lookup-result-q {
  font-size: 14px;
  color: #1f2024;
  margin: 0 0 10px;
}
.lookup-year-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lookup-year {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #056906;
  background: #fff;
  border: 1px solid #056906;
  border-radius: 9px;
  padding: 9px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lookup-year:active { background: #ebf5eb; }
.lookup-note {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 10px 0 0;
}
.lookup-model { margin-top: 12px; }
.lookup-model-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}
.lookup-model-input { font-size: 14px; padding: 8px 12px; }
.lookup-model-status {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  margin: 8px 0 0;
}
.harness-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
}
.hb-green  { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.hb-blue   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.hb-purple { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.hb-gray   { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.hb-yellow { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* Guide groups — root-level downloads page (CS-facing, web only). One card
   per harness family: hero photo, name header, then rows of guide title +
   per-language PDF download buttons. Mirrors harness-search's Install
   Guides tab layout. */
.guide-group {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.guide-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  padding: 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.guide-hero img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.guide-group-head {
  padding: 12px 16px;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.guide-group:first-child .guide-group-head,
.guide-group .guide-group-head:first-child {
  border-top: none;
}
.guide-group-title {
  font-size: 16px;
  font-weight: 800;
  color: #1f2024;
}
.guide-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.guide-row:last-child { border-bottom: none; }
.guide-row-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2024;
  flex: 1;
  min-width: 160px;
}
.guide-row-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #056906;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 9px;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}
.pdf-btn:active { opacity: 0.85; }
.pdf-btn .lang-flag { width: 15px; height: 15px; }

/* PDF download cards — used by the root-level downloads page (CS-facing,
   web only; not part of the mobile zip flow). Same visual family as
   .harness-card rows. */
.pdf-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.05s ease, background-color 0.1s ease;
}
.pdf-card:active {
  transform: scale(0.99);
  background-color: #f9fafb;
}
.pdf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.pdf-icon--app {
  background: #ebf5eb;
  color: #056906;
}
/* Harness photo thumb variant — identifies which harness the PDF covers at
   a glance. Slightly larger than the text badge, photo on the soft tray. */
.pdf-icon--photo {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 4px;
}
.pdf-icon--photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pdf-body {
  flex: 1;
  min-width: 0;
}
.pdf-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1f2024;
}
.pdf-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* "Need help?" footer — lives at the bottom of every page's <main>,
   just above the back-nav. Inviting green tint so it reads as "we're here"
   rather than "error". Both email and phone are tappable on mobile. */
.help-footer {
  background: #ebf5eb;
  border: 1px solid #c8e6c8;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  margin: 20px 0 8px;
}
.help-footer-title {
  font-size: 14px;
  font-weight: 700;
  color: #056906;
  margin: 0 0 6px;
}
.help-footer-body {
  font-size: 13px;
  color: #475569;
  margin: 0;
  line-height: 1.5;
}
.help-footer-body a {
  color: #056906;
  text-decoration: none;
  font-weight: 600;
}
.help-footer-body a:active { text-decoration: underline; }

.acc-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #056906;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}
.acc-card.is-done .acc-num { background: #10b981; }
.acc-card.is-done .acc-num::before {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.acc-card.is-done .acc-num { font-size: 0; }

.acc-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #1f2024;
  line-height: 1.35;
  min-width: 0;
}
.acc-card.is-done .acc-title { color: #475569; }

.acc-toggle {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1;
}
.acc-toggle::before { content: '+'; }
.acc-card.is-open .acc-toggle::before { content: '−'; }

.acc-body {
  padding: 14px;
  display: none;
}
.acc-card.is-open .acc-body { display: block; }
.acc-body .step-body {
  font-size: 14px;
  color: #1f2024;
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0 0 12px;
}
.acc-body .video-wrap { margin: 10px 0; }
.acc-body .reference-button-inline { margin-top: 6px; }

/* Photo grid embedded inside a step accordion body — small captioned tiles
   in a 2-column responsive grid. Matches the multi-photo reference style in
   the original PDF install guide; each photo visualizes one moment of the
   step. */
.step-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 0 12px;
}
.step-photo {
  margin: 0;
}
.step-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.step-photo figcaption {
  font-size: 11px;
  color: #475569;
  margin-top: 5px;
  line-height: 1.35;
}

/* Text-only tile in the photo grid — same dimensions/styling shell as a
   photo tile but holds a caption-like paragraph. Used for "repeat with X"
   moments that don't have a corresponding photo. */
/* Standalone full-width photo (used when a step has only one reference
   image — the 2-col grid would leave a hollow second cell). */
.step-photo--full {
  margin: 0 0 12px;
}

.step-photo--text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  text-align: center;
}
.step-photo--text p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #1f2024;
  line-height: 1.45;
}

/* Inline wire-color emphasis inside captions and text tiles. Mirrors the
   wire labelling in the original PDF instructions so installers can scan
   for which wire each step refers to. */
.text-red { color: #dc2626; font-weight: 700; }
.text-yellow { color: #ca8a04; font-weight: 700; }
.text-black { color: #000; font-weight: 700; }

/* Mark-done toggle — bottom of each expanded step. Two labels coexist; CSS
   shows the one that matches the card's current done/not-done state. */
.mark-done-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fff;
  color: #056906;
  border: 1px solid #056906;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.mark-done-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.mark-done-btn:active { background-color: #ebf5eb; }
.acc-card.is-done .mark-done-btn {
  background: #056906;
  color: #fff;
}
.acc-card.is-done .mark-done-btn:active { background: #044d04; }
.mark-done-btn .label-done { display: none; }
.acc-card.is-done .mark-done-btn .label-not-done { display: none; }
.acc-card.is-done .mark-done-btn .label-done { display: inline; }