/**
 * Obituary writer — "Write the obituary". Ported from the design handoff
 * (design/obituary-bundle/obituary-writer.css) and elevated: a two-pane
 * form with a LIVE paper preview that assembles as the visitor answers,
 * and a result treated as a document — paper sheet, centered letterhead,
 * hairline rule, paragraphs that write themselves in. Explicitly enqueued
 * by inc/obituary-writer.php on its three slugs only.
 */

:root{--myend-ow-lilac-ink:#5B21A6;--myend-ow-lilac-hover:#DFC6F0}

.ow{background:var(--md-surface);border:1px solid var(--md-border);border-radius:var(--md-r-lg);padding:var(--md-s-7);margin-block:var(--md-s-7);box-shadow:var(--md-elev-1);box-sizing:border-box;max-width:1060px;margin-inline:auto}
.ow *,.ow *::before,.ow *::after{box-sizing:inherit}
.ow [hidden]{display:none!important}
/* The band/prose styles cap every <p> at a reading measure — right for
   articles, wrong inside a tool card: it squeezed the disclosure and the
   rate-limit notice to ~60ch. Zero-specificity unset so the widget's own
   intentional max-widths (.ow-sub, .ow-hint, …) still win. */
.ow :where(p){max-width:none}
.ow > .ow-err{margin-top:var(--md-s-5)}
.ow-head{margin-bottom:var(--md-s-5)}
.ow-over{display:inline-flex;align-items:center;gap:6px;color:var(--md-primary);margin-bottom:var(--md-s-3)}
.ow-head h2{font-size:clamp(28px,3.5vw,var(--md-fs-headline-lg));margin:0 0 var(--md-s-3)}
.ow-sub{color:var(--md-text-2);margin:0;max-width:60ch;line-height:1.6}

/* ── Two panes: questions + the page taking shape ───
   The paper is an equal partner: its pane is a tinted "desk" the sheet
   lies on, top-aligned with the headline, stretching the card's full
   height so there is no dead quadrant. */
.ow-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,42%);gap:var(--md-s-7);align-items:stretch}
.ow-preview{position:relative;background:var(--md-surface-tint);border-radius:var(--md-r-md);padding:var(--md-s-6);display:flex;flex-direction:column;gap:14px;min-height:100%}
.ow-preview-label{font-size:var(--md-fs-label-sm,11px);font-weight:var(--md-fw-semibold);letter-spacing:var(--md-ls-overline);text-transform:uppercase;color:var(--md-primary)}
.ow-preview .ow-paper{position:sticky;top:96px;flex:0 0 auto;transform:rotate(.4deg)}
.ow-paper-ghost{display:block;height:9px;border-radius:3px;background:var(--md-surface-dim);opacity:.65;margin:0 0 10px}

/* ── Paper — the document surface ─────────────────── */
.ow-paper{position:relative;background:#fff;border:1px solid var(--md-border-soft,#e8e4da);border-radius:6px;box-shadow:0 1px 2px rgba(30,25,15,.08),0 14px 34px -18px rgba(30,25,15,.28);padding:clamp(24px,4vw,48px)}
.ow-paper-name{font-family:var(--md-font-serif);font-weight:var(--md-fw-regular);font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--md-text);text-align:center;margin:0 0 6px}
.ow-paper-name.is-ghost{color:var(--md-text-muted)}
.ow-paper-years{font-family:var(--md-font);font-size:var(--md-fs-label);font-weight:var(--md-fw-medium);letter-spacing:.18em;text-transform:uppercase;color:var(--md-text-3);text-align:center;margin:0 0 4px}
.ow-paper-rule{display:block;width:56px;height:1px;background:var(--md-border);margin:14px auto 18px}
.ow-paper--mini{padding:34px 30px 40px;min-height:420px}
.ow-paper--mini .ow-paper-name{font-size:22px}
.ow-paper--mini .ow-paper-rule{margin:12px auto 16px}
.ow-paper-line{font-family:var(--md-font-serif);font-size:14.5px;line-height:1.75;color:var(--md-text-2);margin:0 0 12px;opacity:1;transition:opacity .5s ease,transform .5s ease}
.ow-paper-line.is-ghost{color:var(--md-text-muted);font-style:italic}
.ow-paper-line.is-in{animation:owLineIn .55s ease both}
@keyframes owLineIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── Stepper: current left, next right, progress between ── */
.ow-stepper{display:flex;align-items:center;gap:var(--md-s-4);margin:0 0 var(--md-s-6);padding:0 0 var(--md-s-5);border-bottom:1px solid var(--md-divider)}
.ow-raildot{width:22px;height:22px;border-radius:var(--md-r-full);background:var(--md-surface-dim);color:var(--md-text-3);font-size:var(--md-fs-label);font-weight:var(--md-fw-semibold);display:grid;place-items:center;line-height:1;flex:0 0 auto}
.ow-raildot.is-now{background:var(--md-primary);color:var(--md-on-primary)}
.ow-stepper__now{display:inline-flex;align-items:center;gap:8px;color:var(--md-text);flex:0 0 auto}
.ow-stepper__nowlabel{font-size:var(--md-fs-body-sm);font-weight:var(--md-fw-semibold);white-space:nowrap}
.ow-stepper__line{flex:1;height:2px;border-radius:2px;background:var(--md-surface-dim);position:relative;overflow:hidden;min-width:40px}
.ow-stepper__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--md-primary);border-radius:2px;transition:width .4s ease}
.ow-stepper__next{display:inline-flex;align-items:center;gap:8px;color:var(--md-text-muted);flex:0 0 auto}
.ow-stepper__nextword{font-size:var(--md-fs-label);white-space:nowrap}
.ow-stepper__nextlabel{font-size:var(--md-fs-body-sm);font-weight:var(--md-fw-medium);white-space:nowrap}

