/* Additions use the existing cream paper dialog and unobtrusive controls. */
#reader-settings-dialog{max-width:530px}
#reader-settings-dialog h2{font-size:27px}
.reading-controls{border:0;padding:0;margin:22px 0 26px;min-width:0}
.reading-controls legend{font-size:16px;font-weight:700;margin-bottom:11px}
.reading-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.reading-option{position:relative;display:block;cursor:pointer}
.reading-option input{position:absolute;opacity:0;width:1px;height:1px}
.reading-option span{display:flex;flex-direction:column;justify-content:center;min-height:86px;padding:12px 8px;text-align:center;border:1px solid #d8dcc4;border-radius:16px;background:#f3f2e4;line-height:1.7;font-size:13px}
.reading-option small{display:block;font-size:10px;font-weight:400;color:#62765e;margin-top:4px}
.reading-option input:checked+span{background:#285d46;color:#fffcef;border-color:#285d46;box-shadow:0 0 0 2px #285d4620}
.reading-option input:checked+span small{color:#e5edda}
.reading-option input:focus-visible+span{outline:3px solid #a95435;outline-offset:3px}
.reading-example{font-variant-numeric:tabular-nums}
.reading-option[data-example=large] strong{font-size:18px}
.reading-option[data-example=largest] strong{font-size:22px}
.reading-note{font-size:12px!important;line-height:1.8;color:#62765e}
.reading-motion{display:flex;align-items:center;gap:11px;border:1px solid #d8dcc4;border-radius:16px;padding:12px 16px;background:#f3f2e4;font-size:13px;min-height:49px;text-align:left}
.reading-motion[aria-pressed=true]{background:#285d46;color:#fffcef}
.reading-motion[aria-pressed=true]:after{content:'เปิดอยู่';margin-left:auto;font-size:11px}
#reader-settings-status{font-size:12px;min-height:24px;color:#5d7357}
.settings-shortcut{background:#eaf0dd;border:1px solid #d4dec1;padding:8px 12px;border-radius:20px;font-size:12px;min-height:40px;margin:6px 0 8px;display:inline-flex;align-items:center;gap:6px}
#detail-dialog .plan-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border-radius:9px}
#detail-dialog .plan-table-scroll:focus-visible{outline:3px solid #9f512e;outline-offset:2px}
#detail-dialog .number-scroll-note{display:none}
html[data-number-size=large] #detail-dialog .plan-targets{min-width:350px}
html[data-number-size=largest] #detail-dialog .plan-targets{min-width:430px}
html[data-number-size=large] #detail-dialog .plan-targets th,html[data-number-size=large] #detail-dialog .plan-targets td{font-size:16px;white-space:nowrap;padding:12px 8px}
html[data-number-size=largest] #detail-dialog .plan-targets th,html[data-number-size=largest] #detail-dialog .plan-targets td{font-size:20px;white-space:nowrap;padding:13px 8px}
html[data-number-size=large] #detail-dialog .plan-baseline strong{font-size:17px}
html[data-number-size=largest] #detail-dialog .plan-baseline strong{font-size:21px}
html:not([data-number-size=original]) #detail-dialog .number-scroll-note{display:block;font-size:11px;color:#6b775e;margin:6px 0 14px}
.dialog-top{position:sticky;top:-28px;z-index:4;background:#fffcef;padding:8px 0;margin-top:-8px}
.reader-nav{transition:transform .2s ease,opacity .2s ease}
@media(max-width:600px){
 #reader-settings-dialog{padding:23px 19px}
 #reader-settings-dialog h2{font-size:24px}
 .reading-controls legend{font-size:15px}.reading-option span{font-size:12px;padding:11px 5px}.reading-option small{font-size:9px}
 .reading-option[data-example=large] strong{font-size:17px}.reading-option[data-example=largest] strong{font-size:20px}
 .dialog-top{top:-23px}.dialog-top .eyebrow{max-width:calc(100% - 55px);font-size:10px}
 html[data-number-size=large] #detail-dialog .plan-targets th,html[data-number-size=large] #detail-dialog .plan-targets td{font-size:15px}
 html[data-number-size=largest] #detail-dialog .plan-targets th,html[data-number-size=largest] #detail-dialog .plan-targets td{font-size:19px}
 .reader-nav.nav-reading{transform:translate(-50%,130px);opacity:0;pointer-events:none}
 .reader-nav.nav-reading:focus-within{transform:translate(-50%,0);opacity:1;pointer-events:auto}
}