/* Replay reader. Site tokens come from site.css and mobile.css.
   Desktop help is sticky inside the episode; mobile help is a non-modal sheet. */
:root {
  --lx-current: #fff1e6;
  --lx-target: #f6e7d3;
  --lx-tr: 28px;
  --lx-dock: calc(var(--tabbar) + env(safe-area-inset-bottom) + 90px);
}
body[data-player-mode="episode"] { --lx-dock: calc(var(--tabbar) + env(safe-area-inset-bottom) + 124px); }
@media (min-width:761px) { :root { --lx-dock: calc(var(--player) + 30px + env(safe-area-inset-bottom)); } }
.lx svg[fill="none"], .lx-panel svg[fill="none"], .lx-open svg[fill="none"] { fill:none; }
body.lx-on .mobile-prompter { display:none !important; }
body.lx-on.listening-open .listening-screen .mobile-prompter:not([hidden]) { display:block !important; }

/* One stretched grid column bounds sticky help to the episode, before the footer. */
.view.lx-host { animation:none; transform:none; }
.page.reading.lx-host { grid-template-columns:minmax(0,1fr) minmax(360px,420px); gap:24px 36px; }
.lx-host > .lx-side { position:relative; align-self:stretch; min-width:0; }
.lx-host > .lx-side > .lx-panel {
  position:sticky; top:82px; height:calc(100dvh - 82px - var(--player) - 32px);
  box-sizing:border-box; min-height:0;
}
.lx-host .page-head { margin:0 0 10px; }
.lx-host .page-head h1 { font-size:clamp(28px,3vw,38px); }
.lx-host .archive-facts { margin:8px 0; }
.lx-host article > .sheet-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.lx-host .page-section { margin-top:18px; padding-top:16px; }
.lx-host .section-head { margin-bottom:8px; }

/* Transcript: exact source text, inline sentences, selected dictionary terms. */
.lx-bar { position:sticky; top:74px; z-index:5; display:flex; align-items:center; flex-wrap:wrap; gap:8px; background:rgb(244 241 233 / .94); backdrop-filter:blur(8px); }
:is(.page,.lx-sheet-host) .lx-howto { display:none; margin:0; font-size:12.5px; line-height:1.5; color:var(--muted); }
.lx-howto svg { display:inline-block; width:14px; height:14px; vertical-align:-2px; }
.lx-howto u { text-decoration:underline dotted var(--copper); text-underline-offset:3px; }
.lx-follow { margin-left:auto; min-height:32px; padding:6px 12px; border-radius:999px; background:var(--paper); color:var(--green); box-shadow:inset 0 0 0 1px var(--line-2); font-size:12.5px; font-weight:700; }
.lx-follow:hover { background:#eef4ec; }
.lx-follow[hidden] { display:none; }
:is(.page.archive,.lx-sheet-host) .lx-transcript { display:grid; gap:16px; margin:0; }
:is(.page.archive,.lx-sheet-host) .lx-turn { padding:0; border-radius:0; background:none; font-size:inherit; cursor:default; }
:is(.page.archive,.lx-sheet-host) .lx-turn.is-active { background:none; }
.lx-turn > b { display:block; margin:0 0 2px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.lx-turn.is-active > b, .lx-turn:has(.lx-s.is-current) > b { color:var(--live); }
:is(.page,.lx-sheet-host) .lx-para { margin:0; font-size:18px; line-height:1.8; color:var(--ink-2); }
.lx-s { cursor:pointer; border-radius:6px; padding:3px 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; transition:background .2s; -webkit-tap-highlight-color:transparent; }
@media (hover:hover) { .lx-s:hover { background:var(--sunk); } }
.lx-s.is-current { background:var(--lx-current); color:var(--ink); }
.lx-s.is-target { background:var(--lx-target); color:var(--ink); box-shadow:inset 0 -2px 0 var(--copper); }
.lx-s:focus-visible { outline:2px solid var(--copper); }
.lx .spoken-word.is-active { background:#ffd9b8; color:#382111; font-weight:inherit; box-shadow:0 0 0 2px #ffd9b8; }
.lx-tr { display:inline-grid; place-items:center; width:var(--lx-tr); height:var(--lx-tr); margin:calc((var(--lx-tr) - 1em) / -2) 1px calc((var(--lx-tr) - 1em) / -2) 0; vertical-align:middle; border-radius:8px; color:#b3ab98; }
.lx-tr svg { width:15px; height:15px; }
@media (hover:hover) { .lx-tr:hover { color:var(--green); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2); } }
.lx-s.is-current .lx-tr { color:#c98a63; }
.lx-tr[aria-expanded="true"] { color:#fff; background:var(--green); }
.lx-para .lx-s:first-child .lx-tr { margin-left:-4px; }
.lx-term { display:inline; padding:0 1px; border-radius:4px; font:inherit; line-height:1.25; color:inherit; vertical-align:baseline; text-decoration:underline dotted rgb(182 124 73 / .8); text-decoration-thickness:1.5px; text-underline-offset:4px; -webkit-tap-highlight-color:transparent; }
@media (hover:hover) { .lx-term:hover { background:#f3e2cd; text-decoration-style:solid; } }
.lx-term.is-open { background:var(--green); color:#fff; text-decoration-color:transparent; box-shadow:0 0 0 2px var(--green); }
.lx-term.is-open .spoken-word.is-active { background:transparent; box-shadow:none; color:inherit; }

/* Help: compact shared controls, plain translation typography. */
.lx-panel { overflow-y:auto; overscroll-behavior:contain; padding:12px 16px; border-radius:18px; background:var(--paper); border:1px solid var(--line); scrollbar-width:thin; }
.lx-panel-head { position:sticky; top:-12px; z-index:2; display:flex; align-items:flex-start; gap:10px; margin:-12px -16px 0; padding:12px 16px 10px; background:var(--paper); }
.lx-panel:not([data-mode="idle"]) .lx-panel-head { box-shadow:0 1px 0 var(--line); }
.lx-panel-head > div { flex:1; min-width:0; }
.lx-kicker { display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--copper); }
:is(.page,.lx-sheet-host) .lx-panel h2 { margin:3px 0 0; font:500 22px/1.12 var(--serif); color:var(--green-900); overflow-wrap:anywhere; }
:is(.page,.lx-sheet-host) .lx-panel[data-mode="idle"] h2 { font-size:18px; }
.lx-close { flex:none; width:36px; height:36px; margin:-6px -8px 0 0; border-radius:50%; display:grid; place-items:center; color:var(--muted); }
.lx-close:hover { background:var(--sunk); color:var(--ink); }
.lx-panel[data-mode="idle"] .lx-close { display:none; }
.lx-panel:not([data-mode="idle"]) #lx-idle,
.lx-panel:not([data-mode="dict"]) #lx-dict,
.lx-panel:not([data-mode="translate"]) #lx-translate,
.lx-panel:not([data-mode="unavailable"]) #lx-unavailable { display:none; }
.lx-panel[data-mode="idle"] .lx-context, .lx-panel[data-mode="idle"] .lx-paused { display:none; }
.lx-paused { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; padding:6px 8px; border-radius:12px; background:#eef4ec; color:var(--green-900); }
.lx-paused > span { flex:0 0 auto; font-size:12px; }
.lx-paused button { flex:none; min-height:32px; padding:5px 12px; border-radius:999px; background:var(--green); color:#fff; font-size:12.5px; font-weight:700; }
.lx-paused label { margin-left:auto; font-size:12px; }
.lx-paused select { min-width:0; max-width:140px; min-height:32px; border:1px solid var(--line-2); border-radius:999px; background:var(--paper); color:var(--ink); padding:4px 8px; font:600 12px var(--sans); }
.lx-context { margin:10px 0 0; padding:8px 10px; border-left:3px solid var(--gold); background:#faf6ec; border-radius:0 12px 12px 0; font-size:14px; line-height:1.5; color:var(--ink); max-height:110px; overflow-y:auto; }
.lx-legend { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:9px; }
:is(.page,.lx-sheet-host) .lx-legend li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:start; margin:0; font-size:13.5px; line-height:1.4; color:var(--ink-2); }
.lx-legend-ico { display:grid; place-items:center; width:30px; height:26px; border-radius:8px; background:var(--bg); font-size:13px; font-weight:700; color:var(--ink-2); }
.lx-legend-ico svg { width:15px; height:15px; }
.lx-legend-ico u { text-decoration:none; border-bottom:1.5px dotted var(--copper); }
.lx-translation-label { display:block; margin-top:14px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
:is(.page,.lx-sheet-host) .lx-trans-out { margin:5px 0 0; font:400 15px/1.5 var(--sans); color:var(--ink); }
.lx-provider { display:block; margin-top:10px; font-size:11.5px; color:var(--muted); }

/* Dictionary and request states. */
:is(.page,.lx-sheet-host) .lx-lookup { margin:12px 0 0; font-size:13px; color:var(--muted); }
.lx-results > details { margin-top:12px; }
.lx-results > details + details { padding-top:12px; border-top:1px solid var(--line); }
summary.lx-pos, summary.lx-more { list-style:none; cursor:pointer; }
summary.lx-pos::-webkit-details-marker, summary.lx-more::-webkit-details-marker { display:none; }
summary.lx-pos { display:inline-flex; gap:6px; align-items:center; min-height:30px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ink-2); background:var(--bg); box-shadow:inset 0 0 0 1px var(--line-2); text-transform:capitalize; }
summary.lx-pos::after, summary.lx-more::after { content:'▾'; font-size:11px; }
.lx-results > details:not([open]) > summary.lx-pos::after { transform:rotate(-90deg); }
.lx-senses { margin:12px 0 0; padding-left:22px; display:grid; gap:10px; }
:is(.page,.lx-sheet-host) .lx-sense { margin:0; font-size:15px; line-height:1.45; color:var(--ink); }
.lx-sense::marker { color:var(--copper); font-weight:700; font-size:13px; }
:is(.page,.lx-sheet-host) .lx-sense-def { margin:0; font-size:inherit; }
:is(.page,.lx-sheet-host) .lx-sense-ex { margin:3px 0 0; font-size:13.5px; font-style:italic; color:var(--ink-2); }
.lx-sense-tag { display:inline-block; margin-top:4px; padding:1px 7px; border-radius:999px; background:var(--sunk); font-size:11px; font-weight:700; color:var(--muted); }
.lx-more { display:inline-flex; gap:6px; margin-top:10px; padding:6px 2px; font-size:13px; font-weight:700; color:var(--green); }
:is(.page,.lx-sheet-host) .lx-source { margin:14px 0 0; font-size:11.5px; line-height:1.45; color:var(--muted); }
:is(.page,.lx-sheet-host) .lx-status { margin:12px 0 0; padding:10px 12px; border-radius:12px; background:var(--sunk); font-size:14px; color:var(--ink-2); }
.lx-status[data-state="ready"] { display:none; }
.lx-status[data-state="error"] { background:#fbe9e1; color:#6b2a14; }
.lx-status[data-state="loading"]::before { content:''; display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--green); animation:lx-spin .8s linear infinite; }
@keyframes lx-spin { to { transform:rotate(360deg); } }
.lx-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
:is(.page,.lx-sheet-host) .lx-btn, .lx-btn { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; text-decoration:none; background:var(--paper); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line-2); }
.lx-btn:hover { color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.lx-btn[target="_blank"]::after { content:'↗'; }
.lx-btn:disabled { opacity:.45; pointer-events:none; }

/* Episode navigation comes after the transcript, never in the reader toolbar. */
.lx-episode-nav { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
.lx-adjacent { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
:is(.page,.lx-sheet-host) .lx-episode-card { display:flex; flex-direction:column; gap:6px; min-width:0; padding:14px; background:var(--paper); border:1px solid var(--line); border-radius:14px; color:var(--ink); text-decoration:none; }
.lx-episode-card:only-child { grid-column:1 / -1; }
.lx-episode-card small { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.lx-episode-card strong { font-size:14px; line-height:1.45; }
.lx-episode-card > span { color:var(--muted); font-size:12px; }
.lx-episode-picker { margin-top:12px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.lx-episode-picker > summary { cursor:pointer; padding:12px 14px; font-size:13px; font-weight:700; color:var(--green); }
.lx-episode-picker > .archive-rail { position:static; max-height:380px; margin:0; border:0; background:none; }
:is(.page,.lx-sheet-host) .lx-full-archive { display:inline-block; margin:12px 14px; font-size:12px; color:var(--green); }
.lx-current-badge { margin-left:auto; color:var(--green); font-size:10px; font-weight:700; }
.lx-episode-about { padding:12px 0; margin-top:14px; border-top:1px solid var(--line); }
.lx-episode-about > summary { color:var(--muted); font-size:13px; cursor:pointer; }
.lx-episode-about .page-lead { font-size:15px; }

/* The quick sheet previews the learning view; it does not contain another modal. */
.lx-sheet-explore { display:block; padding:14px 16px; margin:16px 0; border:1px solid #b8cdbb; border-radius:16px; background:#f1f6ee; color:var(--green); text-decoration:none; }
.lx-sheet-explore:hover { background:#eaf2e6; border-color:var(--green); }
.lx-sheet-title { display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:700; }
.lx-sheet-hint { display:block; margin-top:4px; color:var(--ink-2); font-size:13px; line-height:1.5; }
.listening-screen .lx-open { display:block; width:100%; min-height:48px; padding:12px; margin-top:14px; border-radius:14px; background:var(--paper); color:var(--green); text-align:center; text-decoration:none; font-size:15px; font-weight:700; }

@media (max-width:1000px) {
  .page.reading.lx-host { display:block; }
  .lx-host > .lx-side { position:static; }
  .lx-host > .lx-side > .lx-panel { position:fixed; z-index:45; top:auto; left:8px; right:8px; bottom:var(--lx-dock); height:auto; max-height:min(65vh,calc(100dvh - var(--lx-dock) - 80px)); box-shadow:0 24px 60px -18px rgb(13 46 32 / .45); }
  .lx-side > .lx-panel::before { content:''; display:block; width:38px; height:4px; margin:0 auto 10px; border-radius:4px; background:var(--line-2); }
  body:not(.lx-panel-open) .lx-side > .lx-panel { display:none; }
  body.lx-panel-open main { padding-bottom:calc(56vh + 40px); }
  body.lx-panel-open .site-foot { padding-bottom:calc(65vh + var(--lx-dock) + 20px); }
  :is(.page,.lx-sheet-host) .lx-howto { display:block; padding:4px 0 8px; }
}
@media (max-width:760px) {
  :root { --lx-tr:30px; }
  .lx-host .page-head h1 { font-size:29px; }
  .lx-bar { top:0; }
  :is(.page,.lx-sheet-host) .lx-para { font-size:17px; line-height:1.95; }

  .lx-paused { gap:6px; }
  .lx-paused select { max-width:125px; }
  .lx-adjacent { grid-template-columns:1fr; }
}
@media (pointer:coarse) { :root { --lx-tr:32px; } .lx-tr svg { width:16px; height:16px; } }
@media (prefers-reduced-motion:reduce) { .lx-s, .lx-status::before { animation:none; transition:none; } }

/* Keep programme metadata below its label, without crowding the close control. */
@media (max-width:760px) {
  #sheet .sheet-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; }
  #sheet .sheet-head .badge { grid-column:1; grid-row:1; width:fit-content; max-width:100%; white-space:normal; }
  #sheet .sheet-head > .muted { grid-column:1; grid-row:2; margin:0; }
  #sheet .sheet-head > [data-close-sheet] { grid-column:2; grid-row:1 / 3; align-self:start; }
}

/* A single dialog: its scroll area and help share the available space. */
#sheet .lx-sheet-explore { display:inline-flex; align-items:center; gap:7px; min-height:36px; margin:0; padding:4px 0; border:0; border-radius:0; background:none; font-size:13px; color:var(--green); font-weight:600; cursor:pointer; }
#sheet .lx-sheet-explore:hover { background:none; }
#sheet .lx-sheet-explore input { width:17px; height:17px; margin:0; accent-color:var(--green); cursor:pointer; }
#sheet.lx-sheet-host { display:grid; grid-template-columns:minmax(0,1fr) 340px; width:min(1000px,calc(100vw - 32px)); }
#sheet.lx-sheet-host > .sheet-scroll { min-height:0; min-width:0; }
#sheet.lx-sheet-host > .lx-panel { min-height:0; max-height:100%; border:0; border-left:1px solid var(--line); border-radius:0; padding-top:24px; }
#sheet.lx-sheet-host .lx-panel-head { top:-24px; }
.lx-sheet-host .lx-panel h2 { margin:3px 0 0; font:500 21px/1.2 var(--serif); }
.lx-sheet-host .lx-transcript { margin-top:12px; }
.lx-sheet-host .lx-turn { border:0; }
.lx-sheet-host .lx-para { font-size:16px; line-height:1.85; }
.lx-sheet-host .lx-tr { --lx-tr:28px; }
.lx-full-reader { display:block; width:fit-content; margin-top:18px; font-size:13px; color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.lx-sheet-host .transcript summary { flex-wrap:wrap; gap:5px; }
.lx-sheet-host .transcript summary small { flex-basis:100%; text-align:left; }
@media (max-width:900px) {
  #sheet.lx-sheet-host { width:min(540px,100%); grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:92dvh; max-height:92dvh; }
  #sheet.lx-sheet-host > .lx-panel { display:none; }
  #sheet.lx-sheet-host.lx-help-open { grid-template-rows:minmax(0,1fr) minmax(0,min(48%,380px)); }
  #sheet.lx-sheet-host.lx-help-open > .lx-panel { display:block; border-left:0; border-top:1px solid var(--line); padding-top:12px; }
  #sheet.lx-sheet-host .lx-panel-head { top:-12px; }
}

.lx-source-link { color:var(--muted); text-decoration:underline; text-underline-offset:3px; font:inherit; }
.lx-sheet-host .transcript summary { margin-bottom:10px; }
@media(max-width:900px) {
 #sheet.lx-sheet-host .lx-context { display:none; }
 #sheet.lx-sheet-host .lx-panel[data-mode="translate"] .lx-panel-head h2 { display:none; }
 #sheet.lx-sheet-host .lx-panel-head { min-height:42px; align-items:center; }
 #sheet.lx-sheet-host .lx-translation-label { margin-top:10px; }
}

.lx-paused > span:empty { display:none; }

.lx-mini-guide { display:none; }
@media(max-width:900px) {
 #sheet .lx-mini-guide { display:block; margin:12px 0 6px; padding:0; border:0; color:var(--muted); font-size:13px; line-height:1.45; }
 #sheet .lx-mini-guide summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-2); }
 #sheet .lx-mini-guide > div { display:grid; gap:3px; margin-top:5px; }
 #sheet .lx-mini-guide span { display:flex; align-items:center; gap:6px; }
 #sheet .lx-mini-guide svg { flex:none; width:14px; height:14px; }
 #sheet .lx-mini-guide u { font-size:11px; text-decoration:underline dotted; text-underline-offset:2px; }
 #sheet.lx-sheet-host .transcript summary small { display:none; }
}