/* ============================================================
   Wizard mode
   ------------------------------------------------------------
   body.wizard-active hides the Full Editor chrome so each wizard
   substep only shows what's relevant. The wizard panels themselves
   are rendered by static/js/wizard.js.

   Colors use the theme variables from base.html (--gray-*, --white)
   which flip automatically under [data-bs-theme="dark"].
   ============================================================ */

/* ---- hide editor chrome while the wizard drives ---- */

body.wizard-active .stitch-settings-col,
body.wizard-active #selection-actions-bar,
body.wizard-active #stitch-order-card,
body.wizard-active #step4-advanced-card,
body.wizard-active #selection-color-float,
body.wizard-active #next-to-step-4,
body.wizard-active #back-to-step-3,
body.wizard-active #generate-btn {
  display: none !important;
}

/* The step-3 card footer carries its own Back / Continue buttons; the wizard
   renders its own nav, so hide the footer to avoid a duplicate Back button at
   the bottom of the color-selection page. (next-to-step-4 is still clicked
   programmatically by the wizard — display:none doesn't block that.) */
body.wizard-active #step-3 > .card-footer {
  display: none !important;
}

/* Output format card is hidden in its normal spot, but shows when the
   wizard's format step adopts it into the panel */
body.wizard-active .output-format-inline-card {
  display: none !important;
}
body.wizard-active #wizard-step4-panel .output-format-inline-card {
  display: block !important;
}

/* ---- step-4 layout: wizard panel sits to the right of the preview,
       same width as the Full Editor settings column (37.5%) ---- */

@media (min-width: 768px) {
  body.wizard-active .stitch-settings-layout-row #wizard-step4-col {
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
}

/* ---- stitch settings page heights ----
   The preview grows with the viewport (overriding its fixed 625px inline
   height). The wizard panel is allowed to grow to its full content length
   rather than scrolling within a fixed height — the whole panel is always
   visible, even if that leaves some space under the shorter preview box. */

@media (min-width: 768px) {
  body.wizard-active #svg-preview {
    height: calc(100vh - 350px) !important;
    min-height: 500px;
  }

  #wizard-step4-col > .card > .card-body {
    display: flex;
    flex-direction: column;
    min-height: 550px;
  }
}

@media (max-width: 767.98px) {
  #wizard-step4-col > .card > .card-body {
    display: flex;
    flex-direction: column;
  }
}

/* ---- wizard panel ---- */

.wizard-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.wizard-progress {
  margin-bottom: 12px;
}

.wizard-progress-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #12a05c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-bs-theme="dark"] .wizard-progress-label {
  color: #2ecc71;
}

.wizard-progress-count {
  font-size: 0.78rem;
  color: var(--gray-500);
}

.wizard-progress .progress-bar {
  background: linear-gradient(45deg, #12a05c, #2ecc71);
}

.wizard-title {
  font-weight: 700;
  margin-bottom: 12px;
}

/* The step's background notes live here (step.help) rather than in the body,
   so the title line needs a little air around the bubble. */
.wizard-title .wizard-infopop {
  margin-left: 7px;
  vertical-align: middle;
  width: 17px;
  height: 17px;
  font-size: 0.68rem;
}

.wizard-body {
  flex-grow: 1;
}

.wizard-nav {
  margin-top: auto;
}

/* ---- step outline (stitch phase checklist) ---- */

.wizard-outline {
  list-style: none;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.wizard-outline-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--gray-500);
  white-space: nowrap;
}

.wizard-outline-item i {
  font-size: 0.6rem;
}

.wizard-outline-item.upcoming i {
  font-size: 0.4rem;
  opacity: 0.5;
}

.wizard-outline-item.done {
  color: #12a05c;
  cursor: pointer;
}

[data-bs-theme="dark"] .wizard-outline-item.done {
  color: #2ecc71;
}

.wizard-outline-item.done:hover {
  background: rgba(18, 160, 92, 0.12);
  text-decoration: underline;
}

.wizard-outline-item.current {
  color: var(--gray-800);
  font-weight: 600;
  background: rgba(18, 160, 92, 0.12);
}

/* Leading "Colors & size" entry that jumps back to step 3 */
.wizard-outline-item.wizard-outline-back {
  border: 1px solid rgba(18, 160, 92, 0.4);
  margin-right: 4px;
}

.wizard-outline-item.wizard-outline-back::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-left: 6px;
  background: var(--gray-300);
}

/* Info / best-practice callouts */
.wizard-info,
.wizard-tip,
.wizard-warn {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 10px;
}

.wizard-info {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
}

