/* Canonical reader panel, extracted from the approved Writing menu.
   Trigger layout and read-aloud highlights remain the host's responsibility. */
#ed-voice-popover.ss-reader-menu {
  --reader-paper:#fffdf9;--reader-ink:#5d544d;--reader-line:#dcded8;--reader-soft:#edf2ef;--reader-accent:#4a7a68;
  box-sizing:border-box;position:fixed;inset:auto;margin:0;width:264px;max-width:calc(100vw - 24px);padding:8px;
  overflow-y:auto;overscroll-behavior:contain;border:1px solid #e6e0d8;border-radius:18px;
  background:var(--reader-paper);color:var(--reader-ink);box-shadow:0 16px 38px #43362c2e;
  font:400 14px/1.4 Inter,system-ui,sans-serif;text-align:start;z-index:10000;
}
#ed-voice-popover.ss-reader-menu[hidden],.ss-reader-tooltip[hidden]{display:none!important}
.ss-reader-menu *{box-sizing:border-box}
.ss-reader-menu button{font:inherit;color:inherit;border:0;margin:0;cursor:pointer;touch-action:manipulation}
.ss-reader-menu button:focus-visible{outline:none!important;text-decoration:underline;text-underline-offset:4px}
.ss-reader-voices{display:flex;flex-direction:column;gap:3px}
.ss-reader-voice-row{position:relative;display:flex;align-items:center;min-height:44px;padding-inline-start:48px;border-radius:11px;transition:background .18s ease}
.ss-reader-voice-row:hover{background:#efefed}
.ss-reader-voice-row.active{background:var(--reader-soft)}
.ss-reader-menu .ss-reader-voice{position:relative;display:flex;align-items:center;align-self:stretch;flex:1;min-width:0;min-height:44px;padding:0 30px 0 0;border-radius:11px;background:transparent;text-align:start;font-size:13px;font-weight:500}
.ss-reader-menu[dir="rtl"] .ss-reader-voice{padding:0 0 0 30px}
.ss-reader-menu .ss-reader-voice:focus-visible{background:var(--reader-soft)}
.ss-reader-voice-row.active .ss-reader-voice{color:#3d6758;font-weight:700}
.ss-reader-check{position:absolute;inset-inline-end:12px;width:15px;height:15px;opacity:0;color:var(--reader-accent)}
.ss-reader-voice-row.active .ss-reader-check{opacity:1}
.ss-reader-menu .ss-reader-preview{position:absolute;top:50%;inset-inline-start:10px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid #4a7a68;border-radius:50%;background:#eaf1ed;color:#386751;transform:translateY(-50%)}
.ss-reader-voice-row.active .ss-reader-preview{background:#fffdf8}
.ss-reader-menu .ss-reader-preview:hover,.ss-reader-menu .ss-reader-preview.playing{background:#467c6b;color:#fffdf8}
.ss-reader-menu .ss-reader-preview:focus-visible{border-width:2px}
.ss-reader-preview svg{width:12px;height:12px}
.ss-reader-wave{position:absolute;inset:0;border:2px solid var(--reader-accent);border-radius:50%;opacity:0;pointer-events:none}
.ss-reader-preview.playing .ss-reader-wave{animation:ssReaderWave 1.4s ease-out infinite}
@keyframes ssReaderWave{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.ss-reader-mode{min-width:0;border:0;border-top:1px solid var(--reader-line);margin:8px 0 0;padding:12px 10px 8px}
.ss-reader-mode legend{float:left;width:100%;padding:0 0 8px;font-size:14px;font-weight:600;line-height:1.4}
.ss-reader-modes{clear:both;display:flex;gap:3px;padding:3px;border:1px solid #e7dfd4;border-radius:10px;background:#f2eee8}
.ss-reader-mode-choice{position:relative;flex:1;min-width:0;margin:0;cursor:pointer}
.ss-reader-mode-choice input,.ss-reader-color-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ss-reader-mode-choice span{display:flex;align-items:center;justify-content:center;min-height:44px;height:100%;padding:5px 3px;border-radius:7px;font-size:12px;font-weight:500;line-height:1.4;white-space:normal;overflow-wrap:anywhere;text-align:center;color:#695e54}
.ss-reader-mode-choice input:checked+span{background:#fffdf8;color:#346c5b;box-shadow:0 1px 3px #55432c14;font-weight:600}
.ss-reader-mode-choice:hover span{color:#346c5b}
.ss-reader-mode-choice input:focus-visible+span{text-decoration:underline;text-underline-offset:4px}
.ss-reader-colors{margin:0;padding:0}
.ss-reader-colors summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border-radius:10px;cursor:pointer;list-style:none;font-size:13px;line-height:1.4}
.ss-reader-colors summary::-webkit-details-marker{display:none}
.ss-reader-colors summary::after{content:"";width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);flex:none;margin-inline-start:2px}
.ss-reader-colors[open] summary::after{transform:rotate(225deg)}
.ss-reader-colors summary>span:first-child{min-width:0;overflow-wrap:anywhere}
.ss-reader-color-current{margin-inline-start:auto;width:16px;height:16px;flex:none;border-radius:4px}
.ss-reader-colors summary:hover,.ss-reader-colors summary:focus-visible{outline:none!important;background:#e7efeb}
.ss-reader-colors summary:focus-visible>span:first-child{text-decoration:underline;text-underline-offset:3px}
.ss-reader-colors fieldset{display:flex;gap:8px;border:0;margin:0;padding:4px 10px 6px;min-width:0}
.ss-reader-colors legend{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ss-reader-color-choice{position:relative;flex:1;min-width:0;cursor:pointer;margin:0}
.ss-reader-color-face{display:block;min-height:44px;border:2px solid transparent;border-radius:8px}
.ss-reader-menu [data-color="green"]{background:#dce9dc;color:#243d30}
.ss-reader-menu [data-color="blue"]{background:#dcecf7;color:#203e56}
.ss-reader-menu [data-color="yellow"]{background:#f6e7b0;color:#4b3a16}
.ss-reader-color-choice input:checked+.ss-reader-color-face{border-color:currentColor}
.ss-reader-color-choice input:focus-visible+.ss-reader-color-face{border-color:currentColor;border-style:dashed}
.ss-reader-speed{border-top:1px solid var(--reader-line);margin:8px 0 0;padding:12px 10px 8px}
.ss-reader-speed-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:14px;line-height:1.4}
.ss-reader-speed-heading label{font-weight:600}
.ss-reader-speed-heading output{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;color:#606b61}
#ss-reader-speed{box-sizing:border-box;display:block;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;touch-action:pan-y;direction:ltr;--speed-accent:#467c6b;--speed-track:#dce4df;--speed-thumb:#fffdf8}
#ss-reader-speed::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:linear-gradient(to right,var(--speed-accent) 0 var(--speed-fill),var(--speed-track) var(--speed-fill) 100%)}
#ss-reader-speed::-moz-range-track{height:4px;border-radius:3px;background:var(--speed-track)}
#ss-reader-speed::-moz-range-progress{height:4px;border-radius:3px;background:var(--speed-accent)}
#ss-reader-speed::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border:2px solid var(--speed-accent);border-radius:50%;background:var(--speed-thumb)}
#ss-reader-speed::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--speed-accent);border-radius:50%;background:var(--speed-thumb)}
#ss-reader-speed:focus-visible{outline:none!important}
#ss-reader-speed:focus-visible::-webkit-slider-thumb{background:var(--speed-accent)}
#ss-reader-speed:focus-visible::-moz-range-thumb{background:var(--speed-accent)}
.ss-reader-speed-ends{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;direction:ltr;font-size:11px;line-height:1.4;color:#606b61}
.ss-reader-speed-ends span:last-child{margin-inline-start:auto}
.ss-reader-tooltip{position:fixed;inset:auto;margin:0;box-sizing:border-box;z-index:100001;max-width:min(240px,calc(100vw - 16px));padding:10px 12px;border:0;border-radius:10px;background:#293d32;color:#fffdf8;font:13px/1.5 system-ui,sans-serif;text-align:start;box-shadow:0 5px 18px #17281c26}
[data-theme="dark"] #ed-voice-popover.ss-reader-menu{--reader-paper:#262521;--reader-ink:#c8cec8;--reader-line:#536057;--reader-soft:#7fbaa824;--reader-accent:#a6cbbb;border-color:#e8ddd41f;box-shadow:0 16px 38px #0006}
[data-theme="dark"] .ss-reader-voice-row:hover{background:#ffffff0f}
[data-theme="dark"] .ss-reader-voice-row.active .ss-reader-voice{color:#a9d0c1}
[data-theme="dark"] .ss-reader-menu .ss-reader-preview{border-color:#a6cbbb;background:#26382e;color:#c5e3d5}
[data-theme="dark"] .ss-reader-menu .ss-reader-preview:hover,[data-theme="dark"] .ss-reader-menu .ss-reader-preview.playing{background:#a6cbbb;color:#20362a}
[data-theme="dark"] .ss-reader-modes{background:#27362d;border-color:#536057}
[data-theme="dark"] .ss-reader-mode-choice span{color:#c8cec8}
[data-theme="dark"] .ss-reader-mode-choice input:checked+span{background:#455d4a;color:#f5f5ee}
[data-theme="dark"] .ss-reader-colors summary:hover,[data-theme="dark"] .ss-reader-colors summary:focus-visible{background:#3b5144}
[data-theme="dark"] .ss-reader-menu [data-color="green"]{background:#455d4a;color:#f5f5ee}
[data-theme="dark"] .ss-reader-menu [data-color="blue"]{background:#344f69;color:#f1f6fc}
[data-theme="dark"] .ss-reader-menu [data-color="yellow"]{background:#63552b;color:#fff6dc}
[data-theme="dark"] .ss-reader-speed-heading output,[data-theme="dark"] .ss-reader-speed-ends{color:#c8cec8}
[data-theme="dark"] #ss-reader-speed{--speed-accent:#a6cbbb;--speed-track:#536057;--speed-thumb:#26382e}
[data-theme="dark"] .ss-reader-tooltip{background:#e5ede6;color:#253b2d}
@media(max-width:900px),(pointer:coarse){.ss-reader-voice-row{padding-inline-start:62px}.ss-reader-menu .ss-reader-preview{width:44px;height:44px;inset-inline-start:8px}}
@media(prefers-reduced-motion:reduce){.ss-reader-preview.playing .ss-reader-wave{animation:none}.ss-reader-voice-row{transition:none}}
@media(forced-colors:active){.ss-reader-mode-choice input:checked+span,.ss-reader-color-choice input:checked+.ss-reader-color-face{border:2px solid Highlight}.ss-reader-voice-row.active{border:1px solid Highlight}.ss-reader-check{color:Highlight}.ss-reader-tooltip{border:1px solid CanvasText}}

.ss-reader-status{margin:8px 10px;font-size:13px;line-height:1.5}

/* Keep host-wide keyboard rings out of this panel; local underline, background,
   thumb fill and color-border treatments still identify keyboard focus. */
@media (forced-colors:none){#ed-voice-popover.ss-reader-menu :is(button,input,summary):focus-visible{outline:none!important;box-shadow:none!important}}
@media (forced-colors:active){#ed-voice-popover.ss-reader-menu :is(button,input,summary):focus-visible{outline:2px solid Highlight!important;outline-offset:2px}}

/* Keep constrained reader menus scrollable without a heavy platform track. */
#ed-voice-popover.ss-reader-menu{scrollbar-width:thin;scrollbar-color:rgba(93,84,77,.24) transparent}
#ed-voice-popover.ss-reader-menu::-webkit-scrollbar{width:4px;height:4px}
#ed-voice-popover.ss-reader-menu::-webkit-scrollbar-track{background:transparent}
#ed-voice-popover.ss-reader-menu::-webkit-scrollbar-thumb{background:rgba(93,84,77,.24);border-radius:8px}
#ed-voice-popover.ss-reader-menu::-webkit-scrollbar-thumb:hover{background:rgba(93,84,77,.4)}
#ed-voice-popover.ss-reader-menu::-webkit-scrollbar-button{display:none}
[data-theme="dark"] #ed-voice-popover.ss-reader-menu{scrollbar-color:rgba(200,206,200,.3) transparent}
[data-theme="dark"] #ed-voice-popover.ss-reader-menu::-webkit-scrollbar-thumb{background:rgba(200,206,200,.3)}
@media(forced-colors:active){#ed-voice-popover.ss-reader-menu{scrollbar-color:auto}}