/* Mono learning layer · 3.49.0 — loads after map-long-3.47.5.css.
   Readability (sizes, contrast), memory loop UI, meaningful motion, phone step layout. */
:root{--muted:#5f675f;--orange:#8f5119;--st-remembered:var(--green);--st-practice:#c98a4e;--st-new:var(--line);--ease:cubic-bezier(.2,.7,.2,1)}
body.dark{--st-practice:#d9a066}

/* ---------- readability: larger secondary text, AA contrast ---------- */
.mono-learning .btn{font-size:13px}
.mono-learning .btn.compact{font-size:12px}
.mono-learning .segmented button{font-size:12px}
.mono-learning .zone-head p{font-size:14px}
.mono-learning .zone-head .zone-label{font-size:11px}
.mono-learning .eyebrow{font-size:11px}
.mono-learning .intro p{font-size:14px}
.mono-learning .source-strip .meta{font-size:12px}
.mono-learning .caption-footer{font-size:12px}
.mono-learning .media-caption .caption-translated{font-size:15px}
.mono-learning .panel-top h3{font-size:14px}
.mono-learning .panel-top small{font-size:12px}
.mono-learning .cue-item strong{font-size:14px}
.mono-learning .cue-item p{font-size:13px}
.mono-learning .cue-item .cue-time{font-size:12px}
.mono-learning .context-pill{font-size:12px}
.mono-learning .practice-translation{font-size:16px}
.mono-learning .practice-note,.mono-learning .memory-check small{font-size:13px}
.mono-learning .echo-side small{font-size:12px}
.mono-learning .write-main .write-hint{font-size:13px}
.mono-learning .write-meta{font-size:12px}
.mono-learning .write-reference .ref-title{font-size:11px}
.mono-learning .reference-copy{font-size:15px}
.mono-learning .reference-translation{font-size:13px}
.mono-learning .separator span{font-size:12px}
.mono-learning .immersion-head p{font-size:14px}
.mono-learning .stage-status,.mono-learning .round-count,.mono-learning .settings-inline label,.mono-learning .audio-source-label{font-size:12px}
.mono-learning .rail-copy strong{font-size:12px}
.mono-learning .rail-copy small{font-size:11px}
.mono-learning .page-footer{font-size:11px}

/* ---------- retired controls (replaced, not removed from the DOM) ---------- */
.mono-learning .floating-context,.mono-learning #visualPreview,.mono-learning #hideEcho,
.mono-learning .memory-check [data-memory],.mono-learning .write-reference .self-check,
.mono-learning #echo .focus-top .task-tag,.mono-learning #weave .focus-top .task-tag,
.mono-learning #echoOriginal{display:none!important}
.mono-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- status strips ---------- */
.mono-strip{display:flex;align-items:center;gap:10px;min-width:0}
.mono-strip-track{position:relative;display:flex;gap:2px;flex:1;min-width:90px;height:8px}
.mono-strip-track span{flex:1 1 0;min-width:2px;border-radius:3px;background:var(--st-new);transition:background-color .24s var(--ease)}
.mono-strip-track.is-stacked{gap:0;border-radius:4px;overflow:visible;background:var(--st-new)}
.mono-strip-track.is-stacked span{border-radius:0}
.mono-strip-track.is-stacked span:first-child{border-start-start-radius:4px;border-end-start-radius:4px}
.mono-strip-marker{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--blue);transform:translateX(-50%)}
[dir=rtl] .mono-strip-marker{transform:translateX(50%)}
.mono-strip-track [data-status=remembered]{background:var(--st-remembered)}
.mono-strip-track [data-status=practice]{background:var(--st-practice)}
.mono-strip-track [data-status=current]{background:var(--blue)}
.mono-strip-label{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mono-progress{padding:12px 20px;border-bottom:1px solid var(--line)}
.focus-top .mono-strip{flex:0 1 220px;margin-inline-start:auto}

/* ---------- transcript status dots ---------- */
.mono-learning .cue-item{grid-template-columns:14px 44px minmax(0,1fr)}
.mono-dot{width:12px;height:12px;margin-top:4px;border-radius:50%;border:1.5px dashed #b3bab2;position:relative;transition:background-color .24s var(--ease),border-color .24s var(--ease)}
.mono-dot[data-status=remembered]{background:var(--st-remembered);border:0}
.mono-dot[data-status=remembered]::after{content:"";position:absolute;left:3.5px;top:2px;width:3px;height:6px;border:solid var(--paper);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.mono-dot[data-status=practice]{border:2.5px solid var(--st-practice)}
.mono-dot[data-status=current]{background:var(--blue);border:0;box-shadow:0 0 0 3px var(--blue-bg)}
.mono-dot.is-due:not([data-status=current])::before{content:"";position:absolute;inset-inline-end:-4px;top:-4px;width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ---------- Echo / Weave sentence navigation ---------- */
.mono-anchor-row{display:flex;align-items:center;gap:8px;min-width:0}
.mono-learning .focus-top{flex-wrap:wrap}
.mono-navbtn.btn{min-height:44px;min-width:44px;padding:0;border-radius:12px}
.mono-navbtn svg{width:18px;height:18px}
[dir=rtl] .mono-navbtn svg{transform:scaleX(-1)}
.shared-rail .mono-navbtn.btn{min-height:36px;min-width:36px;border-radius:10px}

/* ---------- Echo: cloze ladder ---------- */
.mono-ladder{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--orange-bg) 70%,var(--paper))}
.mono-ladder button{flex:1 1 120px;min-height:52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:7px 12px;border-radius:11px;background:transparent;color:var(--ink);text-align:start;transition:background-color .24s var(--ease),color .24s var(--ease)}
.mono-ladder button:hover:not(:disabled){background:color-mix(in srgb,var(--orange) 10%,transparent)}
.mono-ladder button strong{font-size:13px;font-weight:650}
.mono-ladder button small{font-size:11px;color:var(--muted)}
.mono-ladder button[aria-pressed=true]{background:var(--orange);color:#fff}
.mono-ladder button[aria-pressed=true] small{color:#fff;opacity:.88}
body.dark .mono-ladder button[aria-pressed=true],body.dark .mono-ladder button[aria-pressed=true] small{color:#16211c}
.mono-cloze{unicode-bidi:plaintext;overflow-wrap:anywhere}
.mono-blank{display:inline-block;color:var(--orange);background:var(--orange-bg);border-radius:8px;padding:0 .22em;letter-spacing:.06em;line-height:1.3;animation:mono-blank .24s var(--ease) both}
.mono-cloze.is-prompt{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--orange);min-height:0;text-transform:uppercase}
.mono-learning #echoTranslated.mono-prompt-text{font-size:clamp(22px,2.4vw,28px);line-height:1.45;color:var(--ink);font-weight:600;letter-spacing:-.4px;margin-top:8px}
#monoCompare.is-ready{border-color:color-mix(in srgb,var(--orange) 45%,transparent);color:var(--orange);background:var(--orange-bg)}

/* real-progress bars replace the decorative bounce */
.mono-learning .wave-bars.mono-bars{gap:3px;height:62px}
.mono-learning .wave-bars.mono-bars i{width:3px;height:var(--bar);opacity:.28;animation:none!important;transition:opacity .12s linear}
.mono-learning .wave-bars.mono-bars i.on{opacity:1}

/* ---------- Echo: self rating ---------- */
.mono-rates{display:flex;gap:8px;flex-wrap:wrap}
.mono-rate{min-height:52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:7px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);text-align:start;transition:background-color .24s var(--ease),border-color .24s var(--ease),transform .12s var(--ease)}
.mono-rate:hover:not(:disabled){background:var(--soft)}
.mono-rate:active:not(:disabled){transform:scale(.97)}
.mono-rate strong{font-size:14px;font-weight:650}
.mono-rate small{font-size:11px;color:var(--muted)}
.mono-rate[aria-pressed=true]{background:var(--orange-bg);border:1.5px solid var(--st-practice)}
.mono-rate[data-rate=easy][aria-pressed=true]{background:var(--green-bg);border-color:var(--green)}
.mono-fly{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--st-practice);z-index:120;pointer-events:none}
.mono-fly[data-rate=easy]{background:var(--green)}
.mono-fly[data-rate=hard]{background:var(--orange)}

/* ---------- Flow: word highlight + key words ---------- */
.mono-w{border-radius:5px;transition:background-color .12s linear,color .12s linear}
.mono-key{text-decoration:underline dotted color-mix(in srgb,var(--blue) 75%,transparent) 2px;text-underline-offset:5px}
#flowOriginal.is-live .mono-w.is-ahead{color:var(--muted)}
.mono-w.is-now{background:var(--blue-bg);color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg)}

/* ---------- Weave: key words + checklist ---------- */
.mono-keywords{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-6px 0 16px}
.mono-kw-title{font-size:12px;font-weight:650;color:var(--muted);margin-inline-end:4px}
.mono-kw-list{display:flex;flex-wrap:wrap;gap:8px}
.mono-kw{min-height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:30px;border:1px solid color-mix(in srgb,var(--green) 35%,var(--line));background:var(--paper);color:var(--green);font-size:14px;font-weight:600;transition:background-color .24s var(--ease)}
.mono-kw:hover:not(:disabled){background:var(--green-bg)}
.mono-kw-mark{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;transition:background-color .24s var(--ease)}
.mono-kw.is-used{background:var(--green-bg)}
.mono-kw.is-used .mono-kw-mark{background:currentColor}
.mono-check{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.mono-check-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:650}
.mono-check-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5}
.mono-check-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;color:#b3bab2}
.mono-check-item.is-done .mono-check-icon{background:var(--green);color:var(--paper)}
.mono-check-item.is-done .mono-check-icon svg{width:14px;height:14px}
.mono-saved-pill{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px;border-radius:30px;background:var(--green-bg);color:var(--green);font-size:13px;font-weight:600}
.mono-saved-pill[hidden]{display:none}
.mono-draw svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:mono-draw .42s .08s var(--ease) forwards}