/* ── Step body ────────────────────────────────────── */
.ow-step{animation:owIn var(--md-transition-medium) ease both}
@keyframes owIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ow-q{font-family:var(--md-font-serif);font-size:clamp(22px,2.6vw,var(--md-fs-headline));line-height:1.2;letter-spacing:-.015em;color:var(--md-text);margin:0 0 var(--md-s-3)}
.ow-opt{font-family:var(--md-font);font-size:var(--md-fs-label);font-weight:var(--md-fw-medium);text-transform:uppercase;letter-spacing:var(--md-ls-overline);color:var(--md-text-muted);background:var(--md-surface-dim);border-radius:var(--md-r-full);padding:4px 10px;margin-left:12px;vertical-align:middle}
.ow-hint{font-size:var(--md-fs-body-sm);color:var(--md-text-3);line-height:1.6;margin:0 0 var(--md-s-5);max-width:62ch}
.ow-body{display:grid;gap:var(--md-s-5)}
.ow-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--md-s-4)}
.ow-row{display:grid;gap:8px}
.ow-rowlabel,.ow-sublabel{font-size:var(--md-fs-body-sm);font-weight:var(--md-fw-medium);color:var(--md-text-2)}
.ow-sublabel{margin-bottom:calc(-1 * var(--md-s-3))}
.ow-micro{font-size:var(--md-fs-label);color:var(--md-text-muted);margin:0}
.ow-input{width:100%;font-family:inherit;font-size:var(--md-fs-body);line-height:var(--md-lh-body);color:var(--md-text);background:var(--md-surface);border:1px solid var(--md-border);border-radius:var(--md-r-md);padding:13px 15px;resize:vertical}
.ow-input--short{max-width:220px}
.ow-input::placeholder{color:var(--md-text-muted)}
.ow-input:focus{outline:none;border-color:var(--md-primary);box-shadow:0 0 0 3px var(--md-surface-tint)}
.ow-chips{display:flex;flex-wrap:wrap;gap:var(--md-s-3)}
.ow-chip{display:grid;gap:2px;text-align:left;font-family:inherit;background:var(--md-surface);border:1px solid var(--md-border);border-radius:var(--md-r-full);padding:11px 22px;cursor:pointer;transition:background var(--md-transition-fast),border-color var(--md-transition-fast),color var(--md-transition-fast)}
.ow-chip:hover{border-color:var(--md-primary);color:var(--md-primary)}
.ow-chip-label{font-size:var(--md-fs-body-sm);font-weight:var(--md-fw-medium);line-height:1.4;color:inherit}
.ow-chip-sub{font-size:var(--md-fs-label);color:var(--md-text-3);line-height:1.3}
.ow-chip.is-active{background:var(--md-primary-container);border-color:var(--md-primary-container);color:var(--md-on-primary-container)}
.ow-chip.is-active .ow-chip-sub{color:var(--md-on-primary-container);opacity:.72}
.ow-chip.is-active:hover{background:var(--md-primary-container-hover);border-color:var(--md-primary-container-hover)}
.ow-consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--md-fs-body-sm);line-height:1.55;color:var(--md-text-2);cursor:pointer}
.ow-consent input{margin:2px 0 0;width:17px;height:17px;flex:0 0 auto;accent-color:var(--md-primary)}