.wizard-tip {
  background: rgba(18, 160, 92, 0.07);
  border: 1px solid rgba(18, 160, 92, 0.3);
  color: #1d5c38;
}

[data-bs-theme="dark"] .wizard-tip {
  background: rgba(46, 204, 113, 0.08);
  border-color: rgba(46, 204, 113, 0.35);
  color: #8be0b0;
}

/* Caution, not advice — used where a choice is likely to disappoint (e.g. a
   photo in outline mode). Deliberately not the green tip style: a warning
   that reads as a success message gets skimmed past. */
.wizard-warn {
  background: rgba(214, 137, 16, 0.09);
  border: 1px solid rgba(214, 137, 16, 0.38);
  color: #7a4b06;
}

[data-bs-theme="dark"] .wizard-warn {
  background: rgba(245, 176, 65, 0.09);
  border-color: rgba(245, 176, 65, 0.38);
  color: #f0c07a;
}

.wizard-tip ul,
.wizard-info ul,
.wizard-warn ul {
  padding-left: 1.1rem;
}

/* Grouped controls revealed within a step (satin adjust, fill angle, contour) */
.wizard-subpanel {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 4px;
  background: var(--gray-50);
}

/* `.help-pop` is the standalone spelling used in index.html's step cards, so
   Quick Convert / Full Editor get the same click-to-open help bubble the
   Wizard uses. Same look, same JS (see POP_SEL in wizard.js). */
.wizard-hint,
.help-pop {
  display: inline-flex;
  border: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gray-300);
  color: var(--gray-700);
  font-size: 0.6rem;
  cursor: help;
  vertical-align: text-top;
  padding: 0;
  line-height: 1;
}

/* Button variant of .wizard-hint: tap/click opens a popover with the help text
   (a plain `title` tooltip never shows on touch and can't carry formatting) */
button.wizard-infopop,
button.help-pop {
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}

/* 14px is well under a comfortable touch target — grow the hit area only */
button.wizard-infopop::after,
button.help-pop::after {
  content: "";
  position: absolute;
  inset: -9px;
}

button.wizard-infopop-i {
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
}

button.wizard-infopop:focus-visible,
button.help-pop:focus-visible {
  outline: 2px solid var(--primary, #12a05c);
  outline-offset: 1px;
}

/* Wider than Bootstrap's 276px default: these bubbles now carry the long-form
   explanations that used to sit in the panel body, and a narrow column turns
   them into a very tall ribbon. */
.wizard-popover {
  --bs-popover-max-width: 340px;
}

.wizard-popover .popover-body {
  font-size: 0.8rem;
  line-height: 1.45;
}

/* Big choice buttons (photo vs illustration, badge vs direct, etc.) */
.wizard-choices {
  display: flex;
  gap: 10px;
  margin: 6px 0 10px;
}

.wizard-choice-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 16px 10px;
  background: var(--white);
  border: 2px solid var(--gray-300);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--gray-700);
}

.wizard-choices-sm .wizard-choice-btn {
  padding: 10px 8px;
}

/* Single-option variant (e.g. the "continue" choice at max detail): keep the
   card from stretching to the full panel width. */
.wizard-choices-single .wizard-choice-btn {
  flex: 0 1 auto;
  min-width: 200px;
  margin: 0 auto;
}

.wizard-choice-btn i {
  color: #12a05c;
}

[data-bs-theme="dark"] .wizard-choice-btn i {
  color: #2ecc71;
}

.wizard-choice-btn:hover:not(:disabled) {
  border-color: #12a05c;
  box-shadow: 0 2px 10px rgba(18, 160, 92, 0.18);
  transform: translateY(-1px);
}

.wizard-choice-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wizard-choice-btn.active {
  border-color: #12a05c;
  background: rgba(18, 160, 92, 0.08);
  box-shadow: 0 2px 10px rgba(18, 160, 92, 0.18);
}

.wizard-choice-btn small {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--gray-500);
}

/* Selection status line above action buttons */
.wizard-status-line {
  font-size: 0.82rem;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

/* Reused thread-color palette (generateColorSwatchesHTML) inside the wizard */
.wizard-palette .color-swatches-container {
  margin-top: 4px;
}

/* Step-3 wizard panel wraps the image row (adopted in below the progress bar) */
#wizard-step3-panel .wizard-panel {
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Full-focus substeps (image type / de-noise): no preview alongside the
   question, so it fills the panel and can't be skipped past. The body is
   centered and given generous height so it reads as a deliberate,
   unmissable full-screen prompt rather than a small blurb under the image. */
.wizard-panel-focus {
  min-height: 60vh;
  justify-content: center;
}

.wizard-panel-focus .wizard-title {
  font-size: 1.4rem;
  text-align: center;
}

.wizard-panel-focus .wizard-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .wizard-panel-focus {
    min-height: 50vh;
  }

  .wizard-panel-focus .wizard-title {
    font-size: 1.2rem;
  }
}

