/* =========================================================
   styles.css – Instrukcje & dobór profilu CAN
   Aesthetic: sharp industrial-technical, geometric precision
   Fonts: Barlow Condensed (display) + DM Sans (body)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:        #f0f2f7;
  --surface:   #ffffff;
  --surface2:  #f7f8fc;
  --stroke:    rgba(15,23,42,.09);
  --stroke2:   rgba(15,23,42,.05);
  --text:      #0d1117;
  --muted:     rgba(13,17,23,.50);
  --primary:   #0057ff;
  --primary-d: #0044cc;
  --accent:    #00c896;
  --danger:    #e03131;

  --shadow-sm: 0 1px 3px rgba(13,17,23,.06), 0 1px 2px rgba(13,17,23,.04);
  --shadow:    0 4px 16px rgba(13,17,23,.08), 0 1px 4px rgba(13,17,23,.04);
  --shadow-lg: 0 12px 40px rgba(13,17,23,.12), 0 4px 12px rgba(13,17,23,.06);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --container: min(1080px, 94vw);

  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ── Base ───────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  background: var(--bg); /* FIX: removed redundant duplicate background-color declaration */
  padding: 24px 12px 60px;
}

button { font: inherit; cursor: pointer; }

/* ── Topbar ─────────────────────────────────────────────── */
body.instructions-page .topbar {
  width: var(--container);
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.instructions-page .instructions-link a,
body.instructions-page .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .18s var(--ease-out), transform .18s var(--ease-out), border-color .18s;
  letter-spacing: .01em;
}

body.instructions-page .instructions-link a:hover,
body.instructions-page .theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: rgba(13,17,23,.16);
}

/* ── Heading ────────────────────────────────────────────── */
body.instructions-page h1 {
  width: var(--container);
  margin: 0 auto 24px;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}

body.instructions-page h1::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--primary);
  margin-top: 10px;
  border-radius: 2px;
}

/* ── Section accordions ─────────────────────────────────── */
body.instructions-page .section {
  width: var(--container);
  margin: 8px auto;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .2s var(--ease-out);
}

body.instructions-page .section:has(details[open]),
body.instructions-page .section:focus-within {
  box-shadow: var(--shadow);
}

body.instructions-page details.section-accordion { padding: 0; }

body.instructions-page details.section-accordion > summary.section-summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  /* FIX: replaced outline:none with a focus-visible style to keep keyboard accessibility */
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  transition: background .15s;
}

body.instructions-page details.section-accordion > summary.section-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

body.instructions-page details.section-accordion > summary.section-summary:hover {
  background: var(--surface2);
}

body.instructions-page details.section-accordion > summary.section-summary::-webkit-details-marker { display: none; }

/* Chevron icon */
body.instructions-page details.section-accordion > summary.section-summary::after {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .22s var(--ease-out), background .15s;
}

body.instructions-page details[open] > summary.section-summary::after {
  transform: rotate(180deg);
  background: var(--primary);
}

body.instructions-page details[open] > summary.section-summary {
  border-bottom: 1px solid var(--stroke2);
}

body.instructions-page .section-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  display: block;
}

body.instructions-page .section-subtitle {
  font-size: 14px;
  color: var(--muted);
  display: block;
  font-weight: 400;
  margin-top: 2px;
}

body.instructions-page details.section-accordion > .section-body {
  padding: 20px;
}

/* ── Brand / model / trim grids ─────────────────────────── */
body.instructions-page .general,
body.instructions-page .tabs,
body.instructions-page .models,
body.instructions-page .device-manual {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  width: min(980px, 100%);
  margin: 0 auto;
}

body.instructions-page .models {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke2);
}

/* ── Shared tile style ───────────────────────────────────
   FIX: .model-selector-btn duplicated all of .tab/.model-btn styles.
   Common properties extracted here; only structural differences kept below. */
body.instructions-page .tab,
body.instructions-page .model-btn,
body.instructions-page .general-btn,
body.instructions-page .device-link,
body.instructions-page .model-selector-btn {
  width: 100%;
  min-height: 72px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--surface2);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s var(--ease-out);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

body.instructions-page .tab:hover,
body.instructions-page .model-btn:hover,
body.instructions-page .general-btn:hover,
body.instructions-page .device-link:hover,
body.instructions-page .model-selector-btn:hover {
  background: var(--surface);
  border-color: rgba(13,17,23,.16);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

body.instructions-page .tab.active,
body.instructions-page .model-btn.active,
body.instructions-page .model-selector-btn.active {
  background: rgba(0,87,255,.06);
  border-color: rgba(0,87,255,.35);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,87,255,.08);
}

