/* ===========================
   Restoration — UI
   Stage 1 + 2 + 3 + 4
   =========================== */

/* Layout: page wrapper */
.m1-wrapper {
  display: grid;
  gap: 24px;
}

/* Card */
.m1-preview-card {
  background: var(--rv-card);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
  padding: 14px;
}

/* Preview box */
.m1-preview-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 480px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--rv-border);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}

/* Placeholder */
.m1-placeholder {
  display: grid;
  place-items: center;
  gap: 12px;
  max-width: 520px;
  text-align: center;
  color: var(--rv-muted);
}

/* Drop area */
.m1-drop-area {
  font-size: 1.6rem;
  padding: 32px 40px;
  width: 70%;
  max-width: 500px;
  margin: 0 auto;
  border: 1px dashed var(--rv-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.m1-drop-area.dragover {
  border-color: var(--rv-primary);
  background: rgba(124, 77, 255, 0.10);
  color: var(--rv-primary);
}

.m1-drop-area:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--rv-primary), white 10%);
  outline-offset: 3px;
}

/* Browse behaves like button */
.m1-browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  margin-left: 6px;
  border: 1px solid var(--rv-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--rv-text);
  cursor: pointer;
  text-decoration: none;
}

@media (hover:hover) {
  .m1-browse:hover {
    background: rgba(255, 255, 255, .06);
  }
}

.m1-browse:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--rv-primary), white 10%);
  outline-offset: 2px;
}

/* Supported formats note */
.m1-note {
  color: color-mix(in oklab, var(--rv-muted), white 15%);
  font-size: .95rem;
}

/* Preview image */
.m1-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--rv-bg-soft);
  display: none;
}

/* Loader overlay */
.m1-loader {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--rv-text);
  font-size: 1rem;
  font-weight: 600;
  z-index: 10;
}

.m1-loader .spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid var(--rv-primary);
  border-radius: 50%;
  animation: m1spin 1s linear infinite;
}

@keyframes m1spin {
  to {
    transform: rotate(360deg);
  }
}

.m1-preview-box.is-loading .m1-loader {
  display: flex;
}

.m1-preview-box.is-loading .m1-placeholder,
.m1-preview-box.is-loading .m1-preview-img {
  opacity: .35;
}

/* Controls row */
.m1-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

/* Buttons (scoped) */
.m1-wrapper .rv-btn {
  --btn-bg: #22252e;
  --btn-fg: var(--rv-text);
  --btn-bd: var(--rv-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  line-height: 1;
  user-select: none;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, opacity .15s ease, filter .15s ease;
}

.m1-wrapper .rv-btn:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--rv-primary), white 10%);
  outline-offset: 2px;
}

.m1-wrapper .rv-btn:active {
  transform: translateY(1px);
}

.m1-wrapper .rv-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.m1-wrapper .rv-btn--primary {
  --btn-bg: linear-gradient(135deg, var(--rv-primary), var(--rv-primary-2));
  --btn-bd: color-mix(in oklab, var(--rv-primary), black 35%);
  color: #0c0f14;
}

@media (hover:hover) {
  .m1-wrapper .rv-btn--primary:hover {
    filter: brightness(1.05);
  }
}

.m1-wrapper .rv-btn--secondary {
  --btn-bg: #1b1e26;
  --btn-bd: var(--rv-border);
}

@media (hover:hover) {
  .m1-wrapper .rv-btn--secondary:hover {
    background: #202430;
  }
}

.m1-wrapper .rv-btn--ghost {
  --btn-bg: transparent;
  --btn-bd: var(--rv-border);
  color: var(--rv-muted);
}

@media (hover:hover) {
  .m1-wrapper .rv-btn--ghost:hover {
    background: rgba(255, 255, 255, .04);
    color: var(--rv-text);
  }
}

/* Banner wrapper */
.m1-banner-wrap {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

/* Banner base */
.m1-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rv-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  box-shadow: var(--rv-shadow);
  font-weight: 600;
}