/* ── Nav ──────────────────────────────────────────── */
.ow-nav{margin-top:var(--md-s-6);padding-top:var(--md-s-5);border-top:1px solid var(--md-divider);display:flex;align-items:center;justify-content:space-between;gap:var(--md-s-4)}
.ow-navright{display:flex;align-items:center;gap:var(--md-s-3)}
.ow-count{font-size:var(--md-fs-label);color:var(--md-text-muted);letter-spacing:.02em}
.ow-textbtn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:var(--md-fs-body-sm);font-weight:var(--md-fw-medium);color:var(--md-primary);background:none;border:0;padding:0;cursor:pointer}
.ow-textbtn:hover{text-decoration:underline}
.ow-textbtn:disabled{color:var(--md-text-muted);cursor:default;text-decoration:none}
.ow-cta{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:var(--md-fs-body);font-weight:var(--md-fw-medium);color:var(--md-on-primary);background:var(--md-primary);border:0;border-radius:var(--md-r-full);padding:14px 30px;cursor:pointer;transition:background var(--md-transition-fast)}
.ow-cta:hover{background:var(--md-primary-hover)}
.ow-cta:active{background:var(--md-primary-active)}
.ow-cta:disabled{background:var(--md-surface-dim);color:var(--md-text-muted);cursor:default}
.ow-cta--ai{background:var(--md-tile-lilac);color:var(--myend-ow-lilac-ink);font-weight:var(--md-fw-semibold)}
.ow-cta--ai:hover{background:var(--myend-ow-lilac-hover)}
.ow-cta--ai:active{background:var(--myend-ow-lilac-hover)}
.ow-cta--quiet{padding:13px 24px;font-size:var(--md-fs-body-sm)}
.ow-ghostchip{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:var(--md-fs-body-sm);color:var(--md-text-2);background:var(--md-surface-dim);border:1px solid transparent;border-radius:var(--md-r-full);padding:7px 16px;cursor:pointer;transition:all var(--md-transition-fast)}
.ow-ghostchip:hover{background:var(--md-surface-tint);color:var(--md-primary)}
.ow-ghostchip:disabled{opacity:.5;cursor:default}
.ow-ghostchip--strong{background:var(--md-tile-lilac);border-color:transparent;color:var(--myend-ow-lilac-ink);font-weight:var(--md-fw-medium)}
.ow-ghostchip--strong:hover{background:var(--myend-ow-lilac-hover);color:var(--myend-ow-lilac-ink)}

