/* Keep the everyday choices visible and the optional refinements one tap away. */
.practice-refinements { border-top: 1px solid #dce3d5; padding-top: 20px; margin: 22px 0 8px; }
.practice-refinements > summary { cursor: pointer; color: #26483d; font-weight: 650; padding: 8px 0; }
.practice-refinements > summary span { display: block; font-size: .78rem; color: #64745e; font-weight: 400; margin: 5px 0 0 16px; }
.practice-refinements[open] > summary { margin-bottom: 18px; }
.check-row[hidden], .custom-duration[hidden] { display: none !important; }
.setup-heading { margin-bottom: 32px; }
.setup-heading h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.settings .panel-heading { margin-bottom: 24px; }
.duration-presets button { min-height: 52px; font-size: 1.05rem; }
.practice-preview.panel { padding: 0; overflow: hidden; background: #f7f9f2; }
.practice-preview-photo { position: relative; height: 225px; background: #ebece5; overflow: hidden; }
.practice-preview-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 64%; }
.practice-preview-body { padding: 30px; }
.practice-preview .panel-heading { margin-bottom: 24px; }
.practice-preview .panel-heading h2 { font-size: clamp(27px, 2.5vw, 36px); margin: 12px 0; }
.practice-preview .panel-heading p { font-size: 14px; line-height: 1.6; }
.practice-preview-phase { position: relative; display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; padding: 0 0 26px; }
.practice-preview-phase:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 13px; bottom: 0; width: 1px; background: #d3ddc8; }
.practice-preview-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #67835b; }
.practice-preview-copy strong { display: block; font-size: 16px; font-weight: 600; }
.practice-preview-copy p { margin: 6px 0 0; color: #62715d; font-size: 13px; line-height: 1.5; }
.practice-preview-time { font-size: 12px; color: #62715d; padding-top: 3px; white-space: nowrap; }
.practice-preview-highlight { display: inline-block; margin-top: 9px; border-radius: 6px; padding: 5px 8px; font-size: 11px; color: #35553d; background: #e8efdf; }
.practice-preview-note { border-top: 1px solid #dde5d6; padding-top: 17px; margin: 0; color: #75806d; font-size: 11px; line-height: 1.6; }
@media (max-width: 720px) {
  .practice-preview-body { padding: 24px; }
  .practice-preview-photo { height: 180px; }
  .setup-heading { margin-bottom: 24px; }
  .practice-refinements > summary { min-height: 44px; }
}

.soundtrack-dialog { width: min(760px, calc(100vw - 32px)); height: min(850px, calc(100dvh - 40px)); max-width: none; max-height: none; border: 0; padding: 0; border-radius: 24px; background: #f7f9f2; box-shadow: 0 24px 100px #142a3455; overflow: hidden; }
.soundtrack-dialog::backdrop { background: #122d27a6; backdrop-filter: blur(8px); }
.soundtrack-dialog iframe { width: 100%; height: calc(100% - 60px); display: block; border: 0; background: #f7f9f2; }
.soundtrack-dialog-close { display: block; margin: 10px 16px 6px auto; min-height: 44px; border: 0; border-radius: 22px; background: #203e36; color: white; padding: 10px 20px; cursor: pointer; }

/* Breathe gently while the generator is working; hiding the panel stops it. */
#loading:not([hidden]) h2, .preparation-screen:not([hidden]) h2 {
  animation: finding-flow-pulse 2s ease-in-out infinite;
}
@keyframes finding-flow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  #loading:not([hidden]) h2, .preparation-screen:not([hidden]) h2 { animation: none; }
}

.practice-class-screen { max-width: 1100px; margin: auto; }
.practice-class-screen > .text-button { margin-bottom: 18px; }
.practice-class-screen #loading:not([hidden]) {
  min-height: min(680px, 75dvh); padding: 48px 24px; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; text-align: center; border-radius: 28px; overflow: hidden;
  background: linear-gradient(#f7f5edd9, #f7f5edb8), url('/images/practice-space-v1.jpg') center / cover;
}
.practice-class-screen #loading h2 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -.04em; outline: none; }
.practice-class-screen #loading p { max-width: 440px; margin: 12px auto; }
.practice-class-screen #loading .field-note { color: #4f6255; }
.practice-class-screen #result[hidden] { display: none; }

/* One visual treatment from class generation through the first playing frame. */
.class-player-dialog .preparation-screen {
  background: linear-gradient(#f7f5edd9, #f7f5edb8), url('/images/practice-space-v1.jpg') center / cover;
  color: #203e36;
}
.class-player-dialog .preparation-screen h2 { font: inherit; font-size: clamp(32px, 5vw, 56px); font-weight: 600; letter-spacing: -.04em; }
.class-player-dialog .preparation-screen p { color: #4f6255; }
.class-player-dialog .preparation-screen .preparation-elapsed { display: none; }
.loading-orbit i { border-color: #68895799; border-width: 2px; }
.class-player-dialog .preparation-screen .loading-orbit { width: 110px; height: 110px; margin: 15px; }

.class-player-dialog:has(.preparation-screen:not([hidden])) .player-header { color: #203e36; background: #f7f5ed; }
.class-player-dialog:has(.preparation-screen:not([hidden])) .player-header button { color: #203e36; background: #f7f5edcc; }

.soundtrack-dialog-close { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #dce3d5; color: #203e36; background: transparent; font-size: 20px; }