/* ============ Product Theatres ============
 * docs/marketing-v2-design.md §6. Frame, controls and every theatre's
 * keyframes. The server renders each theatre's FINAL frame; the base rules
 * below ARE that frame (data-run="still": no-JS, reduced motion). Rules under
 * .th[data-run="on"][data-scene="…"] are the moving states theatre.js steps
 * through. Animations touch only transform and opacity, inside boxes whose
 * size never changes between states, so nothing reflows (CLS, §8.2).
 *
 * Inside a stage the palette is the Interactive Report's own (paper, ink,
 * literal hex) — the hero is a miniature of that page. Longhands, no `inset:`.
 */

.th { position: relative; margin: 0; }
.th-stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  font-family: "Public Sans", system-ui, sans-serif;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.th-paper { background: #faf9f6; color: #141412; }
.th-ink { background: #15161c; border: 1px solid #2a2c37; color: #ecedf2; }
.th-num { font-variant-numeric: tabular-nums; }
.th-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The pause control (WCAG 2.2.2): a real button, outside the hidden stage,
   always visible top-right once theatre.js unhides it. */
.th-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #2a2c37;
  border-radius: 999px;
  background: #0d0e12;
  background: rgba(13, 14, 18, 0.86);
  color: #ecedf2;
  font: 600 12.5px/1 "Public Sans", system-ui, sans-serif;
  cursor: pointer;
}
.th-toggle[hidden] { display: none; }
.th-toggle:hover { background: #1e2029; }
.th-toggle:focus-visible { outline: 2px solid #8b8ff7; outline-offset: 2px; }

/* Pause holds the frame: every animation stops where it is. */
.th[data-paused] .th-stage *,
.th[data-paused] .th-stage *::before,
.th[data-paused] .th-stage *::after { animation-play-state: paused; }

@keyframes th-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes th-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes th-pop { 0% { opacity: 0; transform: scale(.9); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes th-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes th-drag { from { transform: translateX(var(--from)); } to { transform: translateX(var(--to)); } }
@keyframes th-fill { from { transform: scaleX(var(--from-n)); } to { transform: scaleX(var(--to-n)); } }
@keyframes th-press { 0%, 100% { transform: none; } 40% { transform: scale(.94); background: #3f43b8; } }

/* ---------------------------------------------------------------- hero */
.th-hero .th-stage { min-height: 380px; padding: 18px; }
.thh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 148px; }
.thh-for small { display: block; color: #6f6c65; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.thh-for strong { font-size: 15px; }
.thh-tabs { display: flex; gap: 4px; }
.thh-tab { padding: 6px 10px; border-radius: 8px; color: #6f6c65; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.thh-tab-whatif { background: #ecebe6; color: #141412; }
.thh-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.thh-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 26px 12px 12px;
  border: 1px solid #e5e2da;
  border-top: 3px solid var(--opt);
  border-radius: 12px;
  background: #ffffff;
}
.thh-card.is-rec { border-color: var(--opt); box-shadow: 0 0 0 1px var(--opt); }
.thh-tag {
  position: absolute;
  top: 6px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--opt-ink);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.thh-name { color: #52514e; font-size: 12.5px; font-weight: 600; }
.thh-pay { font-size: 22px; letter-spacing: -.01em; }
.thh-pay small { margin-left: 2px; color: #6f6c65; font-size: 12px; font-weight: 500; }
.thh-rate { color: #6f6c65; font-size: 12px; }
.thh-panels { display: grid; margin-top: 14px; }
.thh-panel {
  grid-area: 1 / 1;
  padding: 14px;
  border: 1px solid #e5e2da;
  border-radius: 12px;
  background: #ffffff;
}
.thh-charts { opacity: 0; visibility: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.thh-wi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: #52514e; }
.thh-wi-head b { display: inline-block; width: 16ch; text-align: right; color: #141412; font-weight: 700; white-space: nowrap; }
.thh-track { position: relative; height: 18px; margin: 12px 0 14px; }
.thh-line { position: absolute; top: 7px; left: 9px; right: 9px; height: 4px; border-radius: 4px; background: #e5e2da; }
.thh-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #36a2eb;
  transform-origin: left center;
  transform: scaleX(var(--to-n));
}
.thh-rail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(var(--to)); }
.thh-thumb {
  position: absolute;
  top: -7px;
  left: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #1f6fae;
  box-shadow: 0 2px 6px rgba(20, 20, 18, .25);
}
/* Fixed first column: the payment ticks through the captured frames, and an
   auto column would nudge the pill beside it on every tick (CLS, §8.2). */
.thh-wi-result { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 2px 14px; }
.thh-wi-result small { grid-column: 1 / -1; color: #6f6c65; font-size: 12px; }
.thh-wi-result strong { font-size: 30px; letter-spacing: -.02em; }
.thh-pill {
  justify-self: start;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f1e3;
  color: #2d6a1f;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thh-chart small { display: block; margin-bottom: 8px; color: #6f6c65; font-size: 12px; font-weight: 600; }
.thh-bar { display: grid; grid-template-columns: 74px minmax(0, 1fr) 76px; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.thh-bar-name { color: #52514e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thh-bar-track { height: 10px; border-radius: 5px; background: #f1efe9; overflow: hidden; }
.thh-bar-track i { display: block; height: 100%; border-radius: 5px; background: #a9a7a0; transform-origin: left center; }
.thh-bar.is-rec .thh-bar-track i { background: #4f9a2f; }
.thh-bar-save .thh-bar-track i { background: #7cc35b; }
.thh-bar b { text-align: right; font-weight: 650; white-space: nowrap; }

/* Scenes. Still = What-if tab, slider moved, final payment. */
.th-hero[data-run="on"][data-scene="cards"] .thh-card { animation: th-rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 140ms + 80ms); }
.th-hero[data-run="on"][data-scene="cards"] .thh-tag { animation: th-pop .5s ease-out both; animation-delay: .7s; }
.th-hero[data-run="on"][data-scene="cards"] .thh-tab-whatif,
.th-hero[data-run="on"][data-scene^="charts"] .thh-tab-whatif { background: transparent; color: #6f6c65; }
.th-hero[data-run="on"][data-scene="cards"] .thh-tab-summary,
.th-hero[data-run="on"][data-scene^="charts"] .thh-tab-charts { background: #ecebe6; color: #141412; }
.th-hero[data-run="on"][data-scene="cards"] .thh-whatif { opacity: .55; }
.th-hero[data-run="on"][data-scene="cards"] .thh-rail { transform: translateX(var(--from)); }
.th-hero[data-run="on"][data-scene="cards"] .thh-fill { transform: scaleX(var(--from-n)); }
.th-hero[data-run="on"][data-scene="whatif"] .thh-rail { animation: th-drag 3360ms linear both; }
.th-hero[data-run="on"][data-scene="whatif"] .thh-fill { animation: th-fill 3360ms linear both; }
.th-hero[data-run="on"][data-scene^="charts"] .thh-whatif { opacity: 0; visibility: hidden; }
.th-hero[data-run="on"][data-scene^="charts"] .thh-charts { opacity: 1; visibility: visible; }
.th-hero[data-run="on"][data-scene="charts"] .thh-charts { animation: th-fade .35s ease-out both; }
.th-hero[data-run="on"][data-scene="charts"] .thh-bar-track i { animation: th-grow .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 120ms + 250ms); }

/* ------------------------------------------------- fee sheet -> link */
.th-feesheet .th-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; min-height: 340px; padding: 22px; }
.thf-sheet { padding: 16px; border-radius: 12px; background: #faf9f6; color: #141412; }
.thf-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.thf-dot { width: 8px; height: 8px; border-radius: 50%; background: #5b5fe0; }
.thf-fields { margin: 12px 0 0; display: grid; gap: 6px; }
.thf-field { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 6px; background: #ffffff; border: 1px solid #e5e2da; font-size: 12.5px; }
.thf-field dt { color: #52514e; }
.thf-field dd { margin: 0; font-weight: 650; }
.thf-out { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.thf-chips { display: grid; gap: 8px; }
.thf-chip {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #2a2c37;
  border-radius: 10px;
  background: #1e2029;
  font-size: 13.5px;
  font-weight: 600;
}
.thf-chip small { color: #a9acba; font-weight: 500; }
.thf-chip.is-rec { border-color: #8b8ff7; }
.thf-link { display: grid; gap: 6px; padding: 14px; border-radius: 12px; border: 1px dashed #3c3f8f; }
.thf-link-label { color: #a9acba; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.thf-pill { justify-self: start; padding: 6px 12px; border-radius: 999px; background: #5b5fe0; color: #ffffff; font-size: 13px; font-weight: 650; }
.thf-sent { color: #a9acba; font-size: 12.5px; }
.th-feesheet[data-run="on"][data-scene="fill"] .thf-field dd { animation: th-fade .25s ease-out both; animation-delay: calc(var(--d) * 330ms + 250ms); }
.th-feesheet[data-run="on"][data-scene="fill"] .thf-chip,
.th-feesheet[data-run="on"][data-scene="fill"] .thf-link,
.th-feesheet[data-run="on"][data-scene="options"] .thf-link { opacity: 0; }
.th-feesheet[data-run="on"][data-scene="options"] .thf-chip { animation: th-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 160ms); }
.th-feesheet[data-run="on"][data-scene="link"] .thf-link { animation: th-pop .55s ease-out both; }

/* ------------------------------------------------------ static report */
.th-static .th-stage { min-height: 320px; padding: 26px; }
.ths-page { padding: 18px; border-radius: 10px; }
.ths-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ths-head small { display: block; color: #6f6c65; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ths-head strong { font-size: 16px; }
.ths-btn { flex: 0 0 auto; padding: 8px 12px; border-radius: 8px; background: #5b5fe0; color: #ffffff; font-size: 12.5px; font-weight: 650; }
.ths-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 12.5px; }
.ths-table th, .ths-table td { padding: 8px 6px; border-bottom: 1px solid #e5e2da; text-align: right; white-space: nowrap; }
.ths-table th:first-child, .ths-table tbody th { text-align: left; color: #52514e; font-weight: 600; }
.ths-table thead th { color: #141412; font-weight: 700; }
.ths-table .is-rec { background: #f1f7ec; }
.th-static[data-run="on"][data-scene="rows"] tbody tr { animation: th-rise .45s ease-out both; animation-delay: calc(var(--d) * 420ms + 200ms); }
.th-static[data-run="on"][data-scene="press"] .ths-btn { animation: th-press .6s ease-in-out .3s both; }

/* ------------------------------------------------------ quote builder */
.th-quote .th-stage { min-height: 340px; padding: 26px; }
.thq-card { padding: 18px; border-radius: 12px; }
.thq-head small { display: block; color: #6f6c65; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.thq-head strong { font-size: 16px; }
.thq-lines { list-style: none; margin: 12px 0 0; padding: 0; }
.thq-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed #e5e2da; font-size: 12.5px; }
.thq-lines span { color: #52514e; }
.thq-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-weight: 700; }
.thq-total strong { font-size: 20px; }
.th-quote[data-run="on"][data-scene="lines"] .thq-lines li { animation: th-rise .35s ease-out both; animation-delay: calc(var(--d) * 470ms + 150ms); }
.th-quote[data-run="on"][data-scene="lines"] .thq-total { opacity: 0; }
.th-quote[data-run="on"][data-scene="total"] .thq-total { animation: th-pop .5s ease-out both; }

/* --------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .th-hero .th-stage { padding: 12px; }
  .thh-top { flex-wrap: wrap; padding-right: 0; }
  .thh-for { padding-right: 148px; }
  .thh-cards { gap: 6px; }
  .thh-card { padding: 24px 8px 8px; }
  .thh-pay { font-size: 17px; }
  .thh-pay small { display: none; }
  /* The charts beat is skipped below 640px (data-beat-mobile="skip"), so its
     panel would only reserve empty height. */
  .thh-charts { display: none; }
  .thh-tag { left: 5px; padding: 2px 5px; font-size: 8.5px; letter-spacing: 0; }
  .thh-wi-result strong { font-size: 26px; }
  .thh-pill { grid-column: 1 / -1; overflow: visible; }
  .thf-head { padding-right: 124px; min-height: 30px; }
  .thh-bar { grid-template-columns: 64px minmax(0, 1fr) 70px; }
  .th-feesheet .th-stage { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .th-static .th-stage, .th-quote .th-stage { padding: 12px; }
  .ths-page, .thq-card { padding: 12px; }
  .ths-table { font-size: 10.5px; }
  .ths-table th, .ths-table td { padding: 6px 2px; }
  .ths-table tbody th { white-space: normal; }
  .ths-head { flex-wrap: wrap; padding-right: 116px; }
}

/* ---------------------------------------------------------- PDF import */
.th-pdf .th-stage { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 18px; min-height: 330px; padding: 22px; }
.thp-doc { position: relative; overflow: hidden; display: grid; align-content: start; gap: 12px; padding: 34px 16px 16px; border-radius: 6px; background: #f3f2ee; }
.thp-doc-tag { position: absolute; top: 10px; left: 12px; padding: 1px 6px; border-radius: 4px; background: #c2412d; color: #ffffff; font-size: 10px; font-weight: 800; }
.thp-doc-line { display: flex; justify-content: space-between; gap: 12px; }
.thp-doc-line i { display: block; height: 7px; border-radius: 4px; background: #d6d3cb; }
.thp-doc-line i:first-child { width: 46%; }
.thp-doc-line i:last-child { width: 22%; background: #b9b5ab; }
.thp-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #8b8ff7; box-shadow: 0 0 14px #8b8ff7; opacity: 0; }
.thp-form { display: grid; align-content: start; gap: 6px; }
.thp-head { margin-bottom: 4px; font-size: 13px; font-weight: 700; }
.thp-field { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid #2a2c37; border-radius: 8px; background: #1e2029; font-size: 12.5px; }
.thp-field span { color: #a9acba; }
@keyframes th-scan { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(300px); } }
.th-pdf[data-run="on"][data-scene="scan"] .thp-scan { animation: th-scan 1.6s ease-in-out both; }
.th-pdf[data-run="on"][data-scene="scan"] .thp-field b { opacity: 0; }
.th-pdf[data-run="on"][data-scene="fill"] .thp-field b { animation: th-fade .25s ease-out both; animation-delay: calc(var(--d) * 380ms + 150ms); }
.th-pdf[data-run="on"][data-scene="fill"] .thp-field { animation: th-flash .6s ease-out both; animation-delay: calc(var(--d) * 380ms + 150ms); }
@keyframes th-flash { 0% { border-color: #8b8ff7; } 100% { border-color: #2a2c37; } }

/* ------------------------------------------------------ email composer */
.th-email .th-stage { min-height: 330px; padding: 22px; }
.the-mail { padding: 16px; border-radius: 12px; }
.the-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #e5e2da; font-size: 12.5px; }
.the-row span { width: 56px; color: #6f6c65; }
.the-body { padding-top: 10px; }
.the-line { margin: 0 0 8px; color: #33322e; font-size: 13px; line-height: 1.5; }
.the-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.the-chip { padding: 3px 9px; border-radius: 999px; background: #ecebf9; color: #3f43b8; font-size: 11.5px; font-weight: 650; }
.the-send { padding: 7px 12px; border-radius: 8px; background: #5b5fe0; color: #ffffff; font-size: 12.5px; font-weight: 650; }
@keyframes th-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.th-email[data-run="on"][data-scene="head"] .the-line,
.th-email[data-run="on"][data-scene="head"] .the-chip { opacity: 0; }
.th-email[data-run="on"][data-scene="write"] .the-line { animation: th-write .9s steps(18, end) both; animation-delay: calc(var(--d) * 1000ms); }
.th-email[data-run="on"][data-scene="write"] .the-line--long { animation-duration: 1.8s; animation-timing-function: steps(40, end); }
.th-email[data-run="on"][data-scene="write"] .the-chip { animation: th-pop .4s ease-out 4s both; }

@media (max-width: 640px) {
  .th-pdf .th-stage { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .thp-doc { display: none; }
  .thp-head { padding-right: 124px; min-height: 30px; }
  .th-email .th-stage { padding: 12px; }
  .the-row:first-child { padding-right: 116px; }
}