/* ------------------------------------------------------------------ */
/* Page shell — overrides brand.css's paper background with the panel  */
/* tint for this page only, so the card stage has some contrast to sit */
/* on, matching the original SIDS design's intent.                     */
/* ------------------------------------------------------------------ */
body { background-color: var(--panel); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 1.5rem; }
.app-shell { width: 100%; max-width: 900px; }

.hidden { display: none !important; }
.no-transition { transition: none !important; }

.sids-back-link {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 50;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-muted);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: .5em 1em;
}
.sids-back-link:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Carousel Stage Layout                                               */
/* ------------------------------------------------------------------ */
.carousel-stage { display: flex; align-items: center; justify-content: center; position: relative; perspective: 1200px; min-height: 520px; overflow-x: hidden; overflow-y: visible; }
.carousel-stage.stage-top-align { align-items: flex-start; }

/* ------------------------------------------------------------------ */
/* Card design — uses --card-radius (16px), the brand's token for      */
/* tactile/interactive cards, NOT --radius (0, for flat content tiles) */
/* Height is fully dynamic — no max-height, no internal scrollbar.     */
/* min-height keeps the playing-card footprint for typical short       */
/* nodes. A node long enough to exceed the viewport doesn't scroll     */
/* inside the card (that clipped the rounded corners); instead JS adds */
/* .card-overflow (see sids.js), which switches the card from its      */
/* usual centered/absolute positioning to a normal in-flow, top-       */
/* anchored element — its real height then pushes the page taller than */
/* one screen, and the browser's own scrollbar reveals the rest, same  */
/* as any ordinary long page.                                          */
/* ------------------------------------------------------------------ */
.sids-card {
  width: 320px; min-height: 440px; overflow: hidden;
  border-radius: var(--card-radius); border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); padding: 1.5rem; box-shadow: var(--shadow);
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex; flex-direction: column; position: absolute;
}

.sids-card.card-active.card-overflow { position: relative; }

@media (min-width: 768px) {
  .carousel-stage { min-height: 680px; }
  .app-shell { max-width: 1100px; }
  .sids-card { width: 420px; min-height: 500px; }
}

.sids-card.card-active { z-index: 3; transform: translateX(0) scale(1); opacity: 1; pointer-events: auto; }

.sids-card.card-prev { z-index: 2; transform: translateX(-68%) scale(0.92); opacity: 0.85; background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(241, 243, 242, 0.95) 70%, var(--panel) 100%); pointer-events: none; overflow: hidden; }

.sids-card.card-next { z-index: 1; transform: translateX(68%) scale(0.92); opacity: 0.85; background: linear-gradient(270deg, rgba(255, 255, 255, 0.2) 0%, rgba(241, 243, 242, 0.95) 70%, var(--panel) 100%); pointer-events: none; overflow: hidden; }

.sids-card.card-hidden-right { transform: translateX(160%) scale(0.8); opacity: 0; pointer-events: none; }

.card-content {
  margin-bottom: 1rem;
}