/* Before/after comparison (de-noise step): two equally sized panes so the
   user can judge the result in place instead of applying it blind. Clicking
   either pane zooms both to the same point (see .zoomed below). */
.wizard-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
}

.wizard-compare-pane {
  margin: 0;
  min-width: 0;
}

.wizard-compare-pane figcaption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-600, #6c757d);
  margin-bottom: 4px;
  text-align: center;
}

.wizard-compare-img {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gray-200, #e9ecef);
  border-radius: 10px;
  height: 220px;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Override the shared .checkerboard-bg > img rule (width:100%; height:auto),
   which would letterbox differently in each pane. */
.wizard-compare-img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.15s ease;
}

.wizard-compare.zoomed .wizard-compare-img {
  cursor: zoom-out;
}

.wizard-compare.zoomed .wizard-compare-img > img {
  transform: scale(3);
  transform-origin: var(--wiz-zoom-x, 50%) var(--wiz-zoom-y, 50%);
}

.wizard-compare-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--white, #fff);
  color: var(--gray-500, #adb5bd);
  font-size: 0.82rem;
  text-align: center;
}

.wizard-compare-empty i {
  font-size: 1.4rem;
  opacity: 0.6;
}

.wizard-compare-hint {
  font-size: 0.78rem;
  color: var(--gray-500, #adb5bd);
  text-align: center;
  margin-bottom: 12px;
}

@media (max-width: 575.98px) {
  .wizard-compare {
    gap: 6px;
  }

  .wizard-compare-img {
    height: 150px;
  }
}

/* Image + preview pulled up under the progress bar, above the instructions.
   Trim the inner Bootstrap spacing so it reads as one tidy block. */
.wizard-media-slot {
  margin-bottom: 14px;
}
.wizard-media-slot > .row {
  margin-bottom: 0;
}
.wizard-media-slot .row > [class^="col"] > .mb-3,
.wizard-media-slot .row > [class*=" col"] > .mb-3 {
  margin-bottom: 0 !important;
}
.wizard-media-slot .form-label {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;
}

@media (max-width: 767px) {
  .wizard-choices {
    flex-direction: column;
  }
}

/* ---- mobile: app-like wizard ----
   Preview stays tall enough to work in but leaves the question panel
   visible right below; all tap targets are finger-sized. */

@media (max-width: 767.98px) {
  body.wizard-active #svg-preview {
    height: 42vh !important;
    height: 42svh !important;
    min-height: 260px;
  }

  /* .wizard-choices stacks these vertically on mobile (rule below).
     flex-basis must stay "auto" (content-sized) here — the base rule's
     "flex: 1 1 0" would otherwise split the column's height evenly across
     buttons using a 0 basis, clipping each to min-height regardless of
     how much text it holds. */
  .wizard-choice-btn {
    flex: 0 1 auto;
    min-height: 56px;
    padding: 12px 10px;
  }

  .wizard-nav .btn,
  #wizard-generate-btn {
    min-height: 44px;
  }

  /* "Back" must never shrink below its own content — some Next labels are
     long sentences ("Skip — keep everything as fill"), and without this a
     long sibling can squeeze Back's flex box narrower than the word
     "Back" itself, forcing it to wrap mid-word. Next is free to wrap
     across two lines instead; that reads fine for a full sentence. */
  .wizard-nav #wizard-back-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .wizard-nav #wizard-next-btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
  }

  /* The phase checklist scrolls horizontally instead of stacking into
     a tall block that pushes the actual question off-screen */
  .wizard-outline {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The scrollbar is hidden and scrollOutlineToCurrent() centres the current
       step, so both ends usually sit mid-item — with a hard edge that reads as
       a broken/clipped layout rather than "swipe for more". Fade the two ends
       so the cut is legible as one. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  .wizard-outline::-webkit-scrollbar {
    display: none;
  }

  .wizard-outline-item {
    flex: 0 0 auto;
    padding: 4px 8px;
  }

  #wizard-step3-panel .wizard-panel {
    padding: 10px 12px;
  }
}

/* No hover on touch devices — keep choice cards from sticking in a
   hovered state after a tap */
@media (hover: none) {
  .wizard-choice-btn:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
  }

  .wizard-choice-btn:active:not(:disabled) {
    border-color: #12a05c;
  }
}