/* AIPX Read Aloud - player styling. Canonical source: sites/_shared/reader/reader.css
 * Built into sites/_shared/mu-plugins/aipx-readaloud.php by bin/aipx_reader_build.py.
 * Neutral by design: colours come from the host theme where it exposes them, otherwise
 * from the fallbacks below, so the same file suits AIP, Sacred Herbology and the clinic site. */

.aipx-rd {
  --rd-ink: var(--wp--preset--color--navy, #16241c);
  --rd-paper: var(--wp--preset--color--base, #fff);
  --rd-accent: var(--wp--preset--color--forest, var(--wp--preset--color--primary, #1f3d2b));
  --rd-line: color-mix(in srgb, var(--rd-ink) 16%, transparent);
  --rd-soft: color-mix(in srgb, var(--rd-accent) 7%, var(--rd-paper));
  --rd-mark: color-mix(in srgb, var(--rd-accent) 18%, transparent);
  --rd-radius: 12px;
  font-family: var(--wp--preset--font-family--sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--rd-ink);
  box-sizing: border-box;
}
.aipx-rd *, .aipx-rd *::before, .aipx-rd *::after { box-sizing: inherit; }
.aipx-rd[hidden] { display: none !important; }

/* ---------------------------------------------------------------- inline card */
.aipx-rd-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 1.6em; padding: 14px 16px;
  border: 1px solid var(--rd-line); border-radius: var(--rd-radius);
  background: var(--rd-soft);
}
.aipx-rd-card .aipx-rd-start {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px; border: 0; border-radius: 999px;
  background: var(--rd-accent); color: #fff; cursor: pointer;
  font: 600 1rem/1.2 inherit; letter-spacing: .01em;
}
.aipx-rd-card .aipx-rd-start:hover { filter: brightness(1.08); }
.aipx-rd-card .aipx-rd-start svg { width: 20px; height: 20px; fill: currentColor; }
.aipx-rd-blurb { font-size: .95rem; line-height: 1.45; margin: 0; }
.aipx-rd-blurb b { font-weight: 600; }
.aipx-rd-blurb span { display: block; opacity: .72; font-size: .85rem; margin-top: 2px; }
.aipx-rd-resume {
  border: 1px solid var(--rd-line); background: transparent; color: inherit;
  border-radius: 999px; padding: 8px 14px; cursor: pointer; font: 500 .85rem/1 inherit;
}
.aipx-rd-resume:hover { background: var(--rd-paper); }

/* ------------------------------------------------------------------- the bar */
.aipx-rd-bar {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(120%);
  bottom: max(12px, env(safe-area-inset-bottom)); z-index: 9990;
  width: min(940px, calc(100vw - 24px));
  background: var(--rd-paper); color: var(--rd-ink);
  border: 1px solid var(--rd-line); border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
  transition: transform .28s ease, opacity .28s ease;
  opacity: 0; pointer-events: none;
}
.aipx-rd.is-open .aipx-rd-bar { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .aipx-rd-bar { transition: none; } }

.aipx-rd-track { height: 6px; background: var(--rd-line); border-radius: 16px 16px 0 0; position: relative; cursor: pointer; }
.aipx-rd-track:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; }
.aipx-rd-fill { height: 100%; width: 0; background: var(--rd-accent); border-radius: 16px 0 0 0; transition: width .2s linear; }
.aipx-rd-track:hover .aipx-rd-fill { filter: brightness(1.15); }

.aipx-rd-main { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.aipx-rd-now { flex: 1 1 auto; min-width: 0; padding: 0 6px; }
.aipx-rd-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aipx-rd-sub { font-size: .78rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.aipx-rd button.aipx-rd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer;
}
.aipx-rd button.aipx-rd-btn svg { width: 22px; height: 22px; fill: currentColor; }
.aipx-rd button.aipx-rd-btn:hover { background: var(--rd-soft); }
.aipx-rd button.aipx-rd-btn:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; }
.aipx-rd button.aipx-rd-btn[aria-pressed="true"] { background: var(--rd-soft); border-color: var(--rd-line); }
.aipx-rd button.aipx-rd-btn.is-play { width: 48px; height: 48px; background: var(--rd-accent); color: #fff; border-radius: 50%; }
.aipx-rd button.aipx-rd-btn.is-play svg { width: 26px; height: 26px; }
.aipx-rd button.aipx-rd-btn.is-play:hover { filter: brightness(1.08); background: var(--rd-accent); }
.aipx-rd-btn.is-text { width: auto; min-width: 46px; padding: 0 10px; font: 600 .82rem/1 inherit; }
.aipx-rd-time { font-variant-numeric: tabular-nums; font-size: .78rem; opacity: .75; padding: 0 4px; white-space: nowrap; }

@media (max-width: 640px) {
  .aipx-rd-main { flex-wrap: wrap; gap: 4px; }
  .aipx-rd-now { order: -1; flex: 1 0 100%; padding-bottom: 4px; }
  .aipx-rd-time { order: 9; }
  .aipx-rd-hide-sm { display: none; }
}

/* ------------------------------------------------------------------- panels */
.aipx-rd-panel {
  border-top: 1px solid var(--rd-line); padding: 14px 16px 16px;
  max-height: min(58vh, 520px); overflow-y: auto; overscroll-behavior: contain;
}
.aipx-rd-panel[hidden] { display: none; }
.aipx-rd-panel h3 { margin: 0 0 10px; font-size: .95rem; font-weight: 700; }
.aipx-rd-panel h3, .aipx-rd-panel h4 { color: inherit; }
.aipx-rd-panel h4 { margin: 16px 0 6px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.aipx-rd-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .88rem; flex-wrap: wrap; }
.aipx-rd-row label { flex: 0 0 110px; opacity: .8; }
.aipx-rd-row input[type="range"] { flex: 1 1 160px; accent-color: var(--rd-accent); }
.aipx-rd-row output { font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.aipx-rd-check { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; font-size: .88rem; cursor: pointer; }
.aipx-rd-check input { margin-top: 2px; accent-color: var(--rd-accent); width: 17px; height: 17px; }
.aipx-rd-check span small { display: block; opacity: .62; font-size: .78rem; line-height: 1.35; }

.aipx-rd-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.aipx-rd-filter input, .aipx-rd-filter select {
  font: inherit; font-size: .86rem; padding: 7px 10px; color: inherit;
  border: 1px solid var(--rd-line); border-radius: 8px; background: var(--rd-paper);
}
.aipx-rd-filter input { flex: 1 1 180px; min-width: 0; }

.aipx-rd-voices { list-style: none; margin: 0; padding: 0; }
.aipx-rd-voices li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.aipx-rd-voice {
  flex: 1 1 auto; display: flex; align-items: center; gap: 9px; text-align: left; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--rd-line); border-radius: 9px;
  background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: .88rem;
}
.aipx-rd-voice:hover { background: var(--rd-soft); }
.aipx-rd-voice[aria-pressed="true"] { border-color: var(--rd-accent); background: var(--rd-soft); font-weight: 600; }
.aipx-rd-voice .nm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aipx-rd-tag {
  flex: 0 0 auto; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; border: 1px solid var(--rd-line); opacity: .8;
}
.aipx-rd-tag.t1 { background: var(--rd-accent); color: #fff; border-color: transparent; opacity: 1; }
.aipx-rd-tag.t2 { background: color-mix(in srgb, var(--rd-accent) 22%, transparent); }
.aipx-rd-empty { font-size: .88rem; opacity: .7; padding: 10px 0; }

/* the voice button carries the name of whoever is reading, so the choice is never hidden */
.aipx-rd-btn.is-voice { width: auto; min-width: 46px; padding: 0 11px 0 8px; gap: 7px; }
.aipx-rd-vname {
  max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 .8rem/1 inherit;
}
@media (max-width: 720px) { .aipx-rd-vname { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

.aipx-rd-count { float: right; font: 400 .78rem/1.6 inherit; opacity: .6; text-transform: none; letter-spacing: 0; }
.aipx-rd-panel h3, .aipx-rd-panel h4 { color: inherit; }
.aipx-rd-panel h4 { margin: 16px 0 6px; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; opacity: .72; }
.aipx-rd-panel h4:first-of-type { margin-top: 8px; }
.aipx-rd-note.aipx-rd-thin { margin: 0 0 8px; padding: 0; background: none; font-size: .8rem; opacity: .68; }

.aipx-rd-dl { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rd-line); }
.aipx-rd-mp3 {
  font: 600 .88rem/1 inherit; padding: 11px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--rd-accent); background: var(--rd-soft); color: inherit;
}
.aipx-rd-mp3:hover { background: color-mix(in srgb, var(--rd-accent) 18%, transparent); }
.aipx-rd-mp3[disabled] { opacity: .55; cursor: progress; }
.aipx-rd-dlstat { margin: 8px 0 0; font-size: .84rem; line-height: 1.5; min-height: 1.2em; }
.aipx-rd-dlstat a { font-weight: 600; }

/* ------------------------------------------------------------------ account */
/* Our own voices run on the institute's machine, so they sit behind a sign-in. The box says so
   at the top of the voice list, and a locked voice still previews. */
.aipx-rd-acct {
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--rd-line); border-radius: var(--rd-radius); background: var(--rd-soft);
  font-size: .86rem; line-height: 1.45;
}
.aipx-rd-acctline { margin: 0 0 6px; }
.aipx-rd-acctline b { font-weight: 600; }
.aipx-rd-flash {
  margin: 0 0 8px; padding: 7px 9px; border-radius: 8px;
  background: color-mix(in srgb, var(--rd-accent) 16%, transparent); font-weight: 600;
}
.aipx-rd-lbtn {
  border: 1px solid var(--rd-line); border-radius: 999px; background: var(--rd-paper);
  color: inherit; cursor: pointer; font: 600 .82rem/1 inherit; padding: 8px 14px;
}
.aipx-rd-lbtn:hover { border-color: var(--rd-accent); }
.aipx-rd-lbtn[disabled] { opacity: .5; cursor: default; }
.aipx-rd-signin { display: grid; gap: 8px; margin: 4px 0 8px; }
.aipx-rd-signin label { display: grid; gap: 4px; font-weight: 600; }
/* a display rule beats the hidden attribute's own style, so say it here */
.aipx-rd-signin [hidden] { display: none !important; }
.aipx-rd-signin input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--rd-line); border-radius: 8px;
  background: var(--rd-paper); color: inherit; font: 400 .9rem/1.2 inherit;
}
.aipx-rd-signin .aipx-rd-codelab input { letter-spacing: .25em; font-weight: 600; }
.aipx-rd-plans { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.aipx-rd-plans li {
  padding: 7px 9px; border: 1px solid var(--rd-line); border-radius: 8px;
  background: var(--rd-paper); font-size: .82rem;
}
.aipx-rd-plans span { opacity: .7; }
.aipx-rd-soon {
  font-style: normal; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--rd-line); opacity: .8;
}
.aipx-rd-plans li.aipx-rd-plan-soon { opacity: .72; }
.aipx-rd-voice.is-locked { opacity: .62; }
.aipx-rd-voice.is-locked .nm::before { content: "\1F512 "; }
.aipx-rd-voice.is-trial .nm::before { content: "\23F3 "; }

.aipx-rd-help { font-size: .86rem; line-height: 1.5; }
.aipx-rd-help ol { margin: 6px 0 0; padding-left: 20px; }
.aipx-rd-help li { margin: 4px 0; }
.aipx-rd-help details { margin-top: 10px; border-top: 1px solid var(--rd-line); padding-top: 8px; }
.aipx-rd-help summary { cursor: pointer; font-weight: 600; }
.aipx-rd-note {
  margin-top: 12px; padding: 10px 12px; border-radius: 9px;
  background: var(--rd-soft); font-size: .84rem; line-height: 1.5;
}

/* --------------------------------------------------------- reading highlight */
::highlight(aipx-read) {
  background-color: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
}
.aipx-rd-mark { background: var(--rd-mark); border-radius: 3px; box-shadow: 0 0 0 2px var(--rd-mark); }
.aipx-rd-block-on { position: relative; }
html.aipx-rd-live .aipx-rd-clickable { cursor: pointer; }
html.aipx-rd-live .aipx-rd-clickable:hover { background: color-mix(in srgb, currentColor 5%, transparent); border-radius: 4px; }
html.aipx-rd-live { scroll-padding-bottom: 140px; }
body.aipx-rd-open { padding-bottom: 96px; }

.aipx-rd-live-region {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .aipx-rd { --rd-paper: #16201b; --rd-ink: #eef3ef; --rd-accent: #7fc09a; }
  .aipx-rd-bar { box-shadow: 0 10px 34px rgba(0, 0, 0, .5); }
  .aipx-rd button.aipx-rd-btn.is-play { color: #10221a; }
  .aipx-rd-card .aipx-rd-start { color: #10221a; }
}

/* The voice button is the way into the list, so it has to look like a button with a name on it. */
.aipx-rd button.aipx-rd-btn.is-voice {
  width: auto; gap: 6px; padding: 0 12px 0 9px; border: 1px solid var(--rd-line);
  background: var(--rd-soft); font: 600 .82rem/1 inherit;
}
.aipx-rd button.aipx-rd-btn.is-voice[aria-expanded="true"] { border-color: var(--rd-accent); }
.aipx-rd-panel h3, .aipx-rd-panel h4, .aipx-rd-count { color: inherit; }