@import url('/tools/flashcard-assets/style.css');
main{padding-top:1.5rem}.heading{margin-bottom:1.5rem}.heading h1{font-size:clamp(2.6rem,4.5vw,3.5rem)}
.picker-workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:2rem;border-top:3px solid var(--ink);padding-top:1.5rem;align-items:start}.setup{border:0;padding:0;min-width:0}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:.75rem}.section-heading h2{margin:0}.section-heading button{font-size:.9rem;flex:none}.setup label{margin:.7rem 0 .25rem}.setup select,.setup input{margin-top:.25rem}.setup #names{margin:.5rem 0}.setup>.hint{margin:.5rem 0}.setup details,.picker-side details,.use-help{border-top:1px solid var(--rule);padding-top:.8rem;margin-top:1rem}.setup details>p{margin:.65rem 0}.setup summary,.picker-side summary,.use-help summary{cursor:pointer;font-weight:600;min-height:44px;display:list-item;padding:.45rem 0}summary:focus-visible,#screen:focus-visible{outline:3px solid #1261a0;outline-offset:3px}.summary-hint{font-weight:400;color:var(--muted);font-size:.9rem}.check{display:flex!important;align-items:start;gap:.65rem;font-weight:400}.check input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:none;margin:.18rem 0 0;accent-color:var(--red)}.roster-head{display:flex;align-items:center;gap:.5rem;justify-content:space-between}.roster-head button{font-size:.85rem;white-space:nowrap}.roster{list-style:none;margin:.3rem 0 0;padding:0;max-height:310px;overflow:auto}.roster li{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #e4e6e8;padding:.2rem 0}.roster label{margin:0;flex:1;min-width:0;align-items:center;min-height:44px}.roster label span{overflow-wrap:anywhere}.roster button{font-size:.85rem;min-height:44px;min-width:44px;padding:.3rem}.roster .row-state{display:block;color:var(--muted);font-size:.8rem}.roster li.absent label span{color:var(--muted)}.roster li.absent .name{text-decoration:line-through}.picker-side{min-width:0}#screen{background:#f5f5f2;border:1px solid #d5d6d2;padding:1.1rem 1.6rem 1.3rem;container-type:inline-size}.screen-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}.screen-top .eyebrow{overflow-wrap:anywhere}.screen-top button{font-size:.9rem;flex:none}.result-space{min-height:210px;display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.1rem 0}.result-space #result{min-width:0;width:100%;text-align:center}.empty-result{font:400 clamp(2rem,7cqw,4rem)/1.2 var(--reading);color:#717873}#result .selected-name{font:400 clamp(2.5rem,10cqw,5rem)/1.12 var(--reading);overflow-wrap:anywhere}#result .selected-list{list-style-position:inside;padding:0;margin:0;text-align:left;font:400 clamp(1.5rem,5cqw,2.4rem)/1.35 var(--reading);max-height:300px;overflow:auto;overflow-wrap:anywhere}#result .selected-list li{padding:.25rem 0;border-bottom:1px solid #d8ddd7}#result .later-label{font:400 1rem var(--ui);color:var(--muted);margin-top:.5rem}#pool-status{text-align:center;font-size:1rem;margin:.4rem 0 1rem;min-height:1.5em}.main-controls,.secondary-controls{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap}.main-controls .primary{min-width:200px;font-size:1.3rem}.secondary-controls{margin:.8rem 0 .3rem}.secondary-controls button{font-size:.95rem;background:transparent}.secondary-controls button:hover{background:#e9ece7}#pick-rule{text-align:center;margin:.8rem 0 0;font-size:.85rem}#screen-notice{text-align:center;margin-top:.5rem}#screen-notice:empty{display:none}#screen-notice.error{color:var(--red)}.keyboard-help{font-size:.85rem;margin:.7rem 0}#history-details{margin-top:1.4rem}#history-details .hint{margin:.4rem 0}#history{padding-left:1.5rem;max-height:240px;overflow:auto;overflow-wrap:anywhere}#history li{padding:.3rem 0}#notice{margin:.65rem 0;min-height:0}#notice:empty{display:none}.use-help{margin-top:2rem}.use-help p{max-width:80ch;color:var(--muted);font-size:1rem;margin:.75rem 0}.file-help .actions{gap:1rem}.file-help button{font-size:.9rem}.setup #save-details .actions{margin:.6rem 0}.setup #save-status{color:var(--green);overflow-wrap:anywhere}.setup #save-status.error{color:var(--red)}
/* Keep list entry separate from the list that is ready to use. */
.setup #roster-details{border:0;margin:0;padding:0}.setup #roster-details summary{padding-top:0;min-height:32px}.roster-head .hint{font-size:.9rem}.roster{max-height:290px;margin-bottom:.75rem;overscroll-behavior:contain}
.setup #entry-details{margin:.8rem 0 0;padding:0;border:1px solid var(--rule)}.setup #entry-details>summary{padding:.65rem .8rem;background:var(--soft);font-size:1rem}.entry-body{padding:.25rem .8rem .8rem}.entry-body #names-label{margin-top:.55rem}.entry-body #names{margin:.4rem 0 .15rem}.entry-body .actions{margin-top:.75rem}.entry-links{display:flex;justify-content:space-between;gap:.6rem;margin-top:.25rem}.entry-links button{font-size:.9rem}.file-help summary,.storage-help summary{font-size:.9rem;font-weight:400!important}.file-help p{font-size:.9rem}.file-help button{min-height:44px}#draft-status{color:#8a4b13;margin-top:.5rem}#notice{font-size:.94rem;overflow-wrap:anywhere}#notice.error{color:var(--red)}.setup #save-details{margin-top:.75rem}#save-details>label{margin-top:.65rem}.save-help{margin:.6rem 0 1rem!important}.backup-actions{border-top:1px solid var(--rule);padding-top:.85rem!important;margin-top:1rem!important}.setup .storage-help{margin-top:.7rem;padding-top:.25rem}.storage-help .hint{margin:.5rem 0}
.draw-settings{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:.65rem 1rem;margin:0 0 1rem}.draw-settings label{min-width:0}.draw-settings select{margin-top:.3rem}#effect-help{grid-column:1/-1;margin:0;font-size:.9rem}.picker-side #options{padding-top:.35rem;margin-top:.7rem}.picker-side #options .check{margin:.6rem 0}.sound-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.sound-row button{font-size:.9rem}#review-draft{display:block;margin:.5rem auto 0;font-size:.95rem}.secondary-controls button{min-height:44px}.main-controls #later{font-size:.95rem}.picker-side #history-details{margin-top:.7rem;padding-top:.35rem}dialog{max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain}
#wheel-area{position:relative;width:180px;max-width:45%;flex:none;align-self:center}.pointer{position:absolute;left:calc(50% - 8px);top:-5px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:18px solid var(--ink);z-index:1}#wheel{width:100%;display:block;overflow:visible}#screen.wheel-on .result-space{min-height:230px}#screen.wheel-on #result .selected-name{font-size:clamp(2rem,6.5cqw,3.8rem)}.spinning #result{opacity:.7}#screen[aria-busy=true] .main-controls .primary{cursor:progress}#screen .loading-dots{font-size:3rem;animation:pulse .7s ease-in-out infinite alternate}@keyframes pulse{to{opacity:.25}}
body.presenting{overflow:hidden}body.presenting #screen{position:fixed;inset:0;z-index:50;border:0;container-type:normal;padding:max(1rem,env(safe-area-inset-top)) max(1rem,calc((100vw - 1200px)/2));height:100dvh;display:flex;flex-direction:column;overflow:auto}body.presenting .result-space{flex:1;min-height:100px;padding:1rem 0}body.presenting #result .selected-name{font-size:clamp(3rem,min(12vw,18vh),10rem)}body.presenting #result .empty-result{font-size:clamp(2rem,8vw,6rem)}body.presenting #result .selected-list{max-height:45dvh;font-size:clamp(1.5rem,4vw,3rem)}body.presenting #wheel-area{width:min(35vw,40vh,400px)}body.presenting #pool-status{margin:.4rem 0}body.presenting .secondary-controls{margin-top:.6rem}body.presenting #pick-rule{margin:.5rem 0}body.presenting #screen .screen-top{flex:none}
@media(max-width:1000px){.picker-workspace{grid-template-columns:300px minmax(0,1fr);gap:1.5rem}#screen{padding:1rem}.screen-top{gap:.5rem}#wheel-area{width:130px}}
@media(max-width:740px){.picker-workspace{display:flex;flex-direction:column;gap:1.3rem}.setup,.picker-side{width:100%}.picker-side{order:-1}.result-space{min-height:145px}.heading .intro{max-width:43ch}#screen{padding:1rem}.section-heading{margin-top:.2rem}#screen .screen-top .eyebrow{font-size:.65rem}.keyboard-help{display:none}.main-controls .primary{min-width:180px}.roster{max-height:280px}#screen.wheel-on .result-space{min-height:175px}#wheel-area{width:120px}.tool-feedback p{overflow-wrap:anywhere}}
@media(orientation:landscape) and (max-height:500px){body.presenting #screen{padding:.5rem 1rem;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto auto;gap:.4rem 1rem}body.presenting .screen-top{grid-column:1/-1}body.presenting .result-space{grid-row:2/5;grid-column:1;padding:0}body.presenting #pool-status{grid-column:2;align-self:end}body.presenting .main-controls,body.presenting .secondary-controls{grid-column:2;margin:0}body.presenting #pick-rule,body.presenting #screen-notice{display:none}body.presenting #result .selected-name{font-size:clamp(2rem,9vw,4rem)}body.presenting #wheel-area{width:100px}body.presenting #result .selected-list{max-height:48dvh;font-size:1.6rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:740px){body:not(.has-names) .picker-side{order:0}}
@media print{body>*{display:none!important}main{display:block!important}main>*{display:none!important}.picker-workspace{display:block!important}.picker-workspace>*{display:none!important}.picker-side{display:block!important}.picker-side>*{display:none!important}#history-details{display:block!important}#history-details>*{display:none!important}#history-details summary,#history{display:block!important}#history{max-height:none}}

@media(max-width:740px){.draw-settings{gap:.65rem}.draw-settings select{font-size:.96rem}.setup #roster-details{margin-top:.5rem}.picker-workspace{gap:1.6rem}#screen .empty-result{font-size:2.25rem}.entry-body .actions button{flex:1}}
/* Wheel display: keep the wheel and selected name in one clear group. */
#screen.wheel-on .result-space{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.4rem;max-width:1040px;margin-inline:auto;min-height:330px;padding:1.5rem .25rem}
#wheel-area{width:100%;max-width:340px;justify-self:center;aspect-ratio:1;border-radius:50%;background:#fff;border:6px solid #fff;box-shadow:0 0 0 1px #c7cbc7,0 7px 18px #1e30231c}
#wheel{width:100%;height:100%;border-radius:50%;overflow:visible;transform-origin:50% 50%}
.pointer{left:calc(50% - 13px);top:-15px;border-left:13px solid transparent;border-right:13px solid transparent;border-top:28px solid #242927;filter:drop-shadow(0 2px 0 #ffffff);z-index:2}
.wheel-hub{position:absolute;inset:calc(50% - 24px);border-radius:50%;background:#fffdf7;box-shadow:0 0 0 2px #ffffffb8,0 2px 7px #0003;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1;pointer-events:none;font:600 17px var(--ui);color:var(--ink)}
.wheel-hub small{font:400 9px var(--ui)}
#wheel .chosen-segment>path,#wheel .chosen-segment>circle{stroke:#fff8d8;stroke-width:3;stroke-linejoin:round}
.wheel-settled #wheel g:not(.chosen-segment){filter:saturate(.65)}
.result-label{font:600 .8rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .65rem}
#screen.wheel-on #result{width:auto}#screen.wheel-on #result .selected-name{font-size:clamp(2.2rem,7cqw,4.5rem)}
#screen .loading-dots{font:400 clamp(1.6rem,4cqw,2.5rem) var(--reading)}
.chime-controls{display:flex;align-items:end;gap:.75rem;margin:.5rem 0 1rem}.chime-controls label{flex:1;max-width:280px}.chime-controls select{margin-top:.35rem}.chime-controls button{flex:none}
body.presenting #screen.wheel-on .result-space{width:100%;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1rem,4vw,4rem);padding:1.5rem 1rem;min-height:0;max-width:1180px}
body.presenting #wheel-area{width:min(46vw,56dvh,560px);max-width:100%}
body.presenting .wheel-hub{inset:calc(50% - 32px);font-size:23px}body.presenting .wheel-hub small{font-size:12px}
body.presenting #screen.wheel-on #result .selected-name{font-size:clamp(3rem,7vw,7rem)}
body.presenting .result-label{font-size:1rem}
@media(max-width:740px){
 #screen.wheel-on .result-space{grid-template-columns:1fr;gap:1rem;padding:1.25rem 0;min-height:0}
 #wheel-area{width:min(72vw,290px);max-width:100%}
 #screen.wheel-on #result .selected-name{font-size:2.5rem}.result-label{margin-bottom:.35rem}
 body.presenting #screen.wheel-on .result-space{grid-template-columns:1fr;align-content:center;gap:.8rem;padding:.8rem 0}
 body.presenting #wheel-area{width:min(72vw,38dvh,350px)}
 body.presenting #screen.wheel-on #result .selected-name{font-size:clamp(2.3rem,9vw,4rem)}
 body.presenting .wheel-hub{inset:calc(50% - 24px);font-size:17px}body.presenting .wheel-hub small{font-size:9px}
}
@media(orientation:landscape) and (max-height:500px){
 body.presenting #screen.wheel-on .result-space{grid-template-columns:1fr;align-content:center;gap:.35rem;padding:0}
 body.presenting #wheel-area{width:min(43dvh,210px)}
 body.presenting #screen.wheel-on #result .selected-name{font-size:clamp(1.8rem,5vw,2.6rem)}
 body.presenting .result-label{display:none}body.presenting .wheel-hub{inset:calc(50% - 18px);font-size:14px}body.presenting .wheel-hub small{font-size:8px}
}