/* ---------- sentence map + due queue ---------- */
.mono-review{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;margin:0 0 22px}
.mono-review[hidden]{display:none}
.mono-review-map,.mono-review-due{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mono-review h3{font-size:17px;letter-spacing:-.3px}
.mono-map-summary,.mono-map-hint,.mono-due-empty{font-size:13px;color:var(--muted)}
.mono-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-height:300px;overflow:auto;padding:3px;scrollbar-width:thin}
.mono-tile{position:relative;height:44px;border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--muted) 45%,transparent);background:var(--paper);color:var(--muted);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;transition:background-color .24s var(--ease),transform .12s var(--ease)}
.mono-tile:hover{transform:translateY(-1px)}
.mono-tile[data-status=remembered]{background:var(--st-remembered);border:0;color:var(--paper)}
.mono-tile[data-status=practice]{background:var(--orange-bg);border:2px solid var(--st-practice);color:var(--ink)}
.mono-tile[data-status=current]{background:var(--blue);border:0;color:var(--paper)}
.mono-tile.is-due::after{content:"";position:absolute;top:4px;inset-inline-end:4px;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px var(--paper)}
.mono-due{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mono-due[hidden]{display:none}
.mono-due li+li{border-top:1px solid var(--line)}
.mono-due-row{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 4px;background:transparent;color:var(--ink);text-align:start;border-radius:10px}
.mono-due-row:hover{background:var(--soft)}
.mono-due-n{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:700;font-size:13px;background:var(--orange-bg);color:var(--orange)}
.mono-due-n[data-status=remembered]{background:var(--green-bg);color:var(--green)}
.mono-due-text{font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;unicode-bidi:plaintext}
.mono-due-badge{font-size:12px;font-weight:650;color:var(--orange);white-space:nowrap}
.mono-review-start.btn{margin-top:auto;align-self:stretch;min-height:46px;background:var(--ink);color:var(--paper)}
.mono-review-start.btn:hover:not(:disabled){background:var(--ink);filter:brightness(1.12)}
.mono-priority{display:flex;align-items:center;gap:9px;min-height:44px;font-size:12px;color:#ddd6e8;cursor:pointer}
.mono-priority input{width:18px;height:18px;accent-color:#d6c3f0}

/* ---------- motion: one easing, three durations (120 / 240 / 420 ms) ---------- */
@keyframes mono-rise{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes mono-blank{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes mono-pulse{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes mono-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes mono-draw{to{stroke-dashoffset:0}}
.mono-swap{animation:mono-rise .42s var(--ease) both}
.mono-pulse{animation:mono-pulse .5s var(--ease)}
.mono-pop{animation:mono-pop .3s var(--ease)}

/* ---------- desktop / tablet widths ---------- */
@media(max-width:950px){.mono-review{grid-template-columns:1fr}.focus-top .mono-strip{flex-basis:160px}}

/* ---------- phones: one learning step at a time ---------- */
@media(max-width:700px){
  .mono-ladder button{flex:1 1 calc(50% - 6px);min-height:48px}
  .mono-ladder button small{display:none}
  .mono-rates{width:100%}
  .mono-rate{flex:1 1 0;min-width:0;padding:7px 10px}
  .mono-rate small{font-size:10px}
  .focus-top .mono-strip{flex:1 1 100%;margin:4px 0 0}
  .mono-review-map,.mono-review-due{padding:18px;border-radius:18px}
  .mono-tiles{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));max-height:220px}
  .mono-tile{height:40px}
  .mono-learning .practice-actions .btn{flex:1 1 calc(50% - 10px)}
  .mono-learning .shared-rail{flex-wrap:wrap;row-gap:8px;padding:10px 12px}
  .mono-learning .shared-rail .rail-copy{flex:1 1 100%;order:-1;padding:0 2px}
  .mono-learning .rail-copy strong{max-width:none}
  .mono-learning .shared-rail .btn{flex:1 1 auto;min-height:40px}
  .mono-learning .shared-rail .mono-navbtn.btn{flex:0 0 40px;min-width:40px}
  .mono-steps main{padding-bottom:150px}
}
.mono-steps .separator,.mono-steps .next-link{display:none}
.mono-steps:not([data-mono-step=flow]) .intro,.mono-steps:not([data-mono-step=flow]) .source-strip{display:none}
.mono-steps .zone:not(.mono-step-on),.mono-steps .immersion:not(.mono-step-on){position:absolute!important;inset-inline-start:-9999px;top:0;width:min(100%,680px);pointer-events:none}
.mono-steps .zone.mono-step-on,.mono-steps .immersion.mono-step-on{animation:mono-rise .42s var(--ease) both}
.mono-steps .immersion{margin-top:0}
.mono-steps main{position:relative;overflow-x:clip}

@media(prefers-reduced-motion:reduce){
  .mono-swap,.mono-pulse,.mono-pop,.mono-blank,.mono-steps .zone.mono-step-on,.mono-steps .immersion.mono-step-on{animation:none!important}
  .mono-draw svg path{animation:none;stroke-dashoffset:0}
  .mono-w,.mono-tile,.mono-rate,.mono-ladder button,.mono-strip-track span{transition:none}
}

/* =================== 3.49: journey, next step, header progress, polish =================== */
.mono-hidden{display:none!important}
.mono-learning #echo .next-link{display:none}

/* header progress ring + due chip */
.mono-head-progress{margin-inline-start:auto;display:flex;align-items:center;gap:12px;flex:none}
.mono-head-progress[hidden]{display:none}
.mono-ring{width:38px;height:38px;display:block}
.mono-ring svg{width:38px;height:38px;transform:rotate(-90deg)}
.mono-ring circle{fill:none;stroke-width:4}
.mono-ring .track{stroke:var(--soft)}
.mono-ring .value{stroke:var(--green);stroke-linecap:round;transition:stroke-dashoffset .42s var(--ease)}
.mono-ring-copy{display:flex;flex-direction:column;line-height:1.2}
.mono-ring-text{font-size:14px;font-variant-numeric:tabular-nums}
.mono-ring-copy small{font-size:11px;color:var(--muted)}
.mono-due-chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border-radius:30px;background:var(--orange-bg);color:var(--orange);font-size:12px;font-weight:650;transition:transform .12s var(--ease)}
.mono-due-chip:hover{transform:translateY(-1px)}
.mono-due-chip i{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.mono-due-chip[hidden]{display:none}
.mono-lib-link{font-weight:600;color:var(--ink)!important}

/* zone number shows a check when this sentence's step is done */
.mono-learning .zone-number{position:relative;transition:background-color .24s var(--ease)}
.mono-learning .zone-number[data-done]::after{content:"";position:absolute;inset-inline-end:-5px;top:-5px;width:20px;height:20px;border-radius:50%;background:var(--zone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 0 3px var(--bg)}
body.dark .mono-learning .zone-number[data-done]::after,body.dark.mono-learning .zone-number[data-done]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%2316211c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Listen → Speak → Write chips in the rail */
.mono-chips{display:flex;align-items:center;gap:4px;flex:none}
.mono-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px 0 5px;border-radius:30px;font-size:12px;color:var(--muted);transition:background-color .24s var(--ease),color .24s var(--ease)}
.mono-chip:hover{background:var(--soft)}
.mono-chip-dot{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);font-size:11px;font-weight:700;transition:background-color .24s var(--ease),border-color .24s var(--ease)}
.mono-chip.is-done{color:var(--ink)}
.mono-chip.is-done .mono-chip-dot{border-color:transparent;background:var(--green);color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}
.mono-learning .shared-rail{width:min(860px,calc(100% - 36px))}

/* next step blocks */
.mono-next{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.mono-next[hidden]{display:none}
.mono-next-hint{font-size:13px;color:var(--muted)}
.mono-next-actions{display:flex;flex-wrap:wrap;gap:10px}
.mono-next-actions:empty{display:none}
.mono-next-actions .btn{min-height:44px;padding:0 18px;font-size:14px}
.mono-next-actions .btn.primary{background:var(--zone);color:#fff}
body.dark .mono-next-actions .btn.primary{color:#16211c}
.mono-arrow{display:inline-block;transition:transform .12s var(--ease)}
.mono-next-actions .btn:hover .mono-arrow{transform:translateX(3px)}
[dir=rtl] .mono-arrow{transform:scaleX(-1)}
[dir=rtl] .mono-next-actions .btn:hover .mono-arrow{transform:scaleX(-1) translateX(3px)}
.mono-next-done{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--green)}
.mono-next-done .mono-draw{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green-bg)}
#weave .mono-next{border-top:0;padding-top:4px}

/* section reveal (desktop, once) */
.mono-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mono-reveal.mono-in{opacity:1;transform:none}

@keyframes mono-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 35%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.mono-glow{animation:mono-glow .9s var(--ease) 2}

@media(max-width:700px){
  .mono-head-progress{margin:6px 0 0;width:100%}
  .mono-learning .source-strip{flex-wrap:wrap}
  .mono-chips{order:-1;flex:1 1 100%;justify-content:space-between}
  .mono-chip{flex:1;justify-content:center}
  .mono-lib-link{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .mono-reveal{opacity:1!important;transform:none!important;transition:none}
  .mono-glow{animation:none}
  .mono-ring .value,.mono-chip,.mono-chip-dot{transition:none}
}
/* rail never covers the next step */
.mono-learning main{padding-bottom:140px}
.mono-next{scroll-margin-bottom:130px}
.mono-learning .rail-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mono-next-copy{display:flex;flex-direction:column;gap:2px}
.mono-next-copy small{font-size:12px;font-weight:500;color:var(--muted)}
.mono-learning .mono-saved-pill{display:none!important}