/* Shared product scenes. Content stays complete without JavaScript or motion. */
[data-product-preview] { --preview-green: #668644; --preview-line: #e2e7dc; }
.fx-window[data-product-preview] { container-type: inline-size; }
/* A phone is a viewport, not a page that grows with its content. */
.fx-phone .fx-phone-brand { padding: 10px 14px; }
.fx-phone .fx-phone-content > small { display: block; }
.fx-phone .fx-phone-content h4 { font-size: 18px; margin: 6px 0 12px; }
.fx-phone .fx-week-strip { margin-bottom: 12px; }
.fx-phone .fx-week-strip > span { padding: 5px 6px; }
.fx-phone .fx-card { padding: 10px; }
.fx-phone .fx-sport-title { margin: 10px 0; }
.fx-phone .fx-stats { margin: 12px 0; }
.fx-phone .fx-stats strong { font-size: 19px; }
.fx-phone .fx-session-phases { gap: 4px; margin-bottom: 10px; }
.fx-phone .fx-list-title { margin: 12px 0 8px; }
.fx-phone .fx-card > .fx-list-title { margin-top: 0; }
.fx-phone .fx-compact-row { padding-block: 7px; }
.fx-phone .fx-phone-tabs { padding: 9px 13px 12px; }
.fx-week-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: 8px; color: #60714d; margin: -5px 0 15px; }
.fx-week-summary > b { font-weight: 600; }
.fx-week-summary .fx-progress { flex-basis: 100%; margin: 0; height: 4px; }
[data-product-preview] .fx-progress > span { background: var(--preview-green); }
.fx-session-phases { display: grid; gap: 7px; margin: 0 0 14px; }
.fx-session-phases > span { display: flex; align-items: center; gap: 6px; font-size: 8px; color: #69725f; }
.fx-session-phases i { height: 5px; width: 5px; border-radius: 50%; background: #a0b48b; }
.fx-session-phases b { margin-left: auto; font-size: 8px; font-weight: 500; color: #343e2c; }
.fx-session-phases > span:nth-child(2) i { background: #59753a; }
.fx-laps { margin-top: 13px; font-size: 8px; }
.fx-laps > div { display: grid; grid-template-columns: .65fr .9fr 1fr; gap: 5px; border-bottom: 1px solid #e6e9df; padding: 6px 0; }
.fx-laps > div:first-child { color: #697360; font-size: 7px; }
.fx-laps > div > :last-child { text-align: right; }
.fx-laps b { font-weight: 600; }
.fx-water-card .bi-droplet { color: #2581b9; }
.fx-water-card .fx-progress > span { background: #4099c6; }
.fx-water-card .fx-water-actions span { background: #edf6fa; color: #307799; }
.fx-food-thumb { width: 40px; height: 40px; overflow: hidden; }
.fx-food-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fx-macro-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 16px; }
.fx-macro-grid > div > span { display: block; font-size: 6px; color: #77806c; }
.fx-macro-grid b { font-size: 12px; font-weight: 500; }
.fx-macro-grid .fx-progress { margin: 6px 0 0; height: 4px; }
.fx-macro-grid > div:nth-child(2) .fx-progress > span { background: #bca46b; }
.fx-macro-grid > div:nth-child(3) .fx-progress > span { background: #a493b6; }
.fx-ai-confirmation { background: #eaf2e0; border-radius: 8px; padding: 9px; color: #536d36; }
.fx-recovery-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.fx-recovery-metrics > span { display: grid; gap: 5px; padding: 12px; border-radius: 10px; background: #eeeaf4; }
.fx-recovery-metrics > span:nth-child(2) { background: #eaf0e0; }
.fx-recovery-metrics i { font-size: 13px; color: #71628b; }
.fx-recovery-metrics b { font-size: 12px; font-weight: 500; }
.fx-recovery-metrics small { font-size: 7px; color: #727767; }
.fx-team-overview { display: flex; justify-content: space-between; gap: 10px; font-size: 8px; color: #737b6b; margin: -4px 0 17px; }
.fx-team-overview strong { display: block; font-size: 20px; font-weight: 500; color: #303c27; margin-bottom: 3px; }
.fx-team-overview .fx-attention strong { color: #9c722a; }
.fx-sport-cell { display: flex; align-items: center; gap: 6px; }
.fx-sport-cell > i { color: #6f8755; font-size: 14px; }
.fx-sport-cell small { display: block; color: #7e8578; margin-top: 3px; font-size: 6px; }
.fx-athlete-row:nth-child(3) .fx-avatar { background: #e4edf3; color: #53788c; }
.fx-athlete-row:nth-child(4) .fx-avatar { background: #eee5f1; color: #80608e; }
.fx-athlete-row:nth-child(5) .fx-avatar { background: #f3eadb; color: #947444; }
.fx-student-glance { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid #d8e4c7; border-radius: 9px; background: #f2f6eb; }
.fx-student-glance > div { flex: 1; }
.fx-student-glance b { display: block; font-size: 9px; font-weight: 600; }
.fx-student-glance small { display: block; font-size: 7px; color: #6c7c5b; margin-top: 3px; }
.fx-student-glance > span:not(.fx-avatar) { color: #658044; font-size: 7px; }
.fx-student-glance > i { font-size: 12px; }
.fx-session-detail { margin-top: 16px; padding: 14px; border: 1px solid #dbe4cd; background: #fff; border-radius: 10px; }
.fx-session-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: #3c512c; }
.fx-session-detail-heading small { margin-left: 8px; font-size: 7px; color: #7a8470; }
.fx-intervals { display: grid; grid-template-columns: 1fr 3fr 1fr; gap: 8px; margin: 13px 0 15px; }
.fx-intervals > span { display: flex; flex-direction: column; justify-content: flex-end; height: 92px; min-width: 0; }
.fx-intervals i { height: var(--bar); min-height: 8px; background: #c1d9a3; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.fx-intervals > span:nth-child(2) i { background: #769650; }
.fx-intervals b { font-size: 8px; font-weight: 500; margin-top: 6px; }
.fx-intervals small { font-size: 7px; color: #7c8672; margin-top: 3px; }
.fx-session-detail .fx-between { font-size: 7px; }
.fx-comparison { padding: 12px; border: 1px solid #dbe4cf; border-radius: 8px; margin-top: 14px; font-size: 8px; }
.fx-comparison > span { color: #697a59; font-size: 7px; }
.fx-comparison > div:not(.fx-progress) { display: flex; gap: 12px; justify-content: space-between; margin-top: 10px; }
.fx-comparison .fx-progress { height: 4px; margin: 10px 0 0; }
.fx-cash-chart { border: 1px solid #e6eadd; border-radius: 9px; padding: 13px 13px 8px; margin-bottom: 15px; background: #fcfdf9; }
.fx-cash-chart .fx-list-title { margin: 0 0 5px; }
.fx-cash-bars { display: flex; gap: 20px; justify-content: space-around; }
.fx-cash-bars > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 18%; height: 105px; gap: 5px; }
.fx-cash-bars b { font-weight: 500; font-size: 7px; color: #68785a; }
.fx-cash-bars span { width: 75%; height: var(--bar); background: #b4cb92; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.fx-cash-bars > div:last-child span { background: #657f45; }
.fx-cash-bars small { font-size: 6px; color: #78816e; }
.fx-payment-confirmation { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 11px 12px; border-radius: 8px; background: #ecf3e3; color: #526f36; }
.fx-payment-confirmation > i { font-size: 17px; }
.fx-payment-confirmation > span { flex: 1; }
.fx-payment-confirmation b { display: block; font-size: 9px; font-weight: 500; }
.fx-payment-confirmation small { display: block; margin-top: 3px; font-size: 7px; color: #6b8058; }
.fx-pipeline-summary { display: flex; gap: 22px; font-size: 8px; color: #7c826f; margin-bottom: 17px; }
.fx-pipeline-summary b { color: #4b583d; font-size: 13px; font-weight: 500; }
.fx-lead-timeline { display: flex; align-items: center; gap: 8px; font-size: 7px; color: #7a836e; padding-top: 16px; }
.fx-lead-timeline > i { color: #718954; font-size: 14px; }
.fx-lead-timeline > span { flex: 1; }
.fx-lead-timeline small { font-size: 6px; }
.fx-preview-replay { display: flex; gap: 7px; align-items: center; justify-content: center; width: fit-content; border: 0; background: transparent; color: #59733e; padding: 10px 6px; margin: 12px auto 0; font-size: 10px; cursor: pointer; }
.fx-preview-replay:hover { color: #26351d; }
.fx-preview-replay:focus-visible { outline: 2px solid #678747; outline-offset: 3px; border-radius: 4px; }
.ft-scene-caption .fx-preview-replay { margin: 0 auto 0 0; }
.ft-preview-dialog header .fx-preview-replay { display: inline-flex; margin: 0 6px 0 auto; padding: 8px; width: auto; height: auto; border: 0; font-size: 11px; border-radius: 5px; }
.mt-app-note { display: none; }
.mt-app-preview { transform: none; }
.ft-hero-window .fx-session-detail { display: none; }
.ft-hero-phone .fx-laps { display: none; }
[data-preview-scan] { position: relative; overflow: hidden; }
[data-preview-scan-loop] { --preview-scan-cycle: 6.4s; }
[data-preview-scan]::after { content: ''; position: absolute; top: 15%; left: 8%; right: 8%; height: 2px; background: #e4ffbc; box-shadow: 0 0 18px 4px #c3eaa060; opacity: 0; pointer-events: none; }
.ft-recovery-scene .ft-sleep-bars i { transform-origin: bottom; }

/* Scenes play once on entry; opted-in photo scans loop only while visible. */
.is-preview-playing [data-preview-step] { animation: preview-arrive .55s ease both; animation-delay: var(--preview-delay, 0s); }
.is-preview-playing :is(.fx-chart-line,.fx-route-line,.ft-draw) { stroke-dasharray: 1; stroke-dashoffset: 0; animation: preview-draw 1.7s ease .2s both; }
.is-preview-playing .fx-progress > span { transform-origin: left; animation: preview-fill 1.25s ease .3s both; }
.is-preview-playing .ft-water-progress > span { transform-origin: bottom; animation: preview-grow 1.25s ease .3s both; }
.is-preview-playing :is(.fx-cash-bars > div > span,.fx-intervals i,.ft-sleep-bars i) { animation: preview-grow 1.2s ease .35s both; }
.is-preview-playing [data-preview-scan]::after { animation: preview-scan 1.8s ease both; }
.is-preview-scanning [data-preview-scan]::after { animation: preview-scan-loop var(--preview-scan-cycle) ease-in-out infinite; }
.is-preview-scanning [data-preview-scan-result] { animation: preview-scan-result var(--preview-scan-cycle) ease-in-out infinite; }
.is-preview-playing .fx-ai-confirmation, .is-preview-playing .fx-payment-confirmation { animation-delay: 1.25s; }
@keyframes preview-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes preview-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes preview-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes preview-grow { from { transform: scaleY(.06); } to { transform: scaleY(1); } }
@keyframes preview-scan { 0% { top: 15%; opacity: 0; } 20% { opacity: 1; } 85% { opacity: 1; } 100% { top: 85%; opacity: 0; } }
@keyframes preview-scan-loop { 0% { top: 15%; opacity: 0; } 6% { opacity: 1; } 32% { top: 85%; opacity: 1; } 36%, 100% { top: 85%; opacity: 0; } }
@keyframes preview-scan-result { 0%, 36% { opacity: 0; transform: translateY(9px); } 44%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(9px); } }
@container (min-width: 600px) {
  .fx-workspace-heading h4 { font-size: 22px; }
  .fx-workspace-heading p, .fx-team-overview { font-size: 10px; }
  .fx-workspace-heading small, .fx-fake-search { font-size: 8px; }
  .fx-team-overview strong { font-size: 25px; }
  .fx-athlete-row, .fx-person b, .fx-entry, .fx-table-heading { font-size: 10px; }
  .fx-person small, .fx-sport-cell small { font-size: 8px; }
  .fx-student-glance b, .fx-session-detail-heading { font-size: 12px; }
  .fx-student-glance small, .fx-student-glance > span:not(.fx-avatar), .fx-session-detail-heading small { font-size: 9px; }
  .fx-calendar-training b { font-size: 10px; }
  .fx-calendar-training span, .fx-calendar > div > small, .fx-cycle span, .fx-week-tabs { font-size: 8px; }
  .fx-intervals b { font-size: 10px; }
  .fx-intervals small, .fx-session-detail .fx-between, .fx-session-detail .fx-between small { font-size: 9px; }
  .fx-finance-summary strong { font-size: 24px; }
  .fx-finance-summary small, .fx-finance-summary span { font-size: 9px; }
  .fx-cash-bars b, .fx-cash-bars small, .fx-payment-confirmation small { font-size: 9px; }
  .fx-payment-confirmation b { font-size: 11px; }
}
@container (max-width: 420px) {
  .fx-team-overview { font-size: 7px; }
  .fx-team-overview strong { font-size: 16px; }
  .fx-student-glance { padding: 9px; gap: 7px; flex-wrap: wrap; }
  .fx-student-glance > span:not(.fx-avatar) { flex-basis: 100%; }
  .fx-student-glance > i { display: none; }
  .fx-session-detail { padding: 10px; }
  .fx-session-detail-heading { font-size: 9px; }
  .fx-session-detail-heading small { display: block; margin: 4px 0 0; }
  .fx-cash-bars { gap: 8px; }
  .fx-cash-bars b { font-size: 6px; }
  .fx-payment-confirmation b { font-size: 8px; }
  .fx-pipeline-summary { font-size: 7px; gap: 12px; }
  .fx-lead-timeline { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .ft-preview-dialog > header { flex-wrap: wrap; gap: 10px; }
  .ft-preview-dialog > header > div { flex: 1; min-width: 0; }
  .ft-preview-dialog header .fx-preview-replay { order: 3; flex-basis: 100%; justify-content: flex-start; margin: 0; padding: 3px 0 10px; }
  .ft-dialog-content :is(.ft-food-scene,.ft-recovery-scene) { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-product-preview] *, [data-product-preview] *::after { animation: none !important; transition: none !important; }
  [data-product-preview] :is(.fx-chart-line,.fx-route-line,.ft-draw) { stroke-dasharray: none; stroke-dashoffset: 0; }
  .fx-preview-replay { display: none !important; }
}