/* ==========================================================================
   Identification Progress — Dark Surface Photo-Hero Layout
   Seven phases: Upload, Process, Identify, Describe, Value, Polish, Success
   ========================================================================== */

/* -------------------------------------------------------
   Page layout
------------------------------------------------------- */

.id-progress {
  background: var(--color-ink);
  display: flex;
  flex-direction: column;
  /* Break out of app-workspace__content's padding and max-width */
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
  padding-top: var(--space-4);
  /* Fill the full workspace height */
  min-height: calc(100dvh - 56px - 64px - env(safe-area-inset-bottom, 0px));
}

.id-progress__photo-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 8px;
  overflow: hidden;
}

.id-progress__photo {
  width: 90%;
  aspect-ratio: 1;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.id-progress__photo-clip {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-ink-light, #2a1f1a);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.id-progress__photo-clip:has(.id-progress__photo-img--loaded) {
  animation: none;
}

.id-progress__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.id-progress__photo-img--loaded {
  opacity: 1;
}

/* --- Blurry-to-sharp hero reveal (P28 blurry-first contract) --- */

/* Blurry underlayer — intentional softness. Source is the full lightbox
   variant (AVIF 4:4:4) shared with the sharp overlay, so the browser
   only downloads one file and we never amplify thumbnail chroma noise
   through CSS scaling + blur. Scale-up by ~8% prevents the blur from
   showing transparent halo at the clip edges. No saturate() filter —
   it amplified chroma noise on saturated edges into the colored
   speckles that read as "garbage quality". The blur alone is plenty
   to communicate "AI is analyzing". */
.id-progress__photo-img--blurry {
  filter: blur(14px);
  transform: scale(1.08);
  transform-origin: center center;
}

/* Sharp overlay slot — positioned absolutely inside .id-progress__photo-clip
   so it stacks on top of the blurry underlayer. The <img> is server-
   rendered eagerly in _sharp_hero.html.erb on every show.html.erb paint;
   identification_progress_controller's _handleSharpReady drives the
   opacity reveal (CSS .id-progress__photo-img--sharp-loaded class) when
   the img has loaded AND the timing is right. */
.id-progress__photo-sharp-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Sharp <img> inside the slot. Starts at opacity 0; transitions to 1 when
   the onload-added --sharp-loaded class lands. 800ms feels intentional
   and premium without dragging. */
.id-progress__photo-img--sharp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.id-progress__photo-img--sharp.id-progress__photo-img--sharp-loaded {
  opacity: 1;
}

.id-progress__photo-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-ink-light, #2a1f1a);
}

.id-progress__thumb-placeholder {
  background: var(--color-ink-light, #2a1f1a);
}

.id-progress__animation-layer {
  position: absolute;
  inset: 0;
}

/* -------------------------------------------------------
   Phase pill
------------------------------------------------------- */

.id-progress__pill {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 13, 8, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 15;
}

.id-progress__pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.id-progress__pill-dot--blue {
  background: var(--color-electric);
  box-shadow: 0 0 8px rgba(26, 95, 255, 0.5);
}

.id-progress__pill-dot--amber {
  background: var(--color-amber);
  box-shadow: 0 0 8px rgba(232, 150, 12, 0.5);
}

.id-progress__pill-dot--green {
  background: var(--color-mint);
  box-shadow: 0 0 8px rgba(0, 168, 107, 0.5);
}

.id-progress__pill-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ivory);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* -------------------------------------------------------
   Thumbnail strip
------------------------------------------------------- */

.id-progress__thumbs {
  display: flex;
  gap: 8px;
  padding: 0 20px 8px;
  justify-content: center;
}

.id-progress__thumb-wrap {
  position: relative;
  width: 52px;
  height: 52px;
}

.id-progress__thumb {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  object-fit: cover;
  border: 1.5px solid rgba(250, 246, 238, 0.15);
  opacity: 0.5;
}

.id-progress__thumb--active {
  border: 2px solid rgba(250, 246, 238, 0.3);
  opacity: 1;
}

/* Thumb status indicators — matching Session 5A patterns */

.id-progress__thumb-status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.id-progress__thumb-status--uploading {
  border: 2px solid rgba(26, 93, 255, 0.2);
  border-top-color: var(--color-electric);
  animation: id-progress-spin 0.8s linear infinite;
  background: rgba(26, 13, 8, 0.4);
}

.id-progress__thumb-status--uploaded {
  background: var(--color-mint);
}

.id-progress__thumb-status--uploaded svg {
  width: 10px;
  height: 10px;
  stroke: var(--color-ivory);
}

.id-progress__thumb-status--failed {
  background: var(--color-red);
}

.id-progress__thumb-status--failed svg {
  width: 10px;
  height: 10px;
  stroke: var(--color-ivory);
}

@keyframes id-progress-spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------
   Progress strip — 7 segments
