/* The homepage's Edit pass section (#edit-pass): the write page (the .pm kit,
 * /home-page.css, Sepia) with a paragraph just Expanded; the edit pass runs
 * over it — violet, the app's edit-pass colour, its progress line naming each
 * check in turn — and each slip it finds is struck and fixed in place, while
 * that catch lights up beside the page. /home-editpass.js plays it. */
.ex { position: relative; padding: 100px 0 90px; overflow: hidden; isolation: isolate; }
.ex-ground {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(800px 480px at 30% 55%, rgba(139, 92, 246, 0.18), transparent 70%),
    radial-gradient(600px 400px at 85% 40%, rgba(232, 121, 249, 0.1), transparent 70%),
    linear-gradient(180deg, transparent, rgba(24, 17, 36, 0.65) 30%, rgba(24, 17, 36, 0.65) 70%, transparent);
}
.ex-head { text-align: center; margin: 0 auto 44px; max-width: 760px; }
.ex-head h2 { font-size: calc(clamp(30px, 4.4vw, 52px) / var(--tz, 1)); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.ex-head h2 em { display: block; background: linear-gradient(100deg, #e9e2ff, #c4b5fd 35%, #e879f9 75%, #f0a3e8); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hx-shine 8s ease-in-out infinite; }
.ex-head p { margin-inline: auto; max-width: 58ch; }
.ex-kicker { justify-content: center; color: var(--spark-text); }
.ex-kicker i { background: var(--spark) !important; box-shadow: 0 0 12px var(--spark) !important; }

.ex-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1040px; margin: 0 auto; user-select: none; }
.ex-stage .pm { min-height: 380px; }

/* The edit pass's progress line: the kit's box, violet. */
.ex .pm-box.is-edit { color: var(--spark-text); }
.ex .pm-box.is-edit .pm-spin { border-top-color: #8b5cf6; }
.ex .pm-para.is-editing .pm-text::before {
  background: #8b5cf6;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
  animation: pm-breathe 1.8s ease-in-out infinite;
}
.ex .pm-para.is-clean .pm-text::before { background: #4f9a63; box-shadow: 0 0 8px rgba(79, 154, 99, 0.5); }
.ex-done { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; }
.ex-done svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* A sentence of the paragraph: read (a soft violet sweep), caught (washed),
   struck, then what replaces it. */
.ex-s { border-radius: 3px; transition: background 0.35s, color 0.35s, box-shadow 0.35s; }
.ex-s.is-read { background: rgba(139, 92, 246, 0.10); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.10); }
.ex-s.is-caught { background: rgba(139, 92, 246, 0.18); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.18); }
.ex-old { position: relative; }
.ex-old.is-struck { color: var(--fg-4); text-decoration: line-through; text-decoration-color: #7c3aed; text-decoration-thickness: 2px; }
.ex-old.is-gone { display: none; }
.ex-fix { color: #6a3fc4; background: rgba(139, 92, 246, 0.14); border-radius: 3px; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.14); transition: background 1.4s, box-shadow 1.4s, color 1.4s; }
.ex-fix.settled { color: inherit; background: transparent; box-shadow: 0 0 0 2px transparent; }
/* A label over the caught sentence: what the check found. */
.ex-tag {
  position: absolute; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 7px; border-radius: 999px;
  font-family: var(--font-ui); font-size: calc(11.5px / var(--tz, 1)); font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #8b5cf6, #c026d3);
  box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.8);
  opacity: 0; transform: translateY(4px) scale(0.9);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(.2, .9, .3, 1.2);
  pointer-events: none;
}
.ex-tag.on { opacity: 1; transform: none; }
.ex-tag svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The four catches beside the page. */
.ex-catches { display: grid; gap: 10px; }
.ex-catch {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 18px;
  background: rgba(30, 24, 42, 0.7);
  border: 1px solid rgba(167, 139, 250, 0.14);
  transition: all 0.45s var(--ka-ease);
}
.ex-catch b { display: block; font-size: calc(14.5px / var(--tz, 1)); color: var(--fg); }
.ex-catch small { display: block; margin-top: 2px; font-size: calc(12.5px / var(--tz, 1)); line-height: 1.45; color: var(--fg-2); }
.ex-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--spark-text); background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(167, 139, 250, 0.25); transition: all 0.45s var(--ka-ease); }
.ex-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ex-catch.on { transform: translateX(-6px); border-color: rgba(192, 132, 252, 0.6); background: rgba(48, 33, 72, 0.85); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14), 0 18px 40px -20px rgba(139, 92, 246, 0.9); }
.ex-catch.on .ex-ico { color: #fff; background: linear-gradient(135deg, #8b5cf6, #c026d3); border-color: transparent; box-shadow: 0 0 18px rgba(192, 38, 211, 0.7); }
.ex-keeps { text-align: center; margin: 34px auto 0; font-size: calc(14px / var(--tz, 1)); color: var(--fg-2); max-width: 60ch; }
.ex-keeps::before { content: "✓"; color: var(--ok); font-weight: 800; margin-right: 8px; }

@media (max-width: 860px) {
  .ex { padding: 76px 0 64px; }
  .ex-stage { grid-template-columns: 1fr; gap: 24px; max-width: 520px; }
  .ex-catch.on { transform: none; }
}
@media (max-width: 720px) {
  .ex-catches { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ex-catch { flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 14px; }
  .ex-catch small { display: none; }
  .ex-catch b { font-size: calc(13px / var(--tz, 1)); }
  .ex-ico { width: 32px; height: 32px; border-radius: 10px; }
  .ex-ico svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-head h2 em { animation: none !important; }
}