.m1-banner__msg {
  color: var(--rv-text);
}

.m1-banner__close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rv-border);
  border-radius: 8px;
  padding: 4px 8px;
  color: var(--rv-muted);
  cursor: pointer;
}

/* Variants */
.m1-banner--success {
  border-color: color-mix(in oklab, #16a34a, black 40%);
  background: color-mix(in oklab, #16a34a, transparent 88%);
}

.m1-banner--error {
  border-color: color-mix(in oklab, #ef4444, black 40%);
  background: color-mix(in oklab, #ef4444, transparent 88%);
}

.m1-banner--info {
  border-color: color-mix(in oklab, #3fa3ff, black 40%);
  background: color-mix(in oklab, #3fa3ff, transparent 88%);
}

/* Inline validation help */
.m1-help {
  margin-top: 6px;
  font-size: .9rem;
  color: #fca5a5;
}

/* Invalid drop area */
.m1-drop-area.is-invalid {
  border-color: #ef4444;
  background: color-mix(in oklab, #ef4444, transparent 90%);
  color: #fca5a5;
}

/* Results section */
.m1-results-title {
  text-align: center;
  margin-top: 48px;
  margin-bottom: 12px;
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
}

.m1-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
  justify-items: center;
}

.m1-results-grid:empty {
  display: none;
}

.m1-results-title:has(+ .m1-results-grid:empty) {
  display: none;
}

.m1-card {
  background: var(--rv-card);
  border: 1px solid var(--rv-border);
  border-radius: 12px;
  box-shadow: var(--rv-shadow);
  overflow: hidden;
  padding: 10px;
  width: 100%;
  max-width: 520px;
}

/* Compare block */
.m1-compare {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--rv-border);
  background: #000;
}

.m1-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.m1-compare .m1-after {
  clip-path: inset(0 0 0 var(--cut, 50%));
}

/* Slider */
.m1-slider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  width: 60%;
  margin: 0 auto;
  appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, .25);
  border-radius: 999px;
  outline: none;
}

.m1-slider:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rv-primary), white 10%);
}

.m1-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rv-primary), var(--rv-primary-2));
  border: 2px solid rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.m1-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rv-primary), var(--rv-primary-2));
  border: 2px solid rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.m1-slider::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, .25);
  border-radius: 999px;
}

/* ===== Stage 4: How-to + FAQ ===== */

/* How-to: 2-col → 1-col grid */
.rv-howto.rv-howto--row {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  /* media | text */
  gap: 24px;
  align-items: start;
  padding: 24px 0;
}

.rv-howto__media,
.rv-howto__text {
  min-width: 0;
}

/* Illustration/video box */
.rv-video-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Steps rhythm */
.rv-steps {
  margin: 12px 0 0 0;
  padding-left: 18px;
  /* keep ordered list markers aligned */
  line-height: 1.6;
}

.rv-steps li {
  margin-bottom: 6px;
}

/* Note below steps */
.rv-note {
  margin-top: 10px;
  color: color-mix(in oklab, var(--rv-muted), white 12%);
}

/* FAQ container */
.rv-faq {
  margin-top: 40px;
  display: grid;
  gap: 10px;
}

/* FAQ item card */
.rv-faq__item {
  border: 1px solid var(--rv-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}

/* FAQ summary row: custom arrow + focus */
.rv-faq__item>summary {
  list-style: none;
  /* hide default marker */
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* icon | text | spacer */
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 700;
}

.rv-faq__item>summary::-webkit-details-marker {
  display: none;
}

.rv-faq__item>summary::before {
  content: "▸";
  display: inline-block;
  transform-origin: center;
  transition: transform .15s ease;
  opacity: .9;
}

.rv-faq__item[open]>summary::before {
  transform: rotate(90deg);
}

.rv-faq__item>summary:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--rv-primary), white 10%);
  outline-offset: 2px;
  border-radius: 10px;
}