/* ── Loading: a document taking shape ─────────────── */
.ow-loading{display:grid;gap:var(--md-s-4)}
.ow-loadline{font-family:var(--md-font-serif);font-size:var(--md-fs-title-lg);line-height:1.45;color:var(--md-text-2);margin:0}
.ow-skel{display:grid;gap:14px;justify-items:start}
.ow-skel span{border-radius:var(--md-r-xs);background:var(--md-surface-dim);animation:owPulse 1.8s ease-in-out infinite}
.ow-skel-title{width:44%;height:24px;justify-self:center}
.ow-skel-rule{width:64px;height:2px;margin-block:2px;justify-self:center}
.ow-skel-line{width:100%;height:11px}
.ow-skel-line:nth-of-type(4){width:92%}
.ow-skel-line:nth-of-type(7){width:96%}
.ow-skel-line:nth-of-type(9){width:58%}
@keyframes owPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ── Draft document ───────────────────────────────── */
[data-ow-stage="draft"],[data-elw-stage="draft"]{display:grid;gap:var(--md-s-4);outline:none}
.ow-resulthead{display:flex;flex-wrap:wrap;gap:var(--md-s-4);align-items:baseline;justify-content:space-between}
.ow-meta{font-size:var(--md-fs-body-sm);color:var(--md-text-3);margin:0}
.ow-doc{transition:opacity var(--md-transition-medium)}
.ow-doc.is-busy{opacity:.45;pointer-events:none}
.ow-doc p{font-family:var(--md-font-serif);font-size:clamp(17px,1.6vw,20px);line-height:1.78;color:var(--md-text);max-width:64ch;margin:var(--md-s-4) auto 0;text-wrap:pretty;opacity:0;transform:translateY(7px);transition:opacity .6s ease,transform .6s ease}
.ow-doc.is-in p{opacity:1;transform:none}
.ow-verify{display:flex;gap:9px;align-items:flex-start;font-size:var(--md-fs-body-sm);line-height:1.55;color:var(--md-text-2);background:var(--md-tile-cream);border-radius:var(--md-r-sm);padding:12px 16px;margin:0}
.ow-verify svg{flex:0 0 auto;translate:0 2px}
.ow-actions{display:flex;gap:var(--md-s-2)}
.ow-mini{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:var(--md-fs-body-sm);font-weight:var(--md-fw-medium);color:var(--md-text-2);background:var(--md-surface);border:1px solid var(--md-border);border-radius:var(--md-r-full);padding:9px 18px;cursor:pointer;transition:all var(--md-transition-fast)}
.ow-mini:hover{color:var(--md-primary);border-color:var(--md-primary)}
.ow-mini.is-done{color:var(--md-success);border-color:var(--md-success)}
.ow-refine{display:flex;flex-wrap:wrap;gap:var(--md-s-2);align-items:center}
.ow-hintlabel{font-size:var(--md-fs-body-sm);color:var(--md-text-3)}
.ow-err{font-size:var(--md-fs-body-sm);color:var(--md-warning);background:var(--md-warning-bg);border-radius:var(--md-r-sm);padding:10px 14px;margin:0}

/* ── Email capture ────────────────────────────────── */
.ow-mail{margin-top:var(--md-s-4);background:var(--md-surface-2);border:1px solid var(--md-border);border-radius:var(--md-r-md);padding:var(--md-s-6);display:grid;gap:var(--md-s-4)}
.ow-mailhead{display:flex;gap:var(--md-s-4);align-items:flex-start}
.ow-mailic{flex:0 0 auto;width:40px;height:40px;border-radius:var(--md-r-md);background:var(--md-tile-lilac);color:var(--myend-ow-lilac-ink);display:grid;place-items:center}
.ow-mailtitle{font-family:var(--md-font-serif);font-size:var(--md-fs-title-lg);line-height:1.3;color:var(--md-text);margin:0 0 6px}
.ow-mailnote{font-size:var(--md-fs-body-sm);line-height:1.6;color:var(--md-text-3);margin:0;max-width:58ch}
.ow-mailform{display:flex;flex-wrap:wrap;gap:var(--md-s-3)}
.ow-mailform .ow-input{flex:1 1 240px;width:auto}
.ow-consentnote{font-size:var(--md-fs-label);line-height:1.6;color:var(--md-text-muted);margin:0;max-width:62ch}
.ow-mail.is-sent{border-color:var(--md-primary-container);background:var(--md-surface-tint)}

