/* ClearCalc motion: the estimate diagram plays its flow once, the before/after rows step in.
   Everything shows in its final state when motion is reduced or scripts don't run. */

/* ---------- Estimate diagram (inline, themeable) ----------
   One left-to-right flow on wide screens, the same flow stacked on phones. */
.cc-eco { --eco-bg: #f7f9fa; --eco-card: #fff; --eco-text: #22303a; --eco-muted: #5f6c76; --eco-teal: #1586aa; --eco-disc: #e3f2f7;
  --eco-line: #8d9aa4; --eco-chip: #cfd8de; --eco-bad: #fdf1ef; --eco-badink: #c8392b; --eco-good: #e9f5f9;
  margin: 32px 0 0; }
:root[data-theme="dark"] .cc-eco { --eco-bg: #182127; --eco-card: #1f2a31; --eco-text: #e6edf1; --eco-muted: #9fb0ba; --eco-teal: #4fb3d4;
  --eco-disc: #1d3640; --eco-line: #6f7f89; --eco-chip: #3a4a54; --eco-bad: #3a2321; --eco-badink: #ff8a7d; --eco-good: #183440; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-eco { --eco-bg: #182127; --eco-card: #1f2a31; --eco-text: #e6edf1; --eco-muted: #9fb0ba; --eco-teal: #4fb3d4;
  --eco-disc: #1d3640; --eco-line: #6f7f89; --eco-chip: #3a4a54; --eco-bad: #3a2321; --eco-badink: #ff8a7d; --eco-good: #183440; } }
.cc-eco svg { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.cc-eco .eco-tall { display: none; max-width: 520px; margin: 0 auto; }
@media (max-width: 700px) { .cc-eco .eco-wide { display: none; } .cc-eco .eco-tall { display: block; } }
.cc-eco text { font-family: Inter, "Open Sans", Arial, sans-serif; fill: var(--eco-text); }
.cc-eco .c { text-anchor: middle; }
.cc-eco .e { text-anchor: end; }
.cc-eco .eco-bg { fill: var(--eco-bg); }
.cc-eco .eco-disc { fill: var(--eco-disc); }
.cc-eco .eco-chip { fill: var(--eco-chip); }
.cc-eco .eco-chipbox { fill: none; stroke: var(--eco-chip); stroke-width: 2; stroke-dasharray: 4 4; }
.cc-eco .eco-ic, .cc-eco .eco-ic * { fill: none; stroke: var(--eco-teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cc-eco .eco-badic, .cc-eco .eco-badic * { fill: none; stroke: var(--eco-badink); stroke-width: 3; }
.cc-eco .eco-hub { fill: var(--eco-card); stroke: var(--eco-teal); stroke-width: 2.5; }
.cc-eco .eco-bad { fill: var(--eco-bad); }
.cc-eco .eco-good { fill: var(--eco-good); stroke: var(--eco-teal); stroke-width: 1.5; }
.cc-eco .eco-t { font-size: 26px; font-weight: 600; }
.cc-eco .eco-d { font-size: 17px; fill: var(--eco-muted); }
.cc-eco .eco-s { font-size: 16px; fill: var(--eco-muted); }
.cc-eco .eco-h { font-size: 20px; font-weight: 600; }
.cc-eco .eco-k { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; fill: var(--eco-teal); }
.cc-eco .eco-k.bad { fill: var(--eco-badink); }
.cc-eco .eco-sub { font-size: 15px; fill: var(--eco-muted); }
.cc-eco .eco-n { font-size: 14px; font-weight: 700; fill: #fff; }
.cc-eco .eco-dot { fill: var(--eco-teal); }
.cc-eco .eco-ln { fill: none; stroke: var(--eco-line); stroke-width: 2.5; }
.cc-eco .eco-head { fill: var(--eco-line); }
.cc-eco .eco-mini { fill: none; stroke: var(--eco-line); stroke-width: 2; }
.cc-eco .eco-good { stroke-width: 2; }
.cc-eco .eco-badge { fill: var(--eco-teal); }
.cc-eco .eco-badget { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; fill: var(--eco-card); }
.cc-eco .eco-tall .eco-badget { font-size: 14px; }
/* bigger type in the stacked version, since it is drawn smaller */
.cc-eco .eco-tall .eco-t { font-size: 30px; }
.cc-eco .eco-tall .eco-d { font-size: 21px; }
.cc-eco .eco-tall .eco-s { font-size: 20px; }
.cc-eco .eco-tall .eco-h { font-size: 24px; }
.cc-eco .eco-tall .eco-k { font-size: 16px; }
.cc-eco .eco-tall .eco-sub { font-size: 18px; }
.cc-eco .eco-tall .eco-n { font-size: 17px; }
.cc-eco figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.eco-replay { margin-left: 8px; padding: 2px 10px; font: 600 12px var(--font-body); border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.eco-replay:hover { color: var(--text); border-color: var(--text); }

/* the sequence: clinic → insurer → rules (Excel gives way to ClearCalc) → patient's estimate */
.cc-eco.armed .eco-a, .cc-eco.armed .eco-after, .cc-eco.armed .eco-tag { opacity: 0; }
.cc-eco.armed .eco-ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cc-eco.armed .eco-a .eco-head { opacity: 0; }
.cc-eco.play .eco-a { animation: eco-fade .4s ease forwards; }
.cc-eco.play .eco-ln { animation: eco-draw .45s cubic-bezier(.4, 0, .2, 1) forwards; }
.cc-eco.play .eco-a .eco-head { animation: eco-fade .15s ease forwards; }
.cc-eco.play .s1 { animation-delay: .1s; }
.cc-eco.play .s2, .cc-eco.play .s2 .eco-ln { animation-delay: .6s; }
.cc-eco.play .s2 .eco-head { animation-delay: 1s; }
.cc-eco.play .s3, .cc-eco.play .s3 .eco-ln { animation-delay: 1.2s; }
.cc-eco.play .s3 .eco-head { animation-delay: 1.6s; }
.cc-eco.play .eco-before { animation: eco-dim .6s ease 2.1s forwards; }
.cc-eco.play .eco-after { animation: eco-rise .6s cubic-bezier(.2, .8, .2, 1) 2.3s forwards; }
.cc-eco.play .s4, .cc-eco.play .s4 .eco-ln { animation-delay: 3s; }
.cc-eco.play .s4 .eco-head { animation-delay: 3.4s; }
.cc-eco.play .eco-tag { animation: eco-fade .5s ease 3.5s forwards; }
@keyframes eco-fade { to { opacity: 1; } }
@keyframes eco-draw { to { stroke-dashoffset: 0; } }
@keyframes eco-dim { to { opacity: .5; } }
@keyframes eco-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cc-eco .eco-after, .cc-eco .eco-before { transform-box: fill-box; transform-origin: center; }

/* ---------- Before / after rows step in ---------- */
.cc-compare.armed tbody tr { opacity: 0; transform: translateY(8px); }
.cc-compare.armed.in tbody tr { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.cc-compare.armed.in tbody tr:nth-child(2) { transition-delay: .08s; }
.cc-compare.armed.in tbody tr:nth-child(3) { transition-delay: .16s; }
.cc-compare.armed.in tbody tr:nth-child(4) { transition-delay: .24s; }
.cc-compare.armed.in tbody tr:nth-child(5) { transition-delay: .32s; }
.cc-compare.armed tbody td:last-child { opacity: 0; transition: opacity .5s ease; }
.cc-compare.armed.in tbody td:last-child { opacity: 1; transition-delay: inherit; }
.cc-compare.armed.in tbody tr td:last-child { transition: opacity .5s ease .35s; }

/* ---------- Prototype: screens crossfade ---------- */
.proto-stage img { transition: opacity .22s ease; }
.proto-stage.swapping img { opacity: 0; }
.proto-stage.swapping .proto-spot, .proto-stage.swapping .proto-tip { opacity: 0; }
.proto-spot, .proto-tip { transition: opacity .2s ease .1s; }

@media (prefers-reduced-motion: reduce) {
  .cc-eco.armed .eco-a, .cc-eco.armed .eco-after, .cc-eco.armed .eco-tag, .cc-eco.armed .eco-head, .cc-compare.armed tbody tr, .cc-compare.armed tbody td:last-child { opacity: 1 !important; transform: none !important; }
  .cc-eco.armed .eco-ln { stroke-dashoffset: 0 !important; }
  .cc-eco .eco-before { animation: none !important; }
  .proto-stage img, .proto-spot, .proto-tip { transition: none; }
}