/* ── CAN buttons ────────────────────────────────────────── */
body.instructions-page .brand-selection,
body.instructions-page .model-selection,
body.instructions-page .trim-selection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  width: min(980px, 100%);
  margin: 0 auto;
}

body.instructions-page .brand-button,
body.instructions-page .model-button,
body.instructions-page .trim-button {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--surface2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s var(--ease-out);
  box-shadow: var(--shadow-sm);
  text-align: center;
  word-break: break-word;
  hyphens: auto;
  white-space: normal;
  height: auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.instructions-page .brand-button:hover,
body.instructions-page .model-button:hover,
body.instructions-page .trim-button:hover {
  background: var(--surface);
  border-color: rgba(13,17,23,.18);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

body.instructions-page .brand-button.active,
body.instructions-page .model-button.active,
body.instructions-page .trim-button.active {
  background: rgba(0,87,255,.07);
  border-color: rgba(0,87,255,.40);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,87,255,.08);
}

/* ── CAN labels & disclaimer ────────────────────────────── */
body.instructions-page .can-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 12px;
}

body.instructions-page .can-label:first-child { margin-top: 0; }

body.instructions-page #disclaimer {
  text-align: left;
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--stroke2);
  margin-bottom: 4px;
}

body.instructions-page ul.inline-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.instructions-page ul.inline-list li {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--stroke);
  font-size: 15px;
}

/* ── State / utility ────────────────────────────────────── */
body.instructions-page .empty,
body.instructions-page .can-no-trims,
body.instructions-page .can-placeholder {
  color: var(--muted);
  background: var(--surface2);
  border: 1px dashed rgba(13,17,23,.14);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: left;
  line-height: 1.55;
}

body.instructions-page .can-placeholder { margin-top: 4px; }

/* ── Manual container ───────────────────────────────────── */
body.instructions-page .manual-content {
  line-height: 1.8;
  font-size: 17px;
}

/* Odstępy między elementami w treści */
body.instructions-page .step-body > * + * { margin-top: 14px; }
body.instructions-page .step-body p {
  margin: 0;
  display: block;
}
body.instructions-page .step-body p + p { margin-top: 10px; }
body.instructions-page .step-body p + ul,
body.instructions-page .step-body p + ol { margin-top: 8px; }

/* Zdjęcia — więcej oddechu nad i pod */
body.instructions-page .manual-content img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
  cursor: zoom-in;
  margin: 20px 0;
}

/* Lista punktowana */
body.instructions-page .step-body ul,
body.instructions-page .step-body ol {
  padding-left: 0;
  list-style: none;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.instructions-page .step-body li {
  position: relative;
  padding: 4px 14px 4px 24px;
  font-size: 17px;
  line-height: 1.75;
}

body.instructions-page .step-body ul li::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

body.instructions-page .step-body ol {
  counter-reset: step-counter;
}

body.instructions-page .step-body ol li {
  counter-increment: step-counter;
  padding-left: 34px;
}

body.instructions-page .step-body ol li::before {
  content: counter(step-counter);
  position: absolute;
  left: 6px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.instructions-page .loading {
  color: var(--muted);
  font-size: 13px;
}

body.instructions-page .error {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(224,49,49,.05);
  border: 1px solid rgba(224,49,49,.20);
  color: var(--danger);
  font-size: 13px;
}

/* ── Step accordions (inside manuals) ───────────────────── */
body.instructions-page .video-button {
  margin: 16px 0 20px;
  display: flex;
  justify-content: center;
}
body.instructions-page .video-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 4px 14px rgba(0,87,255,.22);
  transition: box-shadow .18s, transform .18s var(--ease-out);
}
body.instructions-page .video-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,87,255,.30);
}

body.instructions-page .manual-content details.step {
  margin: 8px 0;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow .15s;
}

body.instructions-page .manual-content details.step:hover {
  box-shadow: var(--shadow-sm);
}

body.instructions-page .manual-content summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface2);
  border-bottom: 1px solid transparent;
  transition: background .15s;
  user-select: none;
  /* FIX: replaced bare outline:none with :focus-visible below for keyboard accessibility */
  outline: none;
}

