/* edcflow.css — the four EDC Flow account pages (/edcflow/pricing, /pro/success,
   /account, /delete-account). Built by tools/edcflow/build.py on shop.css's
   tokens (--mise-*): nothing here invents a colour, font or radius.

   STATES. Each block that depends on the signed-in state carries
   data-when="out in pro done" (any subset). The script sets data-auth on
   <body>; until it has, only nothing-specific content shows. Without
   JavaScript (no .edcflow-js on <html>) every block shows, so the page still
   reads in full: prices, steps, explanations, the sign-in form. */

.edcflow-section { padding-top: 56px; }
.edcflow-page .mise-hero-slim p { max-width: 640px; }

/* State gating, JS on only. */
/* Before the script knows the state, the signed-out view is already on screen
   (no layout shift for the common visitor); signed-in blocks swap in after. */
.edcflow-js body:not([data-auth]) [data-when]:not([data-when~="out"]) { display: none; }
.edcflow-js body[data-auth="out"]  [data-when]:not([data-when~="out"])  { display: none; }
.edcflow-js body[data-auth="in"]   [data-when]:not([data-when~="in"])   { display: none; }
.edcflow-js body[data-auth="pro"]  [data-when]:not([data-when~="pro"])  { display: none; }
.edcflow-js body[data-auth="done"] [data-when]:not([data-when~="done"]) { display: none; }
.edcflow-js [data-when][hidden] { display: none; }
.edcflow-js [data-signin-wrap]:not([data-open]) { display: none; }
/* Without JavaScript only the signed-out view makes sense: prices, steps,
   the sign-in form and its <noscript> note. */
html:not(.edcflow-js) [data-when]:not([data-when~="out"]) { display: none; }

/* A signed-in block that has just appeared fades up once; signed-out blocks
   were visible from the first paint and never animate. */
.edcflow-js body[data-auth]:not([data-auth="out"]) [data-when]:not([data-when~="out"]) { animation: edcflow-rise 520ms var(--mise-ease) both; }
@keyframes edcflow-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Plans */
.edcflow-plans { grid-template-columns: 1fr; margin: 0 0 22px; }
@media (min-width: 680px) { .edcflow-plans { grid-template-columns: 1fr 1fr; } }
.edcflow-plan { display: flex; flex-direction: column; }
.edcflow-plan ul { margin-bottom: 18px; }
.edcflow-plan-cta { margin-top: auto; }
.edcflow-per { font: 500 1rem/1 var(--mise-sans); color: var(--mise-muted); }
.mise-btn-wide { width: 100%; justify-content: center; }
.mise-btn-line { background: #fff; color: var(--mise-ink); box-shadow: inset 0 0 0 1.5px var(--mise-line); }
.mise-btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--mise-gold); }
.mise-btn[disabled], .mise-btn[aria-busy="true"] { opacity: 0.55; cursor: progress; transform: none !important; box-shadow: none; }

/* Sign-in box. The forms are display:grid, which would beat the browser's
   [hidden] rule; this keeps hidden meaning hidden on every element here. */
.edcflow-page [hidden] { display: none !important; }
.edcflow-signin { margin: 0 0 22px; }
.edcflow-form { display: grid; gap: 14px; }
.edcflow-code { letter-spacing: 0.35em; font-size: 1.4rem; font-weight: 600; text-align: center; max-width: 220px; }
.edcflow-sent { margin: 0; line-height: 1.6; }
.edcflow-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.edcflow-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--mise-gold-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.edcflow-linkbtn:hover { color: var(--mise-ink); }
.edcflow-whoami { margin: 0 0 18px; color: var(--mise-muted); font-size: 0.95rem; }
.edcflow-whoami strong { color: var(--mise-ink); }

/* Messages */
.edcflow-status { min-height: 1.5em; margin: 0 0 22px; padding: 0; line-height: 1.6; color: var(--mise-ink); font-weight: 500; }
.edcflow-status:empty { margin: 0; min-height: 0; }
.edcflow-status[data-tone="error"] { color: #7a2e0e; }
.edcflow-status[data-tone="ok"] { color: #1b4a3e; }

/* Account facts */
.edcflow-card { padding: 26px; border-radius: var(--mise-r-xl); background: #fff; box-shadow: inset 0 0 0 1px var(--mise-line); margin: 0 0 22px; }
.edcflow-facts { margin: 0 0 22px; display: grid; gap: 0; }
.edcflow-facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--mise-line); }
.edcflow-facts > div:last-child { border-bottom: 1px solid var(--mise-line); }
.edcflow-facts dt { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mise-gold-ink); align-self: center; }
.edcflow-facts dd { margin: 0; color: var(--mise-ink); font-weight: 500; }
@media (max-width: 480px) { .edcflow-facts > div { grid-template-columns: 1fr; gap: 2px; } }
.edcflow-loading { margin: 0 0 18px; color: var(--mise-muted); }

/* Lists, steps, headings */
.edcflow-h2 { font-size: 1.6rem; margin: 40px 0 14px; }
.edcflow-steps { margin: 0 0 26px; padding-left: 1.3em; display: grid; gap: 10px; line-height: 1.6; }
.edcflow-steps li::marker { color: var(--mise-gold-ink); font-weight: 700; }
.edcflow-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.edcflow-list li { display: flex; gap: 10px; line-height: 1.6; }
.edcflow-list li .mise-ic { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.edcflow-fine { margin-top: 22px; }
.edcflow-fine a, .edcflow-list a, .edcflow-steps a { color: var(--mise-gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.edcflow-danger-link { padding-top: 22px; border-top: 1px solid var(--mise-line); }
.edcflow-check { display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; cursor: pointer; }
.edcflow-check input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--mise-navy); }

/* The success tick draws only while we are still confirming; the done state
   is the static final drawing. */
.edcflow-done[data-poll="waiting"] .mise-done-tick path { stroke-dashoffset: 40; }
.edcflow-done[data-poll="waiting"] .mise-done-tick circle { stroke-dashoffset: 151; animation: edcflow-spin 1.6s linear infinite; transform-origin: 50% 50%; stroke-dasharray: 40 111; }
@keyframes edcflow-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .edcflow-js body[data-auth] [data-when] { animation: none !important; }
  .edcflow-done[data-poll="waiting"] .mise-done-tick circle { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.5; }
}