.card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--ink); letter-spacing: -.01em; }
.card-subtitle { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 1.25rem; line-height: 1.3; }
.safety-warning { font-size: 0.8rem; background: #fff7ed; color: #c2410c; border: 1px solid #ffedd5; padding: 0.5rem; border-radius: 0; margin-bottom: 0.75rem; }

.form-group { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.82rem; font-weight: 700; color: var(--ink); }

.input-field { width: 100%; padding: 0.6rem 0.8rem; border-radius: 0; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 0.88rem; font-family: inherit; outline: none; transition: border-color 0.2s, background 0.2s; }
.input-field:focus { border-color: var(--accent); background: var(--paper); }
textarea.input-field { resize: none; height: 80px; }

.instructions-list { padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.45; margin: 0; color: var(--ink); }
.instructions-list li { margin-bottom: 0.4rem; }

.options-group { display: flex; flex-direction: column; gap: 0.5rem; }
.btn-option, .btn-primary { width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--ink); padding: 0.65rem 1rem; border-radius: 0; cursor: pointer; text-align: left; font-size: 0.88rem; font-weight: 600; font-family: inherit; transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border: none; text-align: center; font-weight: 800; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-option:hover { background: #fff3e6; border-color: var(--accent); color: var(--accent); }
.btn-option:disabled, .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.content-mount { display: flex; flex-direction: column; }
#card-content-panel { display: flex; flex-direction: column; gap: 1rem; }

#start-form-wrapper,
#step-content-wrapper {
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------------ */
/* Restart icon button                                                  */
/* ------------------------------------------------------------------ */
.restart-btn {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  z-index: 50;
}
.restart-btn:hover { background: #fff3e6; color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Error banner (replaces alert()) — semantic red, not brand accent    */
/* ------------------------------------------------------------------ */
.error-banner { font-size: 0.8rem; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 0.5rem 0.65rem; border-radius: 0; margin-bottom: 0.75rem; }

/* ------------------------------------------------------------------ */
/* Character counter                                                    */
/* ------------------------------------------------------------------ */
.char-count { font-size: 0.72rem; color: var(--ink-muted); text-align: right; }

/* ------------------------------------------------------------------ */
/* Progress bar — native <progress> element, driven by .value/.max      */
/* DOM properties from JS (not styles), so CSP's style-src never sees it */
/* ------------------------------------------------------------------ */
.progress-wrap { margin-bottom: 0.4rem; }
.progress-native { width: 100%; height: 6px; border-radius: 999px; overflow: hidden; border: none; appearance: none; -webkit-appearance: none; }
.progress-native::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
.progress-native::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }
.progress-native::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.progress-label { display: block; font-size: 0.72rem; color: var(--ink-muted); margin-bottom: 0.75rem; }

/* ------------------------------------------------------------------ */
/* Media assets                                                         */
/* ------------------------------------------------------------------ */
.media-assets { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.media-image { width: 100%; max-height: 160px; object-fit: cover; border-radius: 0; border: 1px solid var(--line); display: block; }
.media-video { width: 100%; max-height: 160px; object-fit: cover; border-radius: 0; border: 1px solid var(--line); }
.media-pdf-link { font-size: 0.82rem; color: var(--accent); text-decoration: underline; }

@media (min-width: 768px) {
  .media-image, .media-video { max-height: 220px; }
}

/* ------------------------------------------------------------------ */
/* Part recommendation                                                  */
/* ------------------------------------------------------------------ */
.part-recommendation { margin-top: 0.75rem; padding: 0.6rem 0.75rem; background: #fff8f0; border: 1px solid #fcd9a8; border-radius: 0; font-size: 0.85rem; }
.part-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.part-link:hover { text-decoration: underline; }
.part-label { color: #8a4a00; font-weight: 500; }

/* ------------------------------------------------------------------ */
/* Option badge colors — semantic severity, left untouched by the      */
/* brand-color change deliberately (see file header note)              */
/* ------------------------------------------------------------------ */
.btn-option.badge-green  { border-left: 4px solid #16a34a; }
.btn-option.badge-amber  { border-left: 4px solid #d97706; }
.btn-option.badge-red    { border-left: 4px solid #dc2626; }
.btn-option.badge-neutral{ border-left: 4px solid #94a3b8; }

/* ------------------------------------------------------------------ */
/* Completion state                                                     */
/* ------------------------------------------------------------------ */
.end-notice { text-align: center; font-weight: 800; color: var(--accent); margin-bottom: 0.75rem; }

/* ------------------------------------------------------------------ */
/* SIDS link (case) mode — locked machine, feedback, customer care     */
/* ------------------------------------------------------------------ */
.case-machine { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 1rem; padding: 0.6rem 0.8rem; background: var(--panel); border: 1px solid var(--line); }
.case-machine__model { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.case-machine__serial { font-size: 0.72rem; color: var(--ink-muted); }

.case-feedback { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.6rem; }
.case-feedback__question { font-size: 0.92rem; font-weight: 700; color: var(--ink); margin: 0; }
.case-feedback__choices { display: flex; flex-direction: column; gap: 0.5rem; }
.case-feedback .btn-option.is-selected { background: #fff3e6; border-color: var(--accent); color: var(--accent); }
.case-feedback textarea.input-field { height: 64px; margin-top: 0.1rem; }
.case-feedback__thanks { font-size: 0.85rem; font-weight: 600; color: var(--ink); margin: 0; }
#case-feedback-ask { display: flex; flex-direction: column; gap: 0.6rem; }
#case-feedback-ask.hidden { display: none !important; }

.case-contact { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.case-contact__title { font-size: 0.82rem; font-weight: 700; color: var(--ink); margin: 0; }
.case-contact__actions { display: flex; flex-direction: column; gap: 0.5rem; }
.case-contact .btn-option { display: block; text-decoration: none; }