body.instructions-page .manual-content summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

body.instructions-page .manual-content details[open] summary {
  border-bottom-color: var(--stroke2);
  background: var(--surface);
}

body.instructions-page .manual-content summary::-webkit-details-marker { display: none; }

body.instructions-page .manual-content summary::after {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--ease-out), background .15s;
}

body.instructions-page .manual-content details[open] summary::after {
  transform: rotate(180deg);
  background: var(--primary);
}

body.instructions-page .step-body { padding: 16px; }

body.instructions-page .step-body img { cursor: zoom-in; }

body.instructions-page .embed-iframe {
  width: 100%;
  min-height: 80vh;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface2);
}

/* ── External card ──────────────────────────────────────── */
body.instructions-page .external-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  background: var(--surface2);
}

body.instructions-page .external-title {
  font-weight: 600;
  font-size: 17px;
}

body.instructions-page .external-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  border: none;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .15s var(--ease-out);
}

body.instructions-page .external-open:hover {
  background: var(--primary-d);
  transform: translateY(-1px);
}

/* ── CAN modal ──────────────────────────────────────────── */
body.instructions-page .modal {
  position: fixed;
  inset: 0;
  background: rgba(13,17,23,.60);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}

body.instructions-page .modal.visible {
  display: flex;
}

body.instructions-page .modal-content {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  padding: 12px;
  max-width: min(960px, 96vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}

body.instructions-page #settingsImage {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

/* ── Zoom modal ─────────────────────────────────────────── */
body.instructions-page .image-modal {
  position: fixed;
  inset: 0;
  background: rgba(13,17,23,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10000;
}

body.instructions-page .image-modal.hidden { display: none; }

body.instructions-page .image-modal img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  touch-action: manipulation;
}

/* ── Boxy informacyjne ──────────────────────────────────── */
body.instructions-page .box,
body.instructions-page .warning,
body.instructions-page .note {
  position: relative;
  padding: 14px 16px 14px 48px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  margin: 16px 0;
  font-size: 17px;
  line-height: 1.75;
}

body.instructions-page .box p,
body.instructions-page .warning p,
body.instructions-page .note p {
  margin: 0;
  display: block;
}

body.instructions-page .box p + p,
body.instructions-page .warning p + p,
body.instructions-page .note p + p { margin-top: 8px; }

body.instructions-page .box::before,
body.instructions-page .warning::before,
body.instructions-page .note::before {
  position: absolute;
  left: 14px;
  top: 15px;
  font-size: 18px;
  line-height: 1;
}

/* Ostrzeżenie */
body.instructions-page .box-warning,
body.instructions-page .warning {
  background: #fff8ec;
  border-color: #f5a623;
  color: #7a4a00;
}
body.instructions-page .box-warning::before,
body.instructions-page .warning::before { content: '⚠️'; }

/* Informacja */
body.instructions-page .box-info,
body.instructions-page .note {
  background: #eef4ff;
  border-color: #4d8eff;
  color: #1a3a6e;
}
body.instructions-page .box-info::before,
body.instructions-page .note::before { content: 'ℹ️'; }

/* Wskazówka */
body.instructions-page .box-tip {
  background: #edfaf4;
  border-color: #00c896;
  color: #005c42;
}
body.instructions-page .box-tip::before { content: '✅'; }

/* Dark mode boxów */
body.instructions-page.theme-dark .box-warning,
body.instructions-page.theme-dark .warning {
  background: rgba(245,166,35,.10);
  border-color: rgba(245,166,35,.40);
  color: #f5c97a;
}
body.instructions-page.theme-dark .box-info,
body.instructions-page.theme-dark .note {
  background: rgba(77,142,255,.10);
  border-color: rgba(77,142,255,.40);
  color: #90b8ff;
}
body.instructions-page.theme-dark .box-tip {
  background: rgba(0,200,150,.10);
  border-color: rgba(0,200,150,.40);
  color: #5eecc8;
}

/* ── Dark theme ─────────────────────────────────────────── */
body.instructions-page.theme-dark {
  --bg:        #0c0f15;
  --surface:   #141820;
  --surface2:  #1a1f2b;
  --stroke:    rgba(255,255,255,.09);
  --stroke2:   rgba(255,255,255,.05);
  --text:      rgba(255,255,255,.92);
  --muted:     rgba(255,255,255,.45);
  --primary:   #4d8eff;
  --primary-d: #6fa3ff;
  --accent:    #00d9a0;

  background-color: var(--bg);
}

body.instructions-page.theme-dark .section { border-color: var(--stroke); }

body.instructions-page.theme-dark .instructions-link a,
body.instructions-page.theme-dark .theme-toggle {
  background: var(--surface2);
  border-color: var(--stroke);
  color: var(--text);
}

body.instructions-page.theme-dark .tab,
body.instructions-page.theme-dark .model-btn,
body.instructions-page.theme-dark .general-btn,
body.instructions-page.theme-dark .device-link,
body.instructions-page.theme-dark .brand-button,
body.instructions-page.theme-dark .model-button,
body.instructions-page.theme-dark .trim-button,
body.instructions-page.theme-dark .model-selector-btn /* FIX: merged here, removed duplicate block */ {
  background: var(--surface2);
  border-color: var(--stroke);
  color: var(--text);
}

body.instructions-page.theme-dark .tab.active,
body.instructions-page.theme-dark .model-btn.active,
body.instructions-page.theme-dark .brand-button.active,
body.instructions-page.theme-dark .model-button.active,
body.instructions-page.theme-dark .trim-button.active,
body.instructions-page.theme-dark .model-selector-btn.active /* FIX: merged here */ {
  background: rgba(77,142,255,.12);
  border-color: rgba(77,142,255,.40);
  color: var(--primary);
}

body.instructions-page.theme-dark .manual-content details.step { background: var(--surface2); }
body.instructions-page.theme-dark .manual-content summary { background: var(--surface); }
body.instructions-page.theme-dark .manual-content details[open] summary { background: var(--surface2); }
body.instructions-page.theme-dark .embed-iframe { background: transparent; }
body.instructions-page.theme-dark .external-card { background: var(--surface2); }
body.instructions-page.theme-dark .external-open { background: var(--primary); color: #fff; }
body.instructions-page.theme-dark .external-open:hover { background: var(--primary-d); }
body.instructions-page.theme-dark .modal-content { background: var(--surface); }
body.instructions-page.theme-dark .empty,
body.instructions-page.theme-dark .can-no-trims,
body.instructions-page.theme-dark .can-placeholder {
  border-color: rgba(255,255,255,.10);
  background: var(--surface2);
}
body.instructions-page.theme-dark ul.inline-list li { background: var(--surface2); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  body.instructions-page .topbar { flex-direction: column; align-items: stretch; }
  body.instructions-page h1 { text-align: center; }
  body.instructions-page h1::after { margin: 10px auto 0; }
  body.instructions-page .general,
  body.instructions-page .tabs,
  body.instructions-page .models,
  body.instructions-page .device-manual,
  body.instructions-page .brand-selection,
  body.instructions-page .model-selection,
  body.instructions-page .trim-selection {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* ── Model selector (general.html back-image buttons) ───── */
body.instructions-page .model-selector { margin: 0 0 1.5rem; }
body.instructions-page .model-selector > p { margin-bottom: 0.75rem; font-size: 15px; color: var(--muted); }
body.instructions-page .model-selector-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  width: min(980px, 100%);
}
/* FIX: .model-selector-btn base/hover/active styles merged into shared tile block above */
body.instructions-page #backImageFigure { margin-top: 1.25rem; }
body.instructions-page #backImageFigure img {
  border-radius: var(--radius-sm);
  max-width: 100%;
  display: block;
}
/* FIX: .model-selector-btn dark mode is now handled in the unified tile block above */

/* ── Footer ─────────────────────────────────────────────── */
/* FIX: flex layout was previously declared in a second body.instructions-page block
   below .model-selector-btn, creating a confusing duplicate. Merged here. */
body.instructions-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0; /* override default body padding — moved to .page-wrap */
}

body.instructions-page .page-wrap {
  flex: 1;
  padding: 24px 12px 60px;
}

body.instructions-page .site-footer {
  width: 100%;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--stroke2);
  background: var(--surface);
}

body.instructions-page.theme-dark .site-footer {
  background: var(--surface);
  border-color: var(--stroke);
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  body.instructions-page { background: #fff !important; color: #111 !important; padding: 0; }
  body.instructions-page .topbar, body.instructions-page .section { display: none !important; }
  body.instructions-page .embed-iframe { display: none !important; }
  body.instructions-page summary::after { display: none !important; }
}