------------------------------------------------------- */

.id-progress__strip {
  padding: 4px 20px 20px;
  display: flex;
  gap: 3px;
}

.id-progress__segment {
  flex: 1;
  height: 3px;
  border-radius: 2px;
}

.id-progress__segment--done {
  background: var(--color-mint);
}

.id-progress__segment--active-blue {
  background: var(--color-electric);
}

.id-progress__segment--active-amber {
  background: var(--color-amber);
}

.id-progress__segment--pending {
  background: rgba(250, 246, 238, 0.1);
}

/* -------------------------------------------------------
   Phase 2 — Processing (scan line + grid)
------------------------------------------------------- */

.id-progress__scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 95, 255, 0.8) 50%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(26, 95, 255, 0.25);
  opacity: 0;
  animation: id-scan 2.8s ease-in-out infinite;
}

.id-progress__scan-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(26, 95, 255, 0.03) 0px,
      rgba(26, 95, 255, 0.03) 1px,
      transparent 1px,
      transparent 18px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(26, 95, 255, 0.03) 0px,
      rgba(26, 95, 255, 0.03) 1px,
      transparent 1px,
      transparent 18px
    );
  opacity: 0;
  animation: id-grid-fade 2.8s ease-in-out infinite;
}

@keyframes id-scan {
  0%   { top: 3%;  opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 95%; opacity: 0; }
}

@keyframes id-grid-fade {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* -------------------------------------------------------
   Phase 3 — Identifying (magnifier CSS)
   Movement is JS-driven via magnifier_controller
------------------------------------------------------- */

.id-progress__magnifier-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.id-progress__magnifier {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  z-index: 10;
  will-change: transform;
}

.id-progress__mag-lens {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  /* Lens positioned to match SVG outer circle at cx=25, cy=25, r=19 */
  /* For a 100px magnifier (100 * 6/64 = 9.375 offset, 100 * 38/64 = 59.375 diameter) */
  left: 9.375%;
  top: 9.375%;
  width: 59.375%;
  height: 59.375%;
}

.id-progress__mag-photo {
  position: absolute;
  width: 300%;
  height: 300%;
  object-fit: cover;
  filter: brightness(1.18) contrast(1.12);
  will-change: transform;
}

/* Converging scan lines — horizontal pair */
.id-progress__mag-scan-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(26, 95, 255, 0.7),
    transparent
  );
  box-shadow: 0 0 6px rgba(26, 95, 255, 0.4);
  opacity: 0;
}

.id-progress__mag-scan-h--top {
  animation: id-mag-converge-h1 1.6s ease-in-out infinite;
}

.id-progress__mag-scan-h--bottom {
  animation: id-mag-converge-h2 1.6s ease-in-out infinite;
}

/* Converging scan lines — vertical pair */
.id-progress__mag-scan-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(26, 95, 255, 0.7),
    transparent
  );
  box-shadow: 0 0 6px rgba(26, 95, 255, 0.4);
  opacity: 0;
}

.id-progress__mag-scan-v--left {
  animation: id-mag-converge-v1 1.6s ease-in-out infinite;
}

.id-progress__mag-scan-v--right {
  animation: id-mag-converge-v2 1.6s ease-in-out infinite;
}

.id-progress__mag-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 12px rgba(26, 95, 255, 0.2));
}

/* Flash removed — SVG's blue dot (r=3.5) is the single center dot */

.id-progress__mag-glow {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(26, 95, 255, 0.1) 0%,
    transparent 70%
  );
  animation: id-mag-glow 1.6s ease-in-out infinite;
}

/* Horizontal converge: top edge to center, bottom edge to center */
@keyframes id-mag-converge-h1 {
  0%   { top: 0%;  opacity: 0; }
  10%  { opacity: 1; }
  45%  { top: 50%; opacity: 1; }
  55%  { top: 50%; opacity: 0; }
  100% { top: 50%; opacity: 0; }
}

@keyframes id-mag-converge-h2 {
  0%   { top: 100%; opacity: 0; }
  10%  { opacity: 1; }
  45%  { top: 50%;  opacity: 1; }
  55%  { top: 50%;  opacity: 0; }
  100% { top: 50%;  opacity: 0; }
}

/* Vertical converge: left edge to center, right edge to center */
@keyframes id-mag-converge-v1 {
  0%   { left: 0%;  opacity: 0; }
  10%  { opacity: 1; }
  45%  { left: 50%; opacity: 1; }
  55%  { left: 50%; opacity: 0; }
  100% { left: 50%; opacity: 0; }
}

@keyframes id-mag-converge-v2 {
  0%   { left: 100%; opacity: 0; }
  10%  { opacity: 1; }
  45%  { left: 50%;  opacity: 1; }
  55%  { left: 50%;  opacity: 0; }
  100% { left: 50%;  opacity: 0; }
}