/* FAQ answer body */
.rv-faq__item>p {
  margin: 0;
  padding: 0 14px 14px 34px;
  /* indent under arrow */
  line-height: 1.6;
  color: color-mix(in oklab, var(--rv-text), white 5%);
}

/* Responsive: stack how-to on mobile */
@media (max-width: 768px) {
  .rv-howto.rv-howto--row {
    grid-template-columns: 1fr;
  }

  .rv-video-box {
    aspect-ratio: 16 / 10;
  }
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .m1-preview-box {
    min-height: 400px;
  }

  .m1-controls .rv-btn {
    width: 100%;
  }

  .m1-drop-area {
    font-size: 1rem;
    padding: 20px;
  }
}

/* ===== Stage 5: Accessibility & UX ===== */

/* Global focus ring inside this page */
.m1-wrapper :where(a, button, [role="button"], input, select, textarea, summary, details, .rv-btn, .m1-browse, .m1-drop-area, .m1-slider):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--rv-primary), white 10%);
  outline-offset: 2px;
  border-radius: 10px;
  /* safe default */
}

/* Ensure main can receive focus when jumped via skip link */
/* REMOVED: generic outline on mouse click to avoid full-page border */
/*
#m1-main:focus {
  outline: 3px solid color-mix(in oklab, var(--rv-primary), white 10%);
  outline-offset: 4px;
  border-radius: 12px;
}
*/
#m1-main:focus {
  outline: none;
}

/* CHANGED: no outline on generic :focus */
#m1-main:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--rv-primary), white 10%);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Skip link: hidden until focused */
.rv-skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 8px 12px;
  background: #11141a;
  color: var(--rv-text);
  border: 1px solid var(--rv-border);
  border-radius: 10px;
  box-shadow: var(--rv-shadow);
  z-index: 1000;
  transform: translateY(-150%);
  transition: transform .15s ease;
}

/* REPLACED: :focus -> :focus-visible to avoid mouse-triggered reveal */
/*
.rv-skip-link:focus { transform: translateY(0); }
*/
.rv-skip-link:focus-visible {
  transform: translateY(0);
}

/* Headings rhythm + anchor offset for fixed headers */
.m1-wrapper .rv-sec-title {
  margin-top: clamp(12px, 2vh, 24px);
  margin-bottom: 12px;
  scroll-margin-top: 80px;
  /* when navigated via link */
}

/* Specific anchors */
#results-title,
#howto-title,
#faq-title {
  scroll-margin-top: 80px;
}

/* ===== Stage 6: Optional UX ===== */

/* Lazy-friendly rendering */
.m1-card img[loading="lazy"] {
  content-visibility: auto;
  /* modern browsers */
  contain-intrinsic-size: 400px 400px;
  /* reserve space to avoid CLS */
}

/* Disabled download visuals */
.m1-wrapper .rv-btn[aria-disabled="true"] {
  pointer-events: none;
  /* anchors don't honor disabled */
  opacity: .55;
  filter: saturate(.6);
}

/* Visual differentiation: Enhance vs Retry */
.m1-wrapper .rv-btn--enhance {
  /* subtle glow hinting “improve” */
  box-shadow: 0 0 0 0 rgba(124, 77, 255, 0);
}

@media (hover:hover) {
  .m1-wrapper .rv-btn--enhance:hover {
    box-shadow: 0 0 12px 0 color-mix(in oklab, var(--rv-primary), transparent 70%);
  }
}

.m1-wrapper .rv-btn--retry {
  /* neutral-orange accent for “retry” */
  --btn-bg: #1c1f27;
  --btn-bd: color-mix(in oklab, #f59e0b, black 70%);
}

@media (hover:hover) {
  .m1-wrapper .rv-btn--retry:hover {
    border-color: color-mix(in oklab, #f59e0b, black 55%);
    background: #202430;
  }
}