/* Page narration: a compact, keyboard-accessible player with native audio controls. */
.read-aloud {
  position:fixed;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:900;
  width:max-content;
  max-width:calc(100vw - 36px);
  color:#17171b;
  font-size:14px;
  line-height:1.5;
}
.read-aloud summary {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:max-content;
  min-height:46px;
  margin-left:auto;
  padding:11px 18px;
  border:1px solid #d6d6df;
  border-radius:24px;
  background:#fff;
  color:#17171b;
  box-shadow:0 4px 20px #00000014;
  cursor:pointer;
  list-style:none;
  font-weight:650;
}
.read-aloud summary::-webkit-details-marker { display:none; }
.read-aloud summary:hover { background:#f0f4ff; }
.read-aloud summary > svg { width:18px; height:18px; flex-shrink:0; }
.read-aloud summary:focus-visible,
.read-aloud :is(select,a,button):focus-visible { outline:3px solid #0066cc; outline-offset:4px; }
.read-aloud[open] {
  width:360px;
  padding:16px;
  border:1px solid #d6d6df;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 36px #00000026;
}
.read-aloud[open] summary { margin:0 0 12px; padding:0; min-height:36px; border:0; border-radius:6px; box-shadow:none; background:transparent; }
.read-aloud[open] summary::after { content:'×'; margin-left:8px; font-size:24px; line-height:1; font-weight:400; }
.read-aloud audio { display:block; width:100%; height:46px; }
.read-aloud-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.read-aloud-tools label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; }
.read-aloud-tools select { min-height:36px; max-width:100px; padding:5px 26px 5px 8px; border:1px solid #b8b8c2; border-radius:8px; background:#fff; color:#17171b; font:inherit; }
.read-aloud-tools a { color:#004fa3; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.read-aloud-status { margin:9px 0 0; color:#52525b; font-size:12px; line-height:1.5; }
.read-aloud-status:empty { display:none; }
body:has(.read-aloud) .site-footer { padding-bottom:84px; }
@media (max-width:480px) {
  .read-aloud { right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); }
  .read-aloud summary { min-height:44px; padding:10px 14px; font-size:13px; }
  .read-aloud[open] { padding:14px; }
}