/* Native visual language for setup and choice sheets. */
body[data-screen=create] .site-header .brand img{width:52px;height:52px;filter:none;content:url('/brand/nagi-yogi-mark-dark.svg')}
body[data-screen=create] .brand{gap:12px}body[data-screen=create] .brand span{font-weight:500}
body[data-screen=create] #setup-screen{max-width:620px;gap:24px;padding-bottom:16px}
body[data-screen=create] #class-settings #settings-fields{gap:12px}
body[data-screen=create] #class-settings .field:has(>.setting-choice){position:relative;border:1px solid #eef0d930;border-radius:4px;background:#18241e7a;margin:0;min-width:0}
body[data-screen=create] #class-settings .field:has(>.setting-choice)>label{position:absolute;top:9px;left:12px;z-index:1;font-size:12px;line-height:1.3;margin:0;pointer-events:none}
body[data-screen=create] #class-settings .field>.setting-choice{min-height:76px;height:auto;border:0;background:none;padding:28px 12px 10px;width:100%;border-radius:4px;line-height:1.2}
body[data-screen=create] #class-settings .field>.setting-choice strong{font-size:25px;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:block}
body[data-screen=create] .pace-voice-row,body[data-screen=create] .setup-audio-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body[data-screen=create] #class-settings .setup-audio-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
body[data-screen=create] #class-settings .additions>.check-row{height:70px;min-height:70px}
body[data-screen=create] #class-settings #peak-card .setting-choice{height:68px}
body[data-screen=create] #class-settings .check-row strong{font-size:25px}
body[data-screen=create] #class-settings .check-mark{border-radius:4px;box-shadow:none}
.setup-music-choice{position:relative;display:flex;flex-direction:column;justify-content:center;text-decoration:none;min-height:76px;min-width:0;border:1px solid #eef0d930;background:#18241e7a;border-radius:4px;padding:9px 34px 10px 12px;color:#fff9ec;line-height:1.3;gap:5px}
.setup-music-choice .setup-label{font-size:12px;color:#d3d7c8}.setup-music-choice strong{font-size:23px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setup-music-choice .choice-chevron{position:absolute;right:12px;top:50%}
body[data-screen=create] #class-settings #generate{min-height:68px;font-size:27px;position:relative;overflow:hidden;background:#e4edb8;transition:background .2s}
body[data-screen=create] #class-settings #generate:not(:disabled)::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,#fffbdc55,transparent 70%);animation:setup-action-glow 3.2s ease-in-out infinite;pointer-events:none}
body[data-screen=create] #class-settings .setting-choice:hover,body[data-screen=create] .setup-music-choice:hover{background:#e3e9cd12}
.setup-navigation{display:flex;justify-content:center;gap:4px;border:1px solid #eef0d922;border-radius:40px;background:#18241e7a;align-self:center;padding:5px;margin:0 auto}
.setup-navigation a{min-width:100px;padding:8px 20px;border-radius:30px;text-align:center;text-decoration:none;color:#d3d7c8;font-size:24px;line-height:1.1}.setup-navigation a span{display:block;font-size:12px;margin-top:5px}.setup-navigation a[aria-current=page]{background:#e3e9cd30;color:#fff9ec}
.choice-sheet,.refinements-dialog{background:#f7f7ee;border-radius:4px;color:#23473b;border:1px solid #d8dece;box-shadow:0 24px 80px #0004;padding:26px}
.choice-sheet h2,.refinements-dialog h2{font:400 30px/1.2 Georgia,serif}.choice-sheet .choice-option{border-radius:4px;border:1px solid #23473b18;background:white;padding:16px;text-align:left;min-height:64px}.choice-sheet .choice-option[aria-selected=true],.choice-sheet .choice-option[aria-pressed=true]{background:#e2ebcf;border-color:#23473b40}.choice-sheet .choice-symbol:has(:not(img)){display:none}.choice-sheet .choice-check{border-radius:4px}.choice-sheet .choice-copy strong{font-weight:400}
.choice-sheet .choice-close,.soundtrack-dialog-close{border:0;background:none;border-radius:4px;font-size:26px;min-width:44px;min-height:44px}.refinements-dialog .secondary{border-radius:4px;background:#23473b;color:#fff9ec;min-height:44px}
@keyframes setup-action-glow{0%,100%{opacity:.15}50%{opacity:.6}}
@media(max-width:800px){
 body[data-screen=create] .site-header .brand img{width:44px;height:44px;content:url('/brand/nagi-yogi-mark.svg')}
 body[data-screen=create] #setup-screen{padding-top:clamp(96px,18svh,190px);gap:18px;max-width:560px}
 body[data-screen=create] #class-settings .field>.setting-choice{min-height:65px;padding-top:26px}
 body[data-screen=create] #class-settings .field>.setting-choice strong,body[data-screen=create] #class-settings .check-row strong{font-size:21px}
 body[data-screen=create] #class-settings .additions>.check-row{height:60px;min-height:60px}body[data-screen=create] #class-settings #peak-card .setting-choice{height:58px}
 .setup-music-choice{min-height:65px}.setup-music-choice strong{font-size:20px}
 body[data-screen=create] #class-settings #generate{min-height:62px;font-size:24px}
 body[data-screen=create] #class-settings #settings-fields{gap:10px}
}
@media(max-width:380px){body[data-screen=create]>.site-header{padding:0 16px}body[data-screen=create]>main{padding-left:16px;padding-right:16px}.web-welcome h1{font-size:30px!important}.setup-music-choice strong{font-size:17px}}
/* Full-screen preparation matches the native room and six-second pulse. */
.class-player-dialog:has(.preparation-screen:not([hidden])) .player-header{position:absolute;inset:16px max(24px,env(safe-area-inset-right)) auto auto;height:44px;padding:0;z-index:20;background:none;color:#fff9ec}
.class-player-dialog:has(.preparation-screen:not([hidden])) .player-header>span{display:none}
.class-player-dialog:has(.preparation-screen:not([hidden])) .player-header button{font-size:0;width:44px;height:44px;min-width:44px;padding:0;border:0;background:none;color:#fff9ec;box-shadow:none}
.class-player-dialog:has(.preparation-screen:not([hidden])) .player-header button::after{content:'×';font-size:32px;font-weight:300}
.class-player-dialog:has(.preparation-screen:not([hidden])) .class-player{position:absolute;inset:0;height:100%;width:100%;padding:0}
.class-player-dialog .preparation-screen{inset:0;background:linear-gradient(#222c24e0,#222c24e0),url('/images/preparation-room.jpg') center/cover;color:#fff9ec;gap:16px;padding:20px 20px 64px}
.class-player-dialog .preparation-screen h2{font:400 clamp(34px,4vw,46px)/1.15 Georgia,serif;animation:none;letter-spacing:-1px}
.class-player-dialog .preparation-screen p{color:#d3d7c8;font-size:16px;line-height:1.5;max-width:330px;min-height:3em}
.class-player-dialog .preparation-screen .loading-orbit{width:104px;height:104px;margin:0 0 12px;position:relative;flex:none;animation:none}
.class-player-dialog .preparation-screen .loading-orbit i{display:none}
.class-player-dialog .preparation-screen .loading-orbit::before{content:'';position:absolute;inset:0;border:2px solid #fff9ec;box-sizing:border-box;border-radius:50%;animation:nagi-halo 6s ease-in-out infinite}
.class-player-dialog .preparation-screen .loading-orbit::after{content:'';position:absolute;inset:0;background:url('/brand/nagi-yogi-mark-dark.svg') center/contain no-repeat;animation:nagi-mark 6s ease-in-out infinite}
.preparation-wave{display:flex;gap:6px;align-items:center;position:absolute;bottom:max(22px,env(safe-area-inset-bottom));height:18px}
.preparation-wave i{display:block;width:4px;height:18px;border-radius:3px;background:#fff9ecb3;animation:nagi-wave 1.3s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes nagi-halo{0%,100%{transform:scale(.85);opacity:.3}50%{transform:scale(1.6);opacity:.04}}
@keyframes nagi-mark{0%,100%{transform:translateY(5px) scale(.82);opacity:.6}50%{transform:translateY(-5px) scale(1.18);opacity:1}}
@keyframes nagi-wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@media(max-height:500px){.class-player-dialog .preparation-screen .loading-orbit{width:76px;height:76px;margin:0}.class-player-dialog .preparation-screen{gap:12px}.class-player-dialog .preparation-screen h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){#generate::after,.class-player-dialog .preparation-screen .loading-orbit::after,.preparation-wave i{animation:none!important}.class-player-dialog .preparation-screen .loading-orbit::before{display:none}.preparation-wave i{transform:scaleY(.4)}}

body[data-screen=create] #class-settings #generate{text-align:center;display:block;width:100%}
body[data-screen=create] #class-settings .check-row input:checked~.check-mark{background:#e3e9cd;border-color:#e3e9cd;color:#23473b}

body[data-screen=create] #class-settings .check-row:has(input:checked) .check-mark::after{color:#23473b}


/* History replaces the form inside the same practice shell. */
.setup-navigation{position:sticky;bottom:0;z-index:4;background:#26362cf5;box-shadow:0 8px 32px #0002;flex-shrink:0}
body[data-screen=create] #history-dialog{width:100%;max-width:none;padding:0;margin:0;border:0;background:none;color:#fff9ec;overflow:visible;height:auto;max-height:none}
#history-dialog>.dialog-heading{margin:0 0 12px;padding:5px 0 0}
#history-dialog .eyebrow{color:#d2d8b6;font-size:10px;letter-spacing:2px;margin-bottom:14px}
#history-dialog h2{font:400 clamp(36px,3.8vw,50px)/1.08 Georgia,serif;letter-spacing:-1.4px;color:#fff9ec;margin:0}
#history-dialog .field-note{color:#d3d7c8}
#history-dialog .history-stats{gap:10px;margin:20px 0}
#history-dialog .history-stat{background:#18241e7a;border:1px solid #eef0d930;border-radius:12px;padding:16px 10px;color:#fff9ec}
#history-dialog .history-stat strong{font:400 30px Georgia,serif;color:#e4edb8}
#history-dialog .history-stat span{color:#d3d7c8;font-size:11px}
#history-dialog .history-filters{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;margin:18px 0}
#history-dialog .history-filters label{color:#d3d7c8;font-size:12px}
#history-dialog .history-filters input,#history-dialog .history-filters select{width:100%;min-width:0;background:#223328;border:1px solid #eef0d930;color:#fff9ec;border-radius:8px;min-height:44px;padding:10px;font-size:14px}
#history-dialog input::placeholder{color:#bac4b6}
#history-list{display:grid;gap:12px}
#history-dialog .history-row{margin:0;padding:20px;border:1px solid #eef0d930;background:#18241ed9;border-radius:14px}
#history-dialog .history-row h3{font:400 26px/1.15 Georgia,serif;color:#fff9ec;margin:14px 0 10px;letter-spacing:-.4px}
#history-dialog .history-row-head{gap:8px;flex-wrap:wrap}
#history-dialog .history-badge{background:#e4edb818;color:#e4edb8;border-radius:20px;font-size:11px;padding:6px 10px}
#history-dialog .history-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px}
#history-dialog .history-actions>.secondary,#history-dialog .history-empty .secondary{background:#e4edb8;color:#23473b;border:0;border-radius:8px;min-height:44px;padding:12px 18px}
#history-dialog .text-button{color:#d3d7c8;font-size:12px;min-height:44px}
.history-info-open{margin:12px 0 0}
.history-empty{text-align:center;padding:30px 20px;background:#18241e7a;border:1px solid #eef0d930;border-radius:14px}
.history-empty-mark{font-size:38px;color:#e4edb8}
.history-empty h3{font:400 28px Georgia,serif;margin:14px 0}
.history-empty p{font-size:14px;line-height:1.6;color:#d3d7c8;margin-bottom:20px}
body[data-view=history] #history-dialog:not([hidden]){animation:history-arrive .22s ease-out}
@keyframes history-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body[data-view=history] #history-dialog:not([hidden]){animation:none}}