/* ── Footer + banner ──────────────────────────────── */
.ow-foot{margin-top:var(--md-s-6);border-top:1px solid var(--md-divider);padding-top:var(--md-s-4);display:grid;gap:var(--md-s-4)}
.ow-note{display:flex;gap:8px;align-items:flex-start;font-size:var(--md-fs-body-sm);line-height:1.5;color:var(--md-text-3);margin:0}
.ow-note svg{flex:0 0 auto;translate:0 3px}
.ow-banner{position:relative;overflow:hidden;display:block;height:104px;text-decoration:none;border-radius:10px;background:linear-gradient(160deg,#FDFBF5,#F3EFE4);box-shadow:0 1px 2px rgba(30,25,15,.10),0 12px 30px -14px rgba(30,25,15,.30);isolation:isolate;user-select:none}
.ow-banner:focus-visible{outline:3px solid var(--md-primary);outline-offset:3px}
.ow-banner__blob{position:absolute;width:130px;height:130px;right:-40px;top:-40px;border-radius:var(--md-r-full);background:var(--md-tile-lilac);filter:blur(2px);opacity:.55;z-index:0;animation:owDrift 14s ease-in-out infinite}
@keyframes owDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6px,-8px) scale(1.06)}}
.ow-banner__brand{position:absolute;top:50%;left:22px;transform:translateY(-50%);z-index:4;display:flex;align-items:center}
.ow-banner__brand img{display:block;height:24px;width:auto}
.ow-banner__stage{position:absolute;inset:0;z-index:2;display:block}
.ow-banner__frame{position:absolute;inset:0;display:flex;flex-direction:row;align-items:center;gap:18px;padding:0 24px 0 122px;opacity:0;will-change:transform,opacity}
.ow-banner__frame--1{animation:owbf1 12s ease-in-out infinite}
.ow-banner__frame--2{animation:owbf2 12s ease-in-out infinite}
.ow-banner__frame--3{animation:owbf3 12s ease-in-out infinite}
@keyframes owbf1{0%{opacity:0;transform:translateY(9px)}3%{opacity:1;transform:none}27%{opacity:1;transform:none}31%{opacity:0;transform:translateY(-9px)}100%{opacity:0}}
@keyframes owbf2{0%,29%{opacity:0;transform:translateY(9px)}34%{opacity:1;transform:none}60%{opacity:1;transform:none}64%{opacity:0;transform:translateY(-9px)}100%{opacity:0}}
@keyframes owbf3{0%,62%{opacity:0;transform:translateY(9px)}68%{opacity:1;transform:none}97%{opacity:1;transform:none}100%{opacity:1}}
.ow-banner__txt{flex:1;min-width:0;display:block}
.ow-banner__eyebrow{display:block;font-size:10px;font-weight:var(--md-fw-bold,700);letter-spacing:.14em;text-transform:uppercase;color:var(--md-primary);margin-bottom:3px}
.ow-banner__headline{display:block;flex:1;min-width:0;font-family:var(--md-font-serif);font-weight:500;font-size:21px;letter-spacing:-.015em;line-height:1.15;color:var(--md-text)}
.ow-banner__frame--3 .ow-banner__headline{flex:initial}
.ow-banner__headline em{font-style:italic;color:var(--md-primary)}
.ow-banner__cta{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;font-family:var(--md-font);font-weight:var(--md-fw-semibold);font-size:13.5px;line-height:1;color:var(--md-on-primary);background:var(--md-primary);border-radius:var(--md-r-full);padding:10px 20px;white-space:nowrap;animation:owCtaPulse 2.6s ease-in-out infinite}
@keyframes owCtaPulse{0%,100%{box-shadow:0 0 0 0 rgba(11,87,208,.36)}50%{box-shadow:0 0 0 6px rgba(11,87,208,0)}}
.ow-banner__arr{display:inline-flex;transition:transform .3s ease}
.ow-banner:hover .ow-banner__arr{transform:translateX(3px)}

/* ── Responsive ───────────────────────────────────── */
@media (max-width:960px){
.ow-columns{grid-template-columns:1fr}
.ow-preview{display:none}
}
/* Article-embedded (compact): the post column is ~720px — no room for the
   desk pane at any screen size. Single column, preview hidden. */
.ow--compact .ow-columns{grid-template-columns:1fr}
.ow--compact .ow-preview{display:none}
@media (max-width:640px){
.ow{padding:var(--md-s-5);border-radius:var(--md-r-md)}
.ow-nav{flex-wrap:wrap;gap:var(--md-s-3)}
.ow-count{order:3;width:100%;text-align:center}
.ow-navright{flex:1;justify-content:flex-end}
.ow-cta{flex:1;justify-content:center}
.ow-chip{width:100%;padding:12px 20px}
.ow-mailform .ow-input,.ow-mailform .ow-cta{flex:1 1 100%;width:100%;justify-content:center}
.ow-mini{width:100%;justify-content:center}
.ow-doc p{font-size:17px}
.ow-banner{height:88px}
.ow-banner__brand{left:14px}
.ow-banner__brand img{height:18px}
.ow-banner__frame{padding:0 14px 0 88px;gap:10px}
.ow-banner__headline{font-size:15px}
.ow-banner__cta{font-size:12px;padding:8px 14px}
}
@media (prefers-reduced-motion:reduce){
.ow-step,.ow-paper-line.is-in{animation:none}
.ow-skel span{animation:none;opacity:.7}
.ow-doc p{opacity:1;transform:none;transition:none}
.ow-banner__frame--1,.ow-banner__frame--2,.ow-banner__cta,.ow-banner__blob{animation:none!important}
.ow-banner__frame--1,.ow-banner__frame--2{opacity:0}
.ow-banner__frame--3{animation:none!important;opacity:1;transform:none}
}