@keyframes id-mag-flash {
  0%   { opacity: 0; box-shadow: 0 0 0 rgba(26, 95, 255, 0); }
  40%  { opacity: 0; }
  45%  { opacity: 1; box-shadow: 0 0 16px rgba(26, 95, 255, 0.6); }
  55%  { opacity: 1; box-shadow: 0 0 8px rgba(26, 95, 255, 0.3); }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes id-mag-glow {
  0%   { opacity: 0.3; transform: scale(0.95); }
  50%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0.3; transform: scale(0.95); }
}

/* -------------------------------------------------------
   Phase 4 — Describing (amber glow + border)
------------------------------------------------------- */

/* Phase 4 — Describing: blue shimmer sweep */
.id-progress__amber-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(26, 95, 255, 0.15) 40%,
    rgba(26, 95, 255, 0.4) 50%,
    rgba(26, 95, 255, 0.15) 60%,
    transparent 70%
  );
  animation: id-shimmer 2.0s ease-in-out infinite;
}

/* Amber border still used for phase 4 — keep as subtle accent */
.id-progress__amber-border {
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  border: 2px solid transparent;
  pointer-events: none;
  animation: id-amber-border 2s ease-in-out infinite;
}

@keyframes id-amber-border {
  0%, 100% {
    border-color: transparent;
    box-shadow: 0 0 0 rgba(232, 150, 12, 0);
  }
  50% {
    border-color: rgba(232, 150, 12, 0.35);
    box-shadow: 0 0 16px rgba(232, 150, 12, 0.12);
  }
}

/* -------------------------------------------------------
   Phase 5 — Valuing: green shimmer sweep
------------------------------------------------------- */

.id-progress__photo--valuing {
  /* No box-shadow animation — the shimmer is the animation */
}

.id-progress__warm-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(0, 168, 107, 0.15) 40%,
    rgba(0, 168, 107, 0.4) 50%,
    rgba(0, 168, 107, 0.15) 60%,
    transparent 70%
  );
  animation: id-shimmer 2.0s ease-in-out infinite;
}

/* -------------------------------------------------------
   Phase 6 — Polishing (diagonal shimmer)
------------------------------------------------------- */

.id-progress__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(232, 150, 12, 0.18) 40%,
    rgba(232, 150, 12, 0.45) 50%,
    rgba(232, 150, 12, 0.18) 60%,
    transparent 70%
  );
  animation: id-shimmer 2.0s ease-in-out infinite;
}

/* Retained warm glow from phase 5 on the photo during polishing */
.id-progress__photo--polishing {
  box-shadow: 0 0 24px rgba(232, 150, 12, 0.18), 0 8px 32px rgba(0, 0, 0, 0.4);
}

@keyframes id-shimmer {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

/* Duration: 2.0s per pass — one pass for Describing/Valuing (2s), two for Polishing (4s) */

/* -------------------------------------------------------
   Phase 7 — Success
------------------------------------------------------- */

.id-progress__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  text-align: center;
  flex: 1;
}

/* Applied to the existing photo div by the progress controller on phase 7 */
.id-progress__photo--success {
  animation: id-success-settle 2.5s var(--ease-out, ease-out) forwards;
}

/* Legacy class kept for direct-render celebration (page load on completed item) */
.id-progress__success-photo {
  width: 90%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(232, 150, 12, 0.28),
    0 0 80px rgba(232, 150, 12, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.4);
  animation: id-success-settle 2.5s var(--ease-out, ease-out) forwards;
}

.id-progress__success-photo .id-progress__photo-img {
  border-radius: 8px;
}

.id-progress__success-info {
  text-align: center;
  padding: 0 16px;
}

.id-progress__success-title {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 18px;
  color: var(--color-ivory);
  font-weight: 700;
  margin: 4px 0 4px;
}

.id-progress__success-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(250, 246, 238, 0.5);
  margin: 0 0 16px;
}

.id-progress__success-redirect {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(250, 246, 238, 0.3);
  margin: 12px 0 0;
  padding: 0 16px;
  text-align: center;
}

@keyframes id-success-settle {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.0); }
}

/* -------------------------------------------------------
   Failure state
------------------------------------------------------- */

/* Container fills the shell and centers the failure block vertically.
   The block itself is a constrained-width column with generous breathing
   room, scaled for mobile-first. */
.id-progress--failure {
  justify-content: center;
}

.id-progress__failure {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-8);
  gap: var(--space-6);
}

.id-progress__failure-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
  width: 72px;
  height: 72px;
  color: var(--color-ivory);
  opacity: 0.85;
}

.id-progress__failure-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.id-progress__failure-title {
  font-family: var(--font-accent); /* Fraunces */
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ivory);
  margin: 0;
}

.id-progress__failure-description {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(250, 246, 238, 0.7);
  margin: calc(-1 * var(--space-3)) 0 0;
  max-width: 320px;
  align-self: center;
}

.id-progress__failure-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

/* button_to wraps a <form> around the <button>. Strip any default form
   margin and let it span the full button width. */
.id-progress__failure-actions form {
  margin: 0;
  width: 100%;
  display: block;
}

/* Primary CTA — block-level, full-width, generous tap target. */
.id-progress__failure-btn--retry,
.id-progress__failure-btn--retry:visited {
  display: block;
  width: 100%;
  background: var(--color-red);
  color: var(--color-ivory);
  border: none;
  padding: var(--space-4) var(--space-6);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.id-progress__failure-btn--retry:hover,
.id-progress__failure-btn--retry:active {
  background: var(--color-red-2);
}

/* Secondary action — ghost button, ivory-bordered for contrast on dark. */
.id-progress__failure-btn--secondary {
  display: block;
  width: 100%;
  background: transparent;
  color: rgba(250, 246, 238, 0.65);
  border: 1px solid rgba(250, 246, 238, 0.18);
  padding: var(--space-4) var(--space-6);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.id-progress__failure-btn--secondary:hover {
  border-color: rgba(250, 246, 238, 0.4);
  color: var(--color-ivory);
}

/* Countdown state — primary button is disabled and showing remaining
   seconds. Faded so the user understands they're waiting; no hover swap. */
.id-progress__failure-btn--counting,
.id-progress__failure-btn--counting:hover,
.id-progress__failure-btn--counting button,
.id-progress__failure-btn--counting input[type="submit"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--color-red);
}

.id-progress__failure-support {
  margin: 0;
  text-align: center;
}

.id-progress__failure-support-link {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(250, 246, 238, 0.45);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 246, 238, 0.18);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.id-progress__failure-support-link:hover {
  color: var(--color-ivory);
  border-bottom-color: var(--color-ivory);
}

/* -------------------------------------------------------
   Mute toggle button — fixed bottom-right
------------------------------------------------------- */

.id-progress__mute-btn {
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
  right: 16px;
  z-index: 15;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(26, 13, 8, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  color: var(--color-ivory);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
}

.id-progress__mute-btn:hover {
  background: rgba(26, 13, 8, 0.65);
}

/* Show unmuted icon by default, hide muted icon */
.id-progress__mute-icon--off { display: none; }

/* When muted: hide unmuted icon, show muted icon */
.id-progress__mute-btn--muted .id-progress__mute-icon { display: none; }
.id-progress__mute-btn--muted .id-progress__mute-icon--off { display: block; }

/* -------------------------------------------------------
   Reduced motion — disable all animations, hide magnifier
------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .id-progress__scan-line,
  .id-progress__scan-grid,
  .id-progress__amber-glow,
  .id-progress__amber-border,
  .id-progress__warm-tint,
  .id-progress__shimmer,
  .id-progress__mag-scan-h,
  .id-progress__mag-scan-v,
  .id-progress__mag-flash,
  .id-progress__mag-glow {
    animation: none;
  }

  .id-progress__photo--valuing {
    animation: none;
  }

  .id-progress__success-photo {
    animation: none;
    transform: scale(1);
  }

  .id-progress__thumb-status--uploading {
    animation: none;
    border-top-color: var(--color-electric);
  }

  .id-progress__magnifier-track {
    display: none;
  }
}

/* ────────────────────────────────────────────────────────────────────
   Two-tier failure: <details> technical disclosure
   Friendly title/message stays warm; expert diagnostics are tucked
   under a native <details> element. No Stimulus controller needed.
   ──────────────────────────────────────────────────────────────────── */

.id-progress__failure-details {
  margin-top: var(--space-2);
  border-top: 1px solid rgba(250, 246, 238, 0.10);
  padding-top: var(--space-4);
  text-align: left;
  width: 100%;
}

.id-progress__failure-details-summary {
  cursor: pointer;
  font-size: 12px;
  color: rgba(250, 246, 238, 0.4);
  user-select: none;
  list-style: none;
  text-align: center;
  letter-spacing: 0.04em;
}

.id-progress__failure-details-summary::-webkit-details-marker { display: none; }

.id-progress__failure-details-summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 150ms;
}

.id-progress__failure-details[open] .id-progress__failure-details-summary::before {
  transform: rotate(90deg);
}

.id-progress__failure-details-body {
  margin-top: var(--space-3);
  font-size: 12px;
  color: rgba(250, 246, 238, 0.5);
}

.id-progress__failure-details-body dt {
  font-weight: 600;
  margin-top: var(--space-2);
  color: rgba(250, 246, 238, 0.7);
}

.id-progress__failure-details-body dd { margin-left: 0; }

.id-progress__failure-violations {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
}

.id-progress__failure-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-micro);
  word-break: break-word;
}