/**
 * Guided bottle-by-bottle move wizard (docs/plans/guided-move-wizard.md,
 * Phase 4). Reuses the base `.modal`/`.modal-overlay` shell (modals.css) —
 * only the wizard's own content density is defined here, matching the
 * established pattern (`reorg-state-surfaces.css`, tidyUpModal.js's bare
 * reliance on the base shell). CSS custom properties for spacing/colour;
 * no new colour tokens needed — every colour reference below is an
 * existing theme-aware `var(--...)`, so light/dark parity is inherited
 * rather than redeclared.
 */

.guided-move-wizard-modal {
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.guided-move-wizard-modal--compact {
  max-width: 480px;
}

.guided-wizard-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-md, 1rem) 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
}

.guided-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md, 0.75rem);
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

/* Step/confirming footer: the two secondary links sit left, the primary
 * "Mark as moved" sits alone on the right — in the sticky footer rather
 * than the scrollable body, so it is reachable at every viewport height
 * (docs/plans/guided-move-rack-side-and-slot-peek.md D1). The two wrapper
 * classes are additive; the drift footer and guidedTransitHoldResolver.js's
 * reuse of `.guided-wizard-footer` render exactly as before. */
.guided-wizard-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem) var(--space-md, 0.75rem);
  margin-right: auto;
}

/* Compact secondary links so both fit one row beside the primary at the
 * 640px modal width (measured 2026-09-20: 188px each at the canonical
 * size wrapped into a stack); still ≥44px tall. */
.guided-wizard-footer__links .btn-link {
  font-size: var(--btn-font-sm, 0.8125rem);
  padding: 0.5rem 0.6rem;
  min-height: 44px;
  white-space: nowrap;
}

.guided-wizard-footer__primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  /* Links stack above a full-width primary — the thumb target stays
   * ≥44px and never shares a row with two small text links. */
  .guided-wizard-footer:has(.guided-wizard-footer__primary) {
    flex-wrap: wrap;
  }

  .guided-wizard-footer__links {
    width: 100%;
    justify-content: space-between;
    margin-right: 0;
  }

  .guided-wizard-footer__primary,
  .guided-wizard-footer__primary .guided-mark-moved-btn {
    width: 100%;
  }
}

/* The aria-live announcer is visually hidden but present for screen
 * readers — never removed from the DOM, only its text changes. */
.guided-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.guided-step-progress {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-fg-muted, #6b7280);
}

/* Unsourced-target notice (docs/plans/guided-move-unsourced-notice.md):
 * planned bottles the server could not find, so no step was emitted. Info,
 * not warning — nothing is asked of the user; the drift screen owns the
 * warning pair. Opaque status token PAIR (surface + ink), per AGENTS.md. */
.guided-unsourced-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm, 0.5rem);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm, 0.35rem);
  background: var(--color-info-bg);
  color: var(--color-info-ink);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
}

.guided-unsourced-notice__icon {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.1em;
}

.guided-unsourced-notice__body {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* "Show which bottles" (docs/plans/guided-move-unsourced-slots-list.md):
 * inherits the notice's info ink so the pair stays intact. */
.guided-unsourced-details {
  margin-top: 0.3rem;
}

.guided-unsourced-details > summary {
  cursor: pointer;
  text-decoration: underline;
}

.guided-unsourced-details ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}

.guided-complete-screen .guided-unsourced-notice {
  margin: 0.75rem auto 0;
  max-width: 28rem;
}

.guided-step-active {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-md, 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
  background: var(--bg-card);
}

/* The rack-side anchor: "From R4C6 → To R2C3" as the step's <h3>. The slot
 * codes are the largest type on the screen (--font-guided-anchor, rem so
 * the text-size preference scales it); the label words sit small above
 * each code so the pair reads as one group at arm's length
 * (docs/plans/guided-move-rack-side-and-slot-peek.md D2). Overrides the
 * global h1-h4 decorative serif (layout.css) — a coordinate is data, not a
 * title, and the body sans-serif reads faster for it. */
.guided-step-active h3.guided-step-anchor {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.5rem) var(--space-md, 0.75rem);
  /* The heading's own size is the standard h3 token (designTokenAdoption
   * contract); the coordinate VALUES below carry the larger anchor token. */
  font-size: var(--font-h3, 1.25rem);
  line-height: 1.2;
  font-weight: 700;
}

.guided-step-anchor__side {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.guided-step-anchor__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-muted, #6b7280);
}

/* A label with no code beneath it ("Set aside") is the whole side — give
 * it the anchor's weight so it doesn't read as a stray caption. */
.guided-step-anchor__side > .guided-step-anchor__label:only-child {
  font-size: var(--font-h3, 1.25rem);
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
  line-height: 1.2;
}

.guided-step-anchor__value {
  font-size: var(--font-guided-anchor, 1.75rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.guided-step-anchor__arrow {
  align-self: flex-end;
  color: var(--color-fg-muted, #6b7280);
  font-weight: 400;
}

/* Identity: verb + FULL name + vintage. Wraps freely — never clamped,
 * never ellipsised; a 66-char name is the case this exists for. */
.guided-step-identity {
  margin: 0;
  font-size: var(--font-h4, 1.0625rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.guided-step-identity__verb {
  color: var(--color-fg-muted, #6b7280);
}

.guided-step-identity__name {
  font-weight: 600;
}

.guided-step-body {
  margin: 0;
  color: var(--color-fg-muted, #6b7280);
}

/* Clear affordance + Fitts's Law (#8, #16) — one large primary action per
 * step. 44px minimum both dimensions on every viewport (mobile touch
 * target, UX principle #25) — not just under the mobile media query,
 * since a desktop trackpad/touchscreen hybrid device benefits equally and
 * the rule cited in the plan draws no viewport exception. */
.guided-mark-moved-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 1.25rem;
  font-size: 1rem;
}

.guided-mark-moved-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Undo — a smaller, separate control next to the just-completed step, not
 * competing with the primary "Mark as moved" touch target. */
.guided-undo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 0.5rem);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm, 0.35rem);
  background: var(--surface-subtle, #f9fafb);
  font-size: 0.88rem;
}

.guided-undo-summary {
  color: var(--color-fg-muted, #6b7280);
}

.guided-undo-btn {
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
}

/* Muted, not alarming — a confirm dialog already gates the destructive
   step; this button just needs to read as secondary to "Close". */
.guided-abandon-btn {
  color: var(--color-fg-muted, #6b7280);
}

.guided-step-list {
  margin-top: var(--space-sm, 0.5rem);
}

.guided-step-list > summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-fg-muted, #6b7280);
}

.guided-step-list-items {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.guided-step-list-item--completed,
.guided-step-list-item--auto_skipped {
  color: var(--color-fg-muted, #6b7280);
  text-decoration: line-through;
}

.guided-step-list-item--superseded {
  color: var(--color-fg-muted, #6b7280);
  font-style: italic;
}

/* Drift-reconciliation screen — error prevention & recovery (#12): states
 * the mismatch plainly, offers explicit paths, never auto-continues. */
.guided-drift-screen {
  border: 1px solid var(--color-warning-border, #f0c36d);
  border-left-width: 3px;
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-md, 1rem);
  background: var(--color-warning-bg, #fef9ee);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
}

.guided-drift-screen h3 {
  margin: 0;
  /* Same reasoning as .guided-step-active h3 above — a long dynamic
   * instruction, not a short fixed title. */
  font-family: 'DM Sans', sans-serif;
}

.guided-drift-subpanel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
  padding-top: var(--space-sm, 0.5rem);
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.guided-complete-screen,
.guided-error-screen {
  text-align: center;
  padding: 2rem 1rem;
}

.guided-complete-screen h3 {
  margin: 0 0 0.4rem;
  color: var(--color-ok, rgb(22, 101, 52));
}

.guided-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 0.5rem);
  padding: 2.5rem 1rem;
}

@media (max-width: 560px) {
  .guided-step-active {
    padding: var(--space-sm, 0.75rem);
  }
}