/* PC-only Kokoro settings. Opaque form controls and fixed theme swatches are intentional. */
.pc-kokoro-note {
  margin: 12px 0 4px; padding: 11px 13px;
  border: 1px solid var(--r-line, #c8c3b8); border-left: 3px solid var(--r-accent, #806033);
  border-radius: 8px; color: var(--r-ink, #3d352b); background: var(--r-surface, #fcf8ee);
  font-size: .9rem; line-height: 1.55;
}
.pc-kokoro-settings { display: grid; gap: 16px; }
.pc-kokoro-speed-control, .pc-kokoro-voice-field, .pc-kokoro-status {
  min-width: 0; padding: 14px; margin: 0; border: 1px solid var(--r-line, #c8c3b8);
  border-radius: 12px; background: var(--r-surface, #fcf8ee); color: var(--r-ink, #3d352b);
}
.pc-kokoro-speed-head, .pc-kokoro-voice-head, .pc-kokoro-status-head,
.pc-kokoro-voice-foot, .pc-kokoro-preview-row, .pc-kokoro-range-row {
  display: flex; align-items: center; gap: 12px;
}
.pc-kokoro-speed-head, .pc-kokoro-status-head, .pc-kokoro-voice-foot { justify-content: space-between; }
.pc-kokoro-speed-head label, .pc-kokoro-voice-field legend { color: var(--r-ink, #3d352b); font-weight: 650; }
.pc-kokoro-speed-head strong { font-variant-numeric: tabular-nums; }
.pc-kokoro-speed-control input[type="range"], .pc-kokoro-range-row input[type="range"] {
  display: block; width: 100%; min-width: 0; accent-color: var(--r-accent, #806033); margin: 13px 0 8px; cursor: pointer;
}
.pc-kokoro-speed-marks { display: flex; justify-content: space-between; gap: 8px; color: var(--r-muted, #6f6251); font-size: 12px; }
.pc-kokoro-voice-field { padding-top: 8px; }
.pc-kokoro-voice-field legend { padding: 0 6px; }
.pc-kokoro-voice-head { justify-content: space-between; align-items: flex-start; }
.pc-kokoro-voice-head>div { display: grid; gap: 5px; min-width: 0; }
.pc-kokoro-eyebrow { font: 600 10px/1.4 system-ui,sans-serif; letter-spacing: .12em; color: var(--r-muted, #6f6251); }
.pc-kokoro-voice-head strong { font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.pc-kokoro-voice-head small { color: var(--r-muted, #6f6251); line-height: 1.4; }
.pc-kokoro-grade { border: 1px solid var(--r-line, #c8c3b8); background: var(--r-paper, var(--paper, #f4f0e5)); color: var(--r-ink, #3d352b); font: 650 12px/1 system-ui,sans-serif; border-radius: 999px; padding: 8px 10px; flex: 0 0 auto; }
.pc-kokoro-range-row { margin-top: 8px; gap: 10px; }
.pc-kokoro-range-row button, .pc-kokoro-preview {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--r-line, #c8c3b8); border-radius: 9px;
  color: var(--r-ink, #3d352b); background: var(--r-paper, var(--paper, #f4f0e5)); cursor: pointer; flex: 0 0 auto;
}
.pc-kokoro-range-row button { width: 40px; font-size: 22px; padding: 0; }
.pc-kokoro-range-row input[type="range"] { flex: 1; width: 100%; }
.pc-kokoro-voice-foot { color: var(--r-muted, #6f6251); font-size: 12px; }
.pc-kokoro-preview-row { margin-top: 12px; align-items: flex-start; flex-wrap: wrap; }
.pc-kokoro-preview-row>span { flex: 1 1 220px; min-width: 0; color: var(--r-muted, #6f6251); font-size: 12px; line-height: 1.55; }
.pc-kokoro-preview { background: var(--r-accent, #806033); color: var(--r-paper, #f4f0e5); border-color: transparent; font-weight: 650; }
.pc-kokoro-setting-toggles { display: grid; gap: 10px; }
.pc-kokoro-setting-toggles label { display: flex; align-items: flex-start; gap: 9px; }
.pc-kokoro-sync-select, .pc-kokoro-sr {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
.pc-kokoro-status { padding: 12px 14px; }
.pc-kokoro-status-head { gap: 12px; align-items: flex-start; }
.pc-kokoro-status-head strong { min-width: 0; font-size: 13px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.pc-kokoro-status-head span { flex: 0 0 auto; color: var(--r-muted, #6f6251); font: 600 12px/1.5 system-ui,sans-serif; }
.pc-kokoro-status progress { display: block; width: 100%; height: 9px; margin: 10px 0 7px; accent-color: var(--r-accent, #806033); }
.pc-kokoro-status-detail { display: block; color: var(--r-muted, #6f6251); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.pc-kokoro-privacy { margin: 8px 0 0; color: var(--r-muted, #6f6251); font-size: 12px; line-height: 1.5; }
.pc-kokoro-status.is-error { border-color: #b95a63; }
.pc-kokoro-status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pc-kokoro-status-actions button { border: 1px solid var(--r-line, #c8c3b8); background: var(--r-paper, #f4f0e5); color: var(--r-ink, #3d352b); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.reader-audio-message { border-radius: 9px; border: 1px solid var(--r-line, #c8c3b8); background: var(--r-surface, #fcf8ee); color: var(--r-ink, #3d352b); padding: 10px 12px; overflow-wrap: anywhere; }
/* Native controls often inherit transparency or OS colors; make them theme-aware and opaque. */
.reader-audio-options select, .reader-audio-options option, .reader-audio-options textarea,
#infoModal input[type="text"], #infoModal input[type="search"], #infoModal input[type="number"],
#infoModal select, #infoModal textarea {
  color: var(--r-ink, #3d352b) !important; background-color: var(--r-surface, #fcf8ee) !important;
  border: 1px solid var(--r-line, #c8c3b8) !important;
}
.reader-audio-options select, #infoModal select { color-scheme: light; }
html[data-theme="dark"] .reader-audio-options select, html[data-theme="dark"] #infoModal select { color-scheme: dark; }
.reader-audio-options select option, #infoModal select option { background-color: var(--r-surface, #fcf8ee) !important; color: var(--r-ink, #3d352b) !important; }
#infoModal textarea::placeholder, #infoModal input::placeholder { color: var(--r-muted, #6f6251) !important; opacity: 1; }
#infoModal input:focus-visible, #infoModal textarea:focus-visible, #infoModal select:focus-visible,
.pc-kokoro-range-row button:focus-visible, .pc-kokoro-preview:focus-visible { outline: 2px solid var(--r-accent, #806033); outline-offset: 2px; }
/* Theme swatches are stable palette previews, never tinted by the active selection. */
.reader-theme-options .reader-theme-sample { border: 1px solid var(--sample-line) !important; background: var(--sample-paper) !important; color: var(--sample-ink) !important; }
.reader-theme-options .reader-theme-sample[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #c96d96, 0 0 0 1px #c96d96; }
.reader-theme-options .reader-theme-sample:hover { filter: brightness(.96); }
.reader-theme-sample.sample-auto { --sample-paper:#f1ede6;--sample-ink:#302b28;--sample-line:#cac8c4; }
.reader-theme-sample.sample-black { --sample-paper:#000;--sample-ink:#f4f0e5;--sample-line:#464646; }
.reader-theme-sample.sample-midnight { --sample-paper:#11192c;--sample-ink:#e5eaf4;--sample-line:#404758; }
.reader-theme-sample.sample-plum { --sample-paper:#302535;--sample-ink:#eee3ed;--sample-line:#504855; }
.reader-theme-sample.sample-ivory { --sample-paper:#f4f0e5;--sample-ink:#3d352b;--sample-line:#c8c3b8; }
.reader-theme-sample.sample-mist { --sample-paper:#eaf0f6;--sample-ink:#283746;--sample-line:#bbc4cc; }
.reader-theme-sample.sample-slate { --sample-paper:#252b30;--sample-ink:#e9e6e0;--sample-line:#505457; }
.reader-theme-sample.sample-light { --sample-paper:#faf9f5;--sample-ink:#302b28;--sample-line:#cac8c4; }
.reader-theme-sample.sample-sepia { --sample-paper:#f3e9d7;--sample-ink:#514334;--sample-line:#ccc1b0; }
.reader-theme-sample.sample-dark { --sample-paper:#1e4433;--sample-ink:#e2e9de;--sample-line:#3f4944; }
.reader-theme-sample.sample-burgundy { --sample-paper:#29171d;--sample-ink:#f1e5e5;--sample-line:#5b3c46; }
.reader-theme-sample.sample-rose { --sample-paper:#f7eef0;--sample-ink:#453039;--sample-line:#d2bdc5; }
.reader-theme-sample.sample-ocean { --sample-paper:#10262d;--sample-ink:#e3edf0;--sample-line:#3b5660; }
@media (max-width: 720px) {
  .pc-kokoro-voice-head strong { font-size: 16px; }
  .pc-kokoro-settings { gap: 12px; }
  .pc-kokoro-speed-control, .pc-kokoro-voice-field, .pc-kokoro-status { padding: 11px; }
}

/* Full-width settings layout: override the host's legacy flex rule so the
   speech settings never collapse into a narrow right-side column. */
.reader-settings .reader-audio-options.pc-kokoro-settings,
#readerSettings .reader-audio-options.pc-kokoro-settings,
#infoModal .reader-audio-options.pc-kokoro-settings {
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row;
 align-items:stretch;align-content:start;justify-content:stretch;gap:14px!important;
 width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;
 flex:1 1 auto!important;align-self:stretch!important;box-sizing:border-box!important;
}
.reader-settings .reader-audio-options.pc-kokoro-settings>*,#readerSettings .reader-audio-options.pc-kokoro-settings>*,
#infoModal .reader-audio-options.pc-kokoro-settings>* {
 display:block;grid-column:1/-1!important;width:100%!important;min-width:0!important;max-width:none!important;
 margin:0!important;justify-self:stretch!important;align-self:stretch!important;box-sizing:border-box!important;
}
.pc-kokoro-settings,.pc-kokoro-settings *{box-sizing:border-box}
.pc-kokoro-speed-control,.pc-kokoro-voice-field,.pc-kokoro-status{display:block;width:100%!important;min-width:0;max-width:none!important}
.pc-kokoro-speed-control{padding:16px 18px}
.pc-kokoro-speed-head{width:100%;display:flex;flex-direction:row!important;align-items:center;justify-content:space-between;gap:16px}
.pc-kokoro-speed-head label{display:block!important;flex:1 1 auto;margin:0;min-width:0}
.pc-kokoro-speed-head strong{display:block;flex:0 0 auto;margin:0;font-size:15px;line-height:1.2;white-space:nowrap}
.pc-kokoro-speed-control input[type=range],.pc-kokoro-range-row input[type=range]{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;margin:13px 0 10px!important;padding:0!important;align-self:center}
.pc-kokoro-speed-marks{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:3px;width:100%;color:var(--r-muted,#6f6251);font-size:11px;line-height:1.4;font-variant-numeric:tabular-nums}
.pc-kokoro-speed-marks span{display:block;white-space:nowrap;text-align:center}
.pc-kokoro-speed-marks span:first-child{text-align:left}
.pc-kokoro-speed-marks span:last-child{text-align:right}
.pc-kokoro-voice-field{display:grid!important;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:12px;padding:9px 18px 18px!important}
.pc-kokoro-voice-field legend{display:inline-block!important;width:auto!important;max-width:calc(100% - 12px);padding:0 7px;margin:0;font-size:12px;line-height:1.4}
.pc-kokoro-voice-control{width:100%;min-width:0;display:grid;gap:11px}
.pc-kokoro-voice-head{display:flex!important;flex-direction:row!important;justify-content:space-between;align-items:center;gap:12px;width:100%}
.pc-kokoro-voice-head>div{display:grid;gap:4px;min-width:0;flex:1 1 auto}
.pc-kokoro-eyebrow{font-size:10px;letter-spacing:.11em}
.pc-kokoro-voice-head strong{display:block;font-size:21px;line-height:1.2;font-weight:650}
.pc-kokoro-voice-head small{font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.pc-kokoro-grade{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding:7px 9px}
.pc-kokoro-range-row{display:grid!important;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:10px!important;width:100%;min-width:0;margin:3px 0 0!important}
.pc-kokoro-range-row button{display:inline-flex!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-height:34px!important;align-items:center;justify-content:center;padding:0!important;margin:0!important;border:1px solid var(--r-line,#c8c3b8);border-radius:9px;background:var(--r-paper,var(--paper,#f4f0e5));color:var(--r-ink,#3d352b);font:20px/1 system-ui,sans-serif;flex:none!important}
.pc-kokoro-range-row input[type=range]{margin:0!important}
.pc-kokoro-voice-foot{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;width:100%;font-size:12px;line-height:1.4}
.pc-kokoro-preview-row{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;width:100%;margin:3px 0 0!important}
.pc-kokoro-preview{display:inline-flex!important;width:auto!important;min-height:38px!important;justify-content:center;align-items:center;white-space:nowrap}
.pc-kokoro-preview-row>span{min-width:0;flex:none;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.pc-kokoro-setting-toggles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px!important;width:100%;padding:2px 4px}
.pc-kokoro-setting-toggles label{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start;min-width:0;gap:9px!important;margin:0;font-size:12px!important;line-height:1.45}
.pc-kokoro-setting-toggles input[type=checkbox]{flex:0 0 auto;margin:0;accent-color:var(--r-accent,#b96a91)}
.pc-kokoro-status{padding:16px 18px}
.pc-kokoro-status-heading{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0}
.pc-kokoro-status-title{display:grid;gap:5px;min-width:0}
.pc-kokoro-status-title strong{display:block;line-height:1.45;overflow-wrap:anywhere}
.pc-kokoro-status-badge{display:inline-flex;align-items:center;flex:0 0 auto;border:1px solid var(--r-line,#c8c3b8);border-radius:999px;padding:5px 9px;color:var(--r-muted,#6f6251);font:650 11px/1.2 system-ui,sans-serif;white-space:nowrap}
.pc-kokoro-status progress{appearance:none;display:block;width:100%;height:8px;margin:14px 0 8px;overflow:hidden;border:0;border-radius:999px;background:var(--r-line,#c8c3b8)}
.pc-kokoro-status progress::-webkit-progress-bar{background:var(--r-line,#c8c3b8);border-radius:999px}
.pc-kokoro-status progress::-webkit-progress-value{background:var(--r-accent,#b96a91);border-radius:999px;transition:width .18s ease}
.pc-kokoro-status progress::-moz-progress-bar{background:var(--r-accent,#b96a91);border-radius:999px}
.pc-kokoro-setup-actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:9px;width:100%;margin-top:12px}
.pc-kokoro-button{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-width:140px;min-height:40px!important;padding:9px 14px!important;margin:0!important;border:1px solid var(--r-line,#c8c3b8)!important;border-radius:9px!important;font:650 12px/1.25 system-ui,sans-serif!important;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
.pc-kokoro-button:disabled{opacity:.58;cursor:progress}
.pc-kokoro-button-primary{color:var(--r-paper,#fff)!important;background:var(--r-accent,#806033)!important;border-color:transparent!important}
.pc-kokoro-button-secondary{color:var(--r-ink,#3d352b)!important;background:var(--r-paper,var(--paper,#f4f0e5))!important}
.pc-kokoro-button:not(:disabled):hover{transform:translateY(-1px)}
.pc-kokoro-privacy{max-width:80ch}
.pc-kokoro-note{margin-top:6px;line-height:1.55}
.pc-kokoro-status.is-busy .pc-kokoro-status-badge{border-color:var(--r-accent,#b96a91);color:var(--r-ink,#3d352b)}
@media(max-width:750px){
 .reader-settings .reader-audio-options.pc-kokoro-settings,#readerSettings .reader-audio-options.pc-kokoro-settings,#infoModal .reader-audio-options.pc-kokoro-settings{gap:11px!important}
 .pc-kokoro-speed-control,.pc-kokoro-status{padding:12px!important}
 .pc-kokoro-voice-field{padding:8px 12px 13px!important}
 .pc-kokoro-speed-marks{font-size:10px}
 .pc-kokoro-setting-toggles{grid-template-columns:minmax(0,1fr)}
 .pc-kokoro-preview-row{grid-template-columns:minmax(0,1fr);align-items:start}
 .pc-kokoro-preview{justify-self:start}
 .pc-kokoro-setup-actions{display:grid;grid-template-columns:minmax(0,1fr)}
 .pc-kokoro-button{width:100%!important}
}

/* Keep settings full-width even when the mobile settings navigator creates an
   outgoing/incoming pane. The PC audio tab should never sit in a half-width column. */
#readerSettings > .reader-settings-body[data-reader-settings-body="audio"],
.reader-settings-transition > .reader-settings-body[data-reader-settings-body="audio"] {
  display: block !important;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  columns: auto !important;
  box-sizing: border-box !important;
}
#readerSettings > .reader-settings-body[data-reader-settings-body="audio"] > .reader-audio-options.pc-kokoro-settings,
.reader-settings-transition > .reader-settings-body[data-reader-settings-body="audio"] > .reader-audio-options.pc-kokoro-settings {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}
.pc-kokoro-sync-select { display: none !important; }
.pc-kokoro-voice-select {
  appearance: auto;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 40px 10px 13px !important;
  border: 1px solid var(--r-line, #c8c3b8) !important;
  border-radius: 10px !important;
  background-color: var(--r-paper, var(--paper, #f4f0e5)) !important;
  color: var(--r-ink, #3d352b) !important;
  font: 500 14px/1.4 system-ui, sans-serif !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer;
}
.pc-kokoro-voice-select:focus-visible {
  outline: 2px solid var(--r-accent, #b96a91) !important;
  outline-offset: 2px;
}
.pc-kokoro-voice-select option {
  background: var(--r-paper, var(--paper, #f4f0e5)) !important;
  color: var(--r-ink, #3d352b) !important;
}
.pc-kokoro-select-label {
  display: block !important;
  margin: 2px 0 0 !important;
  color: var(--r-muted, #6f6251) !important;
  font: 600 12px/1.4 system-ui, sans-serif !important;
}
.pc-kokoro-voice-foot { margin-top: -3px; }
.pc-kokoro-speed-marks span { font-variant-numeric: tabular-nums; }
.pc-kokoro-status-detail { min-height: 1.4em; }
@media (prefers-reduced-motion: reduce) {
  .pc-kokoro-status progress::-webkit-progress-value { transition: none; }
  .pc-kokoro-button { transition: none; }
}