/* Tetri’s Smile · v16 · listen to the guide.
   Loaded only on guide pages. Three faces of one player: a card at the top of the contents rail (wide screens),
   a floating dock between the contents pill and the T button (narrow screens), and a row inside the contents sheet.
   The narration is pre-rendered audio (xAI Grok voice) when assets/audio/<guide>/<lang>/manifest.json exists;
   until then the browser's own voice reads the same blocks. */

/* ---------- the block being read ---------- */
[data-say]{transition:background .45s,box-shadow .45s}
[data-say].is-reading,.gloss dt.is-reading + dd{position:relative;background:linear-gradient(90deg,rgba(10,26,74,.07),rgba(10,26,74,0) 72%);border-radius:0 4px 4px 0}
[data-say].is-reading::after{content:"";position:absolute;left:-12px;top:3px;bottom:3px;width:3px;border-radius:2px;background:#0a1a4a}
.gloss dt.is-reading + dd{position:static}
.guide__article h2.is-reading{background:none}
@media (max-width:640px){[data-say].is-reading::after{left:-9px}}
html.a11y-contrast [data-say].is-reading,html.a11y-contrast .gloss dt.is-reading + dd{background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,0) 72%)}
html.a11y-contrast [data-say].is-reading::after{background:#000}

/* ---------- shared pieces ---------- */
.lplay{--p:0%;position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:conic-gradient(#8fc3ff var(--p),rgba(255,255,255,.18) 0);display:grid;place-items:center;color:#fff;cursor:pointer;transition:transform .3s var(--ease)}
.lplay::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#0a1a4a}
.lplay svg{position:relative;width:16px;height:16px;fill:currentColor}
.lplay svg .pa{display:none}.lplay.is-playing svg .pl{display:none}.lplay.is-playing svg .pa{display:block}
.lplay:hover{transform:scale(1.05)}
.lcard .lplay:focus-visible,.lrow .lplay:focus-visible,.lcard .lbtn[aria-pressed="true"]:focus-visible,.lrow .lbtn[aria-pressed="true"]:focus-visible{outline-color:#0a1a4a}
.lplay.is-wait::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:#8fc3ff;animation:lspin 1s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}
.lbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:0 11px;border-radius:999px;border:1px solid rgba(10,26,74,.22);color:#0a1a4a;font:500 10.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.lbtn:hover{border-color:#0a1a4a}
.lbtn[aria-pressed="true"]{background:#0a1a4a;color:#fff;border-color:#0a1a4a}
.lbtn--ic{width:30px;padding:0}
.lbtn--ic svg{width:12px;height:12px;fill:currentColor}
.lsel{appearance:none;-webkit-appearance:none;max-width:100%;min-height:30px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 28px 0 11px;border-radius:999px;border:1px solid rgba(10,26,74,.22);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%230a1a4a' stroke-width='1.3' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") right 10px center/11px no-repeat;color:#0a1a4a;font:400 12px/1 var(--body);cursor:pointer}
.lnum{font:500 11px/1 var(--display);letter-spacing:.16em;color:#8c9ab0}
.lnote{margin:0;font:400 12px/1.5 var(--body);color:#6a7891}
.lnote a{color:inherit}

/* ---------- hero: the way in ---------- */
.lcta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;margin:22px 0 0;padding:6px 18px 6px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff;font:500 11px/1.3 var(--display);letter-spacing:.18em;text-transform:uppercase;text-align:left;transition:border-color .3s,background .3s}
.lcta:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.lcta .lplay{width:38px;height:38px;background:conic-gradient(#8fc3ff var(--p),rgba(255,255,255,.22) 0)}
.lcta .lplay::before{background:#fff}
.lcta .lplay{color:#0a1a4a}
.lcta small{display:block;margin-top:3px;font:400 11px/1.3 var(--body);letter-spacing:.04em;text-transform:none;color:#9fc0ef}
html:not(.js) .lcta{display:none}

/* ---------- the card at the top of the contents rail (≥1180px, inside .toc) ---------- */
.lcard{position:sticky;top:0;z-index:2;margin:0 0 20px;padding:14px 14px 12px;border:1px solid rgba(10,26,74,.14);border-radius:8px;background:#fff;box-shadow:0 8px 18px -12px rgba(10,26,74,.35);display:grid;gap:10px}
.lcard__top{display:flex;align-items:center;gap:12px}
.lcard__t{min-width:0;display:grid;gap:3px}
.lcard__t .lnum{color:#0a1a4a}
.lcard__t span{font:400 13px/1.35 var(--body);color:#0a1a4a;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lcard__time{font:500 10px/1.4 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#6a7891}
.lcard__row{display:flex;flex-wrap:wrap;gap:6px}
.lcard .lsel{width:100%}
.lcard[data-state="idle"] .lcard__row [data-l-stop],.lcard[data-state="idle"] .lcard__row [data-l-prev],.lcard[data-state="idle"] .lcard__row [data-l-next]{display:none}

/* ---------- the dock (narrow screens), appended to <body> ---------- */
.ldock{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:120;display:none;align-items:center;gap:10px;height:56px;max-width:calc(100vw - 270px);padding:0 10px 0 0;border-radius:999px;background:#0a1a4a;color:#fff;box-shadow:0 10px 30px rgba(10,26,74,.3),0 0 0 1px rgba(255,255,255,.12) inset;transform:translate(-50%,8px);opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.ldock .lplay{width:56px;height:56px;background:conic-gradient(#8fc3ff var(--p),rgba(255,255,255,.18) 0)}
.ldock .lplay::before{inset:4px}
.ldock__t{display:flex;align-items:baseline;gap:8px;flex:0 1 auto;min-width:0;max-width:min(380px,calc(100vw - 560px));min-height:44px;padding:0 4px;color:#fff;font:400 13px/1.3 var(--body);text-align:left}
.ldock__t b{font:500 11px/1 var(--display);letter-spacing:.16em;color:#8fc3ff}
.ldock__t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.ldock__time{font:500 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal;flex:0 1 auto;min-width:0}
@media (max-width:900px){.ldock__t span{display:none}.ldock__t{max-width:none}}
.ldock .lbtn{border-color:rgba(255,255,255,.3);color:#fff}
.ldock .lbtn:hover{border-color:#fff}
.ldock .lbtn[aria-pressed="true"]{background:#fff;color:#0a1a4a;border-color:#fff}
html.js.listen-on .ldock{display:inline-flex;opacity:1;transform:translate(-50%,0)}
@media (min-width:1180px){html.js.listen-on .ldock{display:none}}
@media (max-width:760px){
  .ldock{bottom:calc(82px + env(safe-area-inset-bottom,0px));height:50px;padding-right:8px;max-width:calc(100vw - 150px)}
  .ldock .lplay{width:50px;height:50px}
  .ldock__t span,.ldock [data-l-rate],.ldock [data-l-stop]{display:none}
  .ldock__t{gap:8px;min-height:50px;padding:0 8px;min-width:44px;justify-content:center}
  html:is([data-a11y-zoom="1"],[data-a11y-zoom="2"],[data-a11y-zoom="3"]) .ldock__time{display:none}
  /* the contents pill shrinks to its ring so the dock fits between it and the T button */
  html.listen-on .tocfab{padding:0 8px;gap:0}
  html.listen-on .tocfab > span:last-child{display:none}
}
html.js.listen-on.menu-open .ldock,html.js.listen-on.modal-open .ldock,html.js.listen-on.tocsheet-open .ldock{opacity:0;pointer-events:none}

/* ---------- the row inside the contents sheet ---------- */
.lrow{display:grid;gap:10px;margin:0 0 16px;padding:12px 14px;border:1px solid rgba(10,26,74,.14);border-radius:10px;background:#f6f8fb}
.lrow__top{display:flex;align-items:center;gap:12px}
.lrow__t{min-width:0;display:grid;gap:2px;flex:1}
.lrow__t .lnum{color:#0a1a4a}
.lrow__t span{font:400 14px/1.35 var(--body);color:#0a1a4a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow__time{font:500 10px/1.4 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#6a7891}
.lrow__row{display:flex;flex-wrap:wrap;gap:6px}
.lrow .lsel{width:100%}
.lrow[data-state="idle"] [data-l-stop],.lrow[data-state="idle"] [data-l-prev],.lrow[data-state="idle"] [data-l-next]{display:none}

/* ---------- modes ---------- */
html.a11y-contrast .lbtn,html.a11y-contrast .lcard__t span,html.a11y-contrast .lrow__t span{color:#000;border-color:#000}
html.a11y-contrast .ldock .lbtn{color:#fff;border-color:#fff}
html.a11y-contrast .ldock .lbtn[aria-pressed="true"]{background:#fff;color:#000}
html.a11y-motion .lplay,html.reduced .lplay,html.a11y-motion .ldock,html.reduced .ldock{transition:none}
html.a11y-motion .lplay.is-wait::after{animation:none;border-top-color:transparent}
@media (prefers-reduced-motion:reduce){.lplay,.ldock,[data-say]{transition:none}}
/* Frost skin: slate instead of navy, mono numbers, squared corners */
html[data-skin="frost"] .lplay::before,html[data-skin="frost"] .ldock,html[data-skin="frost"] .lbtn[aria-pressed="true"]{background:var(--slate,#0f1c2b)}
html[data-skin="frost"] .lcta{color:var(--slate,#0f1c2b);border-color:var(--ln)}
html[data-skin="frost"] .lcta:hover{border-color:var(--slate,#0f1c2b);background:rgba(15,28,43,.05)}
html[data-skin="frost"] .lcta small{color:var(--fg3,#6a7891)}
html[data-skin="frost"] .lcta .lplay::before{background:var(--slate,#0f1c2b)}
html[data-skin="frost"] .lcta .lplay{color:#fff}
html[data-skin="frost"] .ldock .lbtn{color:#fff;border-color:rgba(255,255,255,.3)}
html[data-skin="frost"] .ldock .lbtn[aria-pressed="true"]{background:#fff;color:var(--slate,#0f1c2b)}
html[data-skin="frost"] .lcard .lplay:focus-visible,html[data-skin="frost"] .lrow .lplay:focus-visible,html[data-skin="frost"] .lcard .lbtn[aria-pressed="true"]:focus-visible,html[data-skin="frost"] .lrow .lbtn[aria-pressed="true"]:focus-visible{outline-color:var(--slate,#0f1c2b)}
html[data-skin="frost"] .lbtn,html[data-skin="frost"] .lcard__t .lnum,html[data-skin="frost"] .lrow__t .lnum,html[data-skin="frost"] .lcard__t span,html[data-skin="frost"] .lrow__t span{color:var(--slate,#0f1c2b)}
html[data-skin="frost"] .lbtn[aria-pressed="true"]{border-color:var(--slate,#0f1c2b);color:#fff}
html[data-skin="frost"] .lnum,html[data-skin="frost"] .lcard__time,html[data-skin="frost"] .lrow__time,html[data-skin="frost"] .ldock__time,html[data-skin="frost"] .ldock__t b,html[data-skin="frost"] .lbtn,html[data-skin="frost"] .lcta{font-family:var(--mono);letter-spacing:.02em;text-transform:none}
html[data-skin="frost"] .lcard,html[data-skin="frost"] .lrow{border-radius:2px;border-color:var(--ln)}
html[data-skin="frost"] .lrow{background:rgba(255,255,255,.6)}
html[data-skin="frost"] [data-say].is-reading,html[data-skin="frost"] .gloss dt.is-reading + dd,html[data-skin="frost"] .guide__article h2.is-reading{box-shadow:-12px 0 0 -9px var(--slate,#0f1c2b);background:linear-gradient(90deg,rgba(15,28,43,.07),rgba(15,28,43,0) 72%)}
html[data-skin="frost"] .guide__article h2.is-reading{background:none}