/* styles/rec-compare.css — v1370. RECORD & COMPARE in the mode window (Variation B, "Side by side").
   The āyah with his wave above yours, Mine / Reciter / Both / Word by word, takes as capsules, the words check,
   then the rows. Colour: the Memorize tint (the window's --mw-on) for chosen things and your wave; the Listen
   gold for his wave; the one red (--mk-mixed) for recording. No hex here: every colour is a mode-win / al.css token.
   BUILT BY: modules/tools/rec-compare.js (inside Mithlayn.win, .mw.rc). SAFE TO DELETE: with that module. */

.mw.rc { --rc-r:var(--mk-gold); --rc-me:var(--mw-on); --rc-rec:var(--mk-mixed); --rc-amber:var(--mk-forgot); }

/* the reciter button steps aside (keeping its place) while recording */
.rc .mw-bar .rc-lb[hidden] { display:grid; visibility:hidden; }

/* the card: āyah · his lane · your lane · the listen control */
.rc .rc-card { margin-bottom:calc(20px * var(--k-density)); }
.rc .rc-ayw { position:relative; padding:calc(12px * var(--k-density)) 52px calc(6px * var(--k-density)); }
.rc .rc-text { font:calc(27px * var(--k-type))/2.05 var(--mk-q); direction:rtl; text-align:center; color:var(--mw-ink); transition:filter .25s; word-spacing:.05em; }
.rc .rc-text.clamp { max-height:calc(27px * var(--k-type) * 2.05 * 4); overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent); }
.rc .rc-text.blur { filter:blur(8px); cursor:pointer; -webkit-user-select:none; user-select:none; }
.rc .rc-w { border-radius:8px; padding:0 2px; transition:background .2s, color .2s, box-shadow .2s; }
.rc .rc-w.tap { cursor:pointer; }
.rc .rc-w.cur { background:var(--mw-soft); color:var(--mw-on); }
.rc .rc-w.diff { color:var(--rc-amber); background:color-mix(in srgb, var(--rc-amber) 14%, transparent); }
.rc .rc-w.miss { color:var(--mw-mut); outline:1.5px dashed color-mix(in srgb, var(--mw-mut) 80%, transparent); outline-offset:-1px; }
.rc .rc-sign { color:var(--mw-mut); }
.rc .rc-n { font-size:.72em; color:var(--mw-mut); }
.rc .rc-eye { position:absolute; top:6px; right:6px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--mw-mut); }
.rc .rc-eye:active { background:var(--mw-fill); }
.rc .rc-more { display:block; margin:0 auto 4px; min-height:44px; padding:0 18px; border-radius:999px; font:600 calc(14.5px * var(--k-type))/1 var(--mk-ui); color:var(--mw-on); }
.rc .rc-more[hidden] { display:none; }

.rc .rc-lane { position:relative; display:flex; align-items:center; gap:12px; min-height:60px; padding:8px 16px; }
.rc .rc-lane::before { content:''; position:absolute; top:0; left:16px; right:0; height:.5px; background:var(--mw-sep); }
.rc .rc-who { flex:none; width:86px; display:grid; gap:1px; min-width:0; }
.rc .rc-who b { font:600 calc(14.5px * var(--k-type))/1.2 var(--mk-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc .rc-who small { font:500 calc(12.5px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); font-variant-numeric:tabular-nums; }
.rc .rc-lane.live .rc-who b { color:var(--rc-rec); }
.rc .rc-lane.live .rc-who b::before { content:''; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:var(--rc-rec); vertical-align:1px; animation:rc-blink 1.1s ease-in-out infinite; }
@keyframes rc-blink { 50% { opacity:.3; } }
.rc .rc-lane.loading .rc-wave { background:linear-gradient(90deg, transparent, var(--mw-fill), transparent) 0 0 / 200% 100%; border-radius:8px; animation:rc-shim 1.2s linear infinite; }
@keyframes rc-shim { to { background-position:-200% 0; } }
.rc .rc-wave { position:relative; flex:1; min-width:0; height:44px; }
.rc .rc-wave canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.rc .rc-ph { position:absolute; top:-5px; bottom:-5px; width:2px; margin-left:-1px; border-radius:1px; background:var(--mw-ink); display:none; pointer-events:none; }
.rc .rc-ph.on { display:block; }
.rc .rc-reg { position:absolute; top:-3px; bottom:-3px; display:none; pointer-events:none; border-radius:6px; }
.rc .rc-reg.ab { background:color-mix(in srgb, var(--rc-r) 16%, transparent); box-shadow:inset 2px 0 0 var(--rc-r), inset -2px 0 0 var(--rc-r); }
.rc .rc-reg.w { background:color-mix(in srgb, var(--mw-on) 18%, transparent); }
@media (prefers-reduced-motion:reduce) { .rc .rc-lane.live .rc-who b::before, .rc .rc-lane.loading .rc-wave { animation:none; } }

.rc .rc-err { display:flex; align-items:center; gap:10px; padding:2px 16px 10px 114px; font:500 calc(13.5px * var(--k-type))/1.35 var(--mk-ui); color:var(--mw-ink); }
.rc .rc-err[hidden] { display:none; }
.rc .rc-err span { flex:1; min-width:0; }
.rc .rc-err button { flex:none; min-height:44px; padding:0 18px; border-radius:999px; background:var(--mw-fill); font-weight:600; color:var(--mw-on); }
@media (max-width:479px) { .rc .rc-err { padding-left:16px; } }

.rc .rc-ctl { position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px 12px; }
.rc .rc-ctl::before { content:''; position:absolute; top:0; left:16px; right:0; height:.5px; background:var(--mw-sep); }
.rc .rc-seg { flex:1; min-width:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; padding:3px; border-radius:999px; background:var(--mw-fill); }
.rc .rc-seg button { min-height:44px; padding:0 6px; border-radius:999px; font:600 calc(14px * var(--k-type))/1.1 var(--mk-ui); color:var(--mw-ink); white-space:nowrap; transition:background .2s, color .2s; }
.rc .rc-seg button[hidden] { display:none; }
.rc .rc-seg button.on { background:rgba(255,255,255,.94); color:var(--mw-on); box-shadow:0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04); }
body.theme-dark .rc .rc-seg button.on { background:rgba(99,99,102,.7); box-shadow:0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.rc .rc-seg button[aria-disabled="true"] { opacity:.38; cursor:default; }
/* v1379 (owner: the 2×2 block looked cluttered on the phone) — one row everywhere; on a phone "Word by word" reads "Words" */
.rc .rc-seg .rc-short { display:none; }
@media (max-width:479px) {
  .rc .rc-seg button { padding:0 2px; font-size:calc(13px * var(--k-type)); }
  .rc .rc-seg .rc-long { display:none; }
  .rc .rc-seg .rc-short { display:inline; }
}
.rc .rc-play { flex:none; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--mw-on); color:var(--mw-on-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -10px var(--mw-on); transition:transform .15s, opacity .2s; }
.rc .rc-play .ic { width:22px; height:22px; fill:currentColor; }
.rc .rc-play:active { transform:scale(.94); }
.rc .rc-play:disabled { opacity:.4; }
.rc .rc-wnote { margin:0; padding:0 16px 12px; font:500 calc(13px * var(--k-type))/1.4 var(--mk-ui); color:var(--mw-mut); }
.rc .rc-wnote[hidden] { display:none; }
.rc .rc-warn { margin:0 0 12px; padding:10px 14px; border-radius:16px; background:color-mix(in srgb, var(--rc-rec) 10%, transparent); color:var(--mw-ink); font:500 calc(14px * var(--k-type))/1.4 var(--mk-ui); }
.rc .rc-warn[hidden] { display:none; }

/* takes: capsules, number · length */
.rc .rc-takes { display:flex; flex-wrap:wrap; gap:8px; }
.rc .rc-takes button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; min-width:44px; padding:0 16px; border-radius:999px;
  background:var(--mw-fill); font:600 calc(15px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; color:var(--mw-ink); transition:background .2s, color .2s, transform .15s; }
.rc .rc-takes button:active { transform:scale(.96); }
.rc .rc-takes button.on { background:var(--mw-on); color:var(--mw-on-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px -6px var(--mw-on); }
.rc .rc-takes button.add { background:transparent; box-shadow:inset 0 0 0 1.5px var(--mw-sep); color:var(--mw-mut); }
.rc .rc-takes button .ic { width:16px; height:16px; }
.rc .rc-tkfoot { display:flex; justify-content:flex-end; margin-top:4px; }
.rc .rc-del { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border-radius:999px; font:500 calc(14.5px * var(--k-type))/1 var(--mk-ui); color:var(--rc-rec); }
.rc .rc-del .ic { width:16px; height:16px; }

/* your take: the words check */
.rc .rc-check[hidden] { display:none; }
.rc .rc-chk { display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 16px; }
.rc .rc-act { flex:none; min-height:44px; padding:0 16px; border-radius:999px; background:var(--mw-on); color:var(--mw-on-ink); font:600 calc(14.5px * var(--k-type))/1 var(--mk-ui); }
.rc .rc-legend { display:flex; flex-wrap:wrap; gap:6px 16px; padding:0 16px 12px 58px; font:500 calc(13px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); }
.rc .rc-legend[hidden] { display:none; }
.rc .rc-legend span { display:inline-flex; align-items:center; gap:6px; }
.rc .rc-legend i { width:18px; height:12px; border-radius:4px; }
.rc .rc-legend i.d { background:color-mix(in srgb, var(--rc-amber) 30%, transparent); box-shadow:inset 0 -2px 0 var(--rc-amber); }
.rc .rc-legend i.m { outline:1.5px dashed var(--mw-mut); outline-offset:-1.5px; }

/* the switch */
.rc .rc-tog { position:relative; flex:none; width:51px; height:31px; border-radius:999px; background:var(--mw-fill2); transition:background .25s; }
.rc .rc-tog::after { content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:rgba(255,255,255,.98); box-shadow:0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.08); transition:transform .25s cubic-bezier(.3,1.3,.5,1); }
.rc [aria-checked="true"] > .rc-tog { background:var(--mw-on); }
.rc [aria-checked="true"] > .rc-tog::after { transform:translateX(20px); }

/* the red main button */
.rc .mw-go.rc-red { background:var(--rc-rec); color:var(--mw-on-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.08), 0 10px 24px -10px var(--rc-rec); }
.rc .mw-go.rc-red:disabled { background:var(--mw-fill2); color:var(--mw-mut); box-shadow:none; }
.rc .mw-go.rc-red .ic { fill:currentColor; }

/* recording */
.rc .rc-recview { display:flex; flex-direction:column; align-items:center; gap:14px; padding:6px 0 10px; }
.rc .rc-timer { font:300 calc(54px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--mw-ink); }
.rc .rc-stop { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 4px var(--mw-fill2); }
.rc .rc-stop::after { content:''; width:30px; height:30px; border-radius:8px; background:var(--rc-rec); }
.rc .rc-stop:active { transform:scale(.95); }
.rc .rc-recview small { font:500 calc(13.5px * var(--k-type))/1.4 var(--mk-ui); color:var(--mw-mut); text-align:center; padding:0 16px; }

/* practice loop */
.rc .rc-loopwave { position:relative; height:112px; touch-action:none; cursor:crosshair; border-radius:12px; outline-offset:4px; }
.rc .rc-loopwave canvas { position:absolute; inset:0; width:100%; height:100%; }
.rc .rc-loopwave .rc-reg.ab { top:0; bottom:0; }
.rc .rc-h { position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:var(--rc-r); display:none; pointer-events:none; }
.rc .rc-h b { position:absolute; top:-2px; left:50%; transform:translate(-50%,-100%); min-width:22px; padding:2px 6px; border-radius:999px; background:var(--rc-r); color:var(--mw-on-ink);
  font:700 calc(11.5px * var(--k-type))/1.2 var(--mk-ui); text-align:center; }
.rc .rc-loopcard { padding-top:26px; }
.rc .rc-looptime { margin:12px 0 0; text-align:center; font:500 calc(14px * var(--k-type))/1.3 var(--mk-ui); color:var(--mw-mut); font-variant-numeric:tabular-nums; }
.rc .rc-loopbtns button { padding:0 10px; white-space:nowrap; }
.rc .rc-loopbtns button .ic { width:18px; height:18px; }
.rc .rc-loop-play .ic { fill:currentColor; }
.rc .rc-loopbtns button.on .ic { color:inherit; }
.rc .rc-loopbtns button:disabled { opacity:.4; }

/* my recordings */
.rc .rc-list { display:grid; gap:14px; }
@media (min-width:744px) { .rc .rc-list { grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; } }
.rc .rc-item .rc-prev { margin:0; padding:0 16px 6px; font:calc(20px * var(--k-type))/1.8 var(--mk-q); color:var(--mw-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc .rc-mtakes { padding:4px 12px 12px; }
.rc .rc-mtakes button { padding:0 14px; font-size:calc(14px * var(--k-type)); }
.rc .rc-mtakes button .ic { width:14px; height:14px; fill:currentColor; }
.rc .rc-mtakes button.bad { opacity:.45; }
.rc .rc-empty { display:grid; gap:4px; text-align:center; padding:28px 16px; }
.rc .rc-empty span { color:var(--mw-mut); font-size:calc(14.5px * var(--k-type)); }
.rc .rc-cloud-st.err { color:var(--rc-rec); }
.rc .rc-cloud-st:empty { display:none; }
.rc .rc-cloud-hint { margin:0 0 16px; }
.rc .rc-cloud .mw-row:disabled { opacity:.5; }

/* v1377 — Pair mode: the chips under the card, A and B in the text, where B begins on his lane */
.rc .rc-pair { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:10px 4px 2px; }
.rc .rc-pl { font:600 calc(12px * var(--k-type))/1 var(--mk-ui); color:var(--mw-mut); text-transform:uppercase; letter-spacing:.05em; margin-right:2px; }
.rc .rc-chip { min-height:44px; padding:0 16px; border-radius:999px; background:var(--mw-fill); color:var(--mw-on); font:600 calc(14.5px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; }
.rc .rc-chip:active { background:var(--mw-fill2); }
.rc .rc-chip:focus-visible { outline:2px solid var(--mw-on); outline-offset:2px; }
.rc .rc-ab { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px 0 5px; border-radius:999px; background:var(--mw-fill); font:600 calc(14px * var(--k-type))/1 var(--mk-ui); font-variant-numeric:tabular-nums; }
.rc .rc-ab b { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--rc-r); color:#fff; font-size:12px; }
.rc .rc-pair.on .rc-chip { margin-left:auto; }
.rc .rc-pa { display:block; }
.rc .rc-pa + .rc-pa { margin-top:6px; padding-top:6px; border-top:.5px solid var(--mw-sep); }
.rc .rc-tag { display:block; font:600 calc(12px * var(--k-type))/1.6 var(--mk-ui); color:var(--mw-mut); letter-spacing:.04em; text-align:right; }
.rc .rc-bd { position:absolute; top:-6px; bottom:-6px; width:0; padding-left:4px; border-left:1.5px dashed color-mix(in srgb, var(--mw-ink) 45%, transparent); display:none; pointer-events:none; font:700 10px/1 var(--mk-ui); font-style:normal; color:var(--mw-mut); }

/* your take as training data (Recite plan step 5): ✓ this take was right / ✗ it had a slip */
.rc .rc-lab { display:grid; gap:6px; padding:0 16px 14px; }
.rc .rc-lab[hidden] { display:none; }
.rc .rc-lab-b { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.rc .rc-lab-b button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 12px; border-radius:999px; background:var(--mw-fill); color:var(--mw-ink); font:600 calc(14.5px * var(--k-type))/1.15 var(--mk-ui); }
.rc .rc-lab-b button .ic { width:17px; height:17px; stroke-width:2.4; }
.rc .rc-lab-b button[aria-pressed="true"] { background:var(--mw-on); color:var(--mw-on-ink); }
.rc .rc-lab small { font:500 calc(13px * var(--k-type))/1.35 var(--mk-ui); color:var(--mw-mut); }