/* Shared controls for the practice room and administration. Keep native select
   behavior for keyboard, screen readers and the iPad selection sheet. */
:root{
 --control-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
 --control-ink:#365344;--control-muted:#7e8d76;--control-border:#dce5d5;
 --control-surface:#fffefa;--control-hover:#f2f6ed;--control-accent:#385f48;
 --control-radius:10px;--control-height:44px;--control-focus:#b79762;
}
body :is(button,input,select,textarea,.file-button){font-family:var(--control-font);-webkit-tap-highlight-color:transparent}
body select:not([multiple]){
 appearance:none;-webkit-appearance:none;min-height:var(--control-height);
 padding:10px 38px 10px 12px;border:1px solid var(--control-border);
 border-radius:var(--control-radius);background-color:var(--control-surface);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23718568' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-position:right 12px center;background-repeat:no-repeat;background-size:16px;
 color:var(--control-ink);font-size:14px;line-height:1.4;font-weight:400;
 max-width:100%;text-overflow:ellipsis;cursor:pointer;box-shadow:0 1px 2px #243e2810;
}
body select:not([multiple]):hover:not(:disabled){border-color:#aebeaa;background-color:var(--control-hover)}
body select option{color:var(--control-ink);background:var(--control-surface)}
body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body textarea:not(#json):not(#recovery-code){
 appearance:none;-webkit-appearance:none;min-height:var(--control-height);padding:10px 12px;
 border:1px solid var(--control-border);border-radius:var(--control-radius);
 color:var(--control-ink);background:var(--control-surface);font-size:15px;line-height:1.4;
 box-shadow:0 1px 2px #243e2810;
}
body input::placeholder,body textarea::placeholder{color:#96a18e;opacity:1}
body input[readonly]{background:#f2f5ed;cursor:text}
body :is(button,.file-button):not(.play):not(.icon-button){border-radius:var(--control-radius)}
body :is(button,.file-button):disabled,body select:disabled,body input:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
body .primary{background:var(--control-accent);border-color:var(--control-accent);color:#fff}
body .primary:hover:not(:disabled){background:#2e503c;border-color:#2e503c;color:#fff}
body :is(button,select,input,textarea,a,.file-button):focus-visible{outline:3px solid var(--control-focus);outline-offset:3px}
body input:is([type=checkbox],[type=radio]){
 appearance:none;-webkit-appearance:none;display:inline-block;position:relative;
 width:20px;height:20px;min-width:20px;min-height:20px;margin:0;flex:0 0 20px;
 padding:0;border:1.5px solid #b7c6ad;border-radius:5px;background:#fffefa;
 vertical-align:middle;cursor:pointer;box-shadow:none;accent-color:var(--control-accent);
}
body input[type=radio]{border-radius:50%}
body input[type=checkbox]:checked{background-color:var(--control-accent);border-color:var(--control-accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.5 10 3.5 3.5 7.5-7.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:100%}
body input[type=checkbox]:indeterminate{background:var(--control-accent);border-color:var(--control-accent)}
body input[type=checkbox]:indeterminate::after{content:'';position:absolute;left:4px;right:4px;top:8px;height:2px;background:#fff;border-radius:2px}
body input[type=radio]:checked{border:6px solid var(--control-accent)}
body input:is([type=checkbox],[type=radio]):hover:not(:disabled){border-color:var(--control-accent)}
body input[type=file]{font-size:14px;color:var(--control-muted);max-width:100%}
body input[type=file]::file-selector-button{font:14px var(--control-font);min-height:44px;padding:9px 14px;margin-right:12px;color:var(--control-ink);background:var(--control-surface);border:1px solid var(--control-border);border-radius:var(--control-radius);cursor:pointer}
#review-choice{font-size:14px;min-height:44px}
@media(pointer:coarse){body select:not([multiple]),body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){font-size:16px}}
@media(forced-colors:active){body select:not([multiple]){appearance:auto;padding-right:12px;background-image:none}body input:is([type=checkbox],[type=radio]){appearance:auto;background-image:none}}
body button{-webkit-appearance:none;appearance:none}
body input[type=number]{min-width:76px}
body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):hover:not(:disabled):not(:focus){border-color:#bdcbb5}
@media(prefers-reduced-motion:no-preference){body :is(button,select,input,textarea,.file-button){transition:border-color .15s,background-color .15s,box-shadow .15s}}
body main.writer-notice{margin:10vh auto;padding:28px;width:min(620px,90vw);background:var(--control-surface);border:1px solid var(--control-border);border-radius:16px}body main.writer-notice h1{font-size:26px;letter-spacing:1px}body main.writer-notice p{font-size:15px;line-height:1.8}