/* LWF-CSC simulation player, "Lesson focus" layout (markup: simulations.html #plLf, logic: sim-player.js).
   Top: ✕, 4-part progress, EN · اردو. Middle: the phone (sim-kit.css) and the LWF coach; side by side from 900px
   (and on short landscape phones), stacked below that. Bottom: the bar with the hint, Reset and the primary
   (or the choices), and the footer disclaimer. Zinc tokens from theme-admin.css, Inter, Phosphor icons.
   The middle scrolls on its own and the bar sits under it, so the bar never covers the phone.
   Motion: CSS only, the site's ease cubic-bezier(.23,1,.32,1) / (.16,1,.3,1); opacity-only under reduced motion. */

/* which view the #player dialog shows: the Lesson focus player, today's iframe player, or a short wait */
.player.lf-on > .bar, .player.lf-on > .pl-stage,
.player.pl-wait > .bar, .player.pl-wait > .pl-stage{display:none}
/* while the Lesson focus player is open it covers the page; the page parts that can be wider than a 320px phone
   (header actions, bottom nav) are taken out so they cannot widen the layout viewport and push the bar off screen */
:root:has(#player.lf-on) :is(.hdr,.ftr,.bnav,.fab,.sprog,.totop){display:none}
.player.pl-wait::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--blue);opacity:0;animation:plSpin .8s linear infinite,lfFade .2s .15s forwards}

.lf{
  /* outline-button edge: 3:1 or more against the bar and the page in both themes */
  --lf-edge:#8E8E98; --lf-ok:#166534; --lf-ok-bg:rgba(22,101,52,.09);
  --lf-ease:cubic-bezier(.23,1,.32,1); --lf-ease-out:cubic-bezier(.16,1,.3,1);
  flex:1; min-height:0; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
:root[data-theme="dark"] .lf{--lf-edge:#6B6B75; --lf-ok:#4ADE80; --lf-ok-bg:rgba(74,222,128,.12)}
.lf[hidden], .lf [hidden]{display:none!important}
.lf *, .lf *::before, .lf *::after{box-sizing:border-box}
.lf :is(h2,h3,p,ul,ol){margin:0}
.lf :is(ul,ol){padding:0;list-style:none}
.lf [lang="ur"]{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",Inter,system-ui,sans-serif;line-height:2;letter-spacing:0}
/* Phosphor icons (regular), from the font in vendor/phosphor. Own class names: on this site ".ph" is the page header. */
@font-face{font-family:"LWF Phosphor";src:url("vendor/phosphor/regular/Phosphor.woff2") format("woff2"),url("vendor/phosphor/regular/Phosphor.woff") format("woff");font-weight:normal;font-style:normal;font-display:block}
.lf-i{display:inline-block;flex:none;font-family:"LWF Phosphor"!important;font-style:normal;font-weight:normal;font-size:20px;line-height:1;letter-spacing:0;text-transform:none;speak:never;-webkit-font-smoothing:antialiased}
.lf-i-x::before{content:"\e4f6"}
.lf-i-shield-check::before{content:"\e40c"}
.lf-i-lightbulb::before{content:"\e2dc"}
.lf-i-arrow-counter-clockwise::before{content:"\e038"}
.lf-i-x-circle::before{content:"\e4f8"}
.lf-i-check-circle::before{content:"\e184"}
.lf-i-warning::before{content:"\e4e0"}
.lf-i-flag::before{content:"\e244"}
.lf-i-arrow-right::before{content:"\e06c"}
.lf-i-share-network::before{content:"\e408"}
:where(.lf) button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.lf :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- top: ✕, progress, language ---------- */
.lf-top{
  flex:none; display:flex; align-items:center; gap:14px; width:100%; max-width:1180px; margin:0 auto;
  min-height:60px; padding:calc(8px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
}
.lf-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-left:-6px;border:0;border-radius:50%;background:none;color:var(--text-2);cursor:pointer;transition:background-color .2s,color .2s,scale .15s var(--lf-ease)}
.lf-x .lf-i{font-size:22px}
.lf-x:hover{background:var(--surface-2);color:var(--text)}
.lf-x:active{scale:.94}
.lf-prog{flex:1;min-width:0;display:flex;gap:6px}
.lf-prog span{flex:1;height:8px;border-radius:99px;background:var(--line-2);overflow:hidden}
.lf-prog i{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent);transition:width .5s var(--lf-ease-out)}
.lf-lang{flex:none;display:flex;align-items:center;height:44px;padding:0 4px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--text-3)}
.lf-lang button{position:relative;min-width:44px;height:36px;padding:0 10px;border:0;border-radius:99px;background:none;color:var(--text-2);font-size:13.5px;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s}
.lf-lang button[lang="ur"]{line-height:1;padding-bottom:4px}
.lf-lang button[aria-pressed="true"]{background:var(--surface-2);color:var(--text);font-weight:600}
.lf-lang button::after{content:"";position:absolute;inset:-4px 0}   /* 36 + 2×4 = 44px touch target */
.lf-lang > span{padding:0 1px;font-size:13px}

/* ---------- middle: the phone and the coach (scrolls on its own) ---------- */
.lf-main{position:relative;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;container-type:size;scrollbar-width:thin}
.lf-stage{
  /* phone width: as big as fits beside the top bar and the tallest bar (so it keeps one size from step to step),
     never so small that its text cannot be read (then the middle scrolls) */
  --pw:min(360px, 100cqw - 48px, max(264px, (100dvh - 316px) * .4737));
  min-height:100%; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-content:center; gap:18px;
  padding:12px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left));
}
.lf-phone{width:var(--pw);max-width:100%}
.lf-phone .sk-phone{max-width:none}
.lf-side{width:100%;max-width:520px;min-width:0;display:flex;flex-direction:column;gap:10px}
.lf-lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);overflow-wrap:anywhere}
.lf-lbl [lang="ur"]{text-transform:none;letter-spacing:0;font-size:13px}
.lf-coach{display:flex;align-items:flex-start;gap:12px;min-width:0}
.lf-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 34% 30%,#7DD3FC,#2563EB 58%,#1E3A8A);box-shadow:0 0 0 3px var(--accent-soft)}
.lf-av .lf-i{font-size:21px}
.lf-bub{flex:1;min-width:0;padding:16px 18px 17px;border:1px solid var(--line);border-radius:6px 20px 20px 20px;background:var(--surface);box-shadow:var(--shadow)}
.lf-bub h2{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.015em;color:var(--text);overflow-wrap:anywhere;outline:0}
.lf-bub p{margin-top:6px;font-size:15.5px;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere}
.lf-bub [dir="rtl"]{text-align:right}
.lf-out{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:4px 11px 4px 8px;border-radius:99px;font-size:13px;font-weight:600}
.lf-out.bad{background:var(--red-bg);color:var(--red)}
.lf-out.good{background:var(--lf-ok-bg);color:var(--lf-ok)}
.lf-out .lf-i{font-size:18px}

/* ---------- end screen ---------- */
.lf-end{min-height:100%;padding:12px max(16px,env(safe-area-inset-right)) 28px max(16px,env(safe-area-inset-left))}
.lf-end-in{width:100%;max-width:660px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.lf-end-hd{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;text-align:center}
.lf-end-ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border-radius:50%;background:var(--lf-ok-bg);color:var(--lf-ok)}
.lf-end-ic .lf-i{font-size:28px}
.lf-end-hd h2{font-size:clamp(22px,2vw + 14px,28px);line-height:1.25;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere;outline:0}
.lf-card{padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.lf-card h3{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:15px;font-weight:600;color:var(--text)}
.lf-card p{color:var(--text-2);line-height:1.65;overflow-wrap:anywhere}
.lf-amber{color:var(--amber)}
.lf-ok{color:var(--lf-ok)}
.lf-flags, .lf-tips{display:flex;flex-direction:column;gap:10px}
.lf-flags li, .lf-tips li{display:flex;align-items:flex-start;gap:10px;color:var(--text-2);line-height:1.55;overflow-wrap:anywhere}
.lf-flags li span, .lf-tips li span{flex:1;min-width:0}
.lf-flags .lf-i{margin-top:2px;font-size:18px;color:var(--amber)}
.lf-tips b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);font-size:12.5px;font-weight:600;line-height:1}
/* share fallback: the link in a read-only field, selected, when neither the share sheet nor the clipboard works */
.lf-share{display:flex;flex-direction:column;gap:6px;width:100%;color:var(--text-2);font-size:13.5px}
.lf-share input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--lf-edge);border-radius:10px;background:var(--surface);color:var(--text);font:500 14px Inter,system-ui,sans-serif}
.lf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lf-end-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:4px}

/* ---------- bottom bar ---------- */
.lf-bar{
  position:sticky; bottom:0; z-index:2; flex:none;
  border-top:1px solid var(--line); background:var(--surface);
  padding:12px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.lf-bar-in{display:flex;align-items:center;gap:12px;width:100%;max-width:1180px;margin:0 auto}
.lf-hint{flex:1 1 200px;min-width:0;display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.lf-hint .lf-i{color:var(--amber);font-size:19px}
.lf-acts{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.lf-choices{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;min-width:0}
/* a decision step: the hint on top, then the choices as an even grid with Reset at the end (phones: Reset beside the hint) */
.lf.has-ch .lf-bar-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'hint hint' 'acts reset';align-items:end;gap:10px 12px}
.lf.has-ch .lf-hint{grid-area:hint}
.lf.has-ch .lf-reset{grid-area:reset}
.lf.has-ch .lf-acts{grid-area:acts;display:block}
.lf.has-ch .lf-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
.lf-foot{max-width:1180px;margin:8px auto 0;color:var(--text-3);font-size:12px;line-height:1.45;text-align:center}
.lf.is-end .lf-bar-in{display:none}
.lf.is-end .lf-foot{margin-top:0}

.lf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:48px; padding:6px 18px;
  border:1px solid var(--lf-edge); border-radius:12px; background:var(--surface); color:var(--text);
  font-size:15px; font-weight:600; line-height:1.3; text-align:center; overflow-wrap:anywhere; cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s,scale .15s var(--lf-ease);
}
.lf-btn:hover{background:var(--surface-2)}
.lf-btn:active{scale:.97}
.lf-btn .lf-i{font-size:19px}
.lf-pri{border-color:var(--blue);background:var(--blue);color:#fff}
.lf-pri:hover{border-color:#1D4ED8;background:#1D4ED8}
.lf-ch{justify-content:flex-start;text-align:left}
.lf-ch[dir="rtl"]{text-align:right}
.lf-ch b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:700;line-height:1}
.lf-reset{margin-left:auto}
.lf-reset span{white-space:nowrap}

/* ---------- motion ---------- */
.lf-phone.lf-in{animation:lfPhoneIn .38s var(--lf-ease) both}
.lf-coach.lf-in{animation:lfRise .32s var(--lf-ease) .04s both}
.lf-coach.lf-in .lf-out:not([hidden]){animation:lfStamp .46s cubic-bezier(.34,1.56,.64,1) .14s both}
.lf-rise{animation:lfRise .42s var(--lf-ease) var(--d,0ms) both}
.lf-end-ic{animation:lfStamp .5s cubic-bezier(.34,1.56,.64,1) .08s both}
@keyframes lfPhoneIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lfRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lfStamp{from{opacity:0;transform:scale(1.25) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes lfFade{to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .lf-phone.lf-in, .lf-coach.lf-in, .lf-rise, .lf-end-ic, .lf-coach.lf-in .lf-out:not([hidden]){animation:lfFadeIn .16s linear both}
  .lf-prog i, .lf-btn, .lf-x{transition:none}
  .lf-btn:active, .lf-x:active{scale:none}
}
@keyframes lfFadeIn{from{opacity:0}to{opacity:1}}

/* ---------- phones (portrait): hint and Reset on one row, the primary or stacked choices full width ---------- */
@media (max-width:639px){
  .lf-top{gap:10px;min-height:56px}
  .lf-bar{padding-top:10px}
  .lf-bar-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  .lf-hint{font-size:13.5px}
  .lf-reset{min-width:48px;padding:6px 12px}
  .lf-reset span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .lf-acts{grid-column:1 / -1;display:flex;flex-direction:column;align-items:stretch}
  .lf.has-ch .lf-bar-in{grid-template-areas:'hint reset' 'acts acts';align-items:center}
  .lf.has-ch .lf-bar-in{row-gap:6px}
  .lf.has-ch .lf-choices{gap:6px}
  .lf.has-ch .lf-reset{min-height:44px}
  .lf-ch{min-height:44px;padding:5px 12px;font-size:14.5px}
  .lf-ch b{width:26px;height:26px}
  .lf-foot{margin-top:6px}
  .lf-acts .lf-pri{width:100%}
  .lf-choices{flex-direction:column;align-items:stretch;width:100%;gap:8px}
  .lf-foot{font-size:11.5px}
  .lf-end-acts{flex-direction:column;align-items:stretch}
  .lf-bub h2{font-size:19px}
}

/* ---------- wide screens, and phones held sideways: phone left, coach right ---------- */
@media (min-width:900px), (orientation:landscape) and (min-width:600px) and (max-height:540px){
  .lf-stage{grid-template-columns:var(--pw) minmax(0,440px);justify-content:center;justify-items:stretch;align-items:center;column-gap:clamp(28px,4vw,56px)}
  .lf-side{position:sticky;top:12px;align-self:center}
}
@media (min-width:900px){
  .lf-stage{--pw:min(360px, max(248px, (100dvh - 240px) * .4737));padding-top:16px;padding-bottom:24px}
  .lf-bub{padding:20px 22px 21px}
  .lf-bub h2{font-size:25px}
  .lf-bub p{font-size:16.5px}
}
@media (orientation:landscape) and (min-width:600px) and (max-height:540px){
  .lf-top{min-height:48px;padding-top:calc(2px + env(safe-area-inset-top));padding-bottom:2px}
  .lf-stage{--pw:max(216px, (100dvh - 152px) * .4737);align-items:start;padding-top:8px;padding-bottom:12px}
  .lf-side{align-self:start}
  .lf-bar{padding-top:8px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .lf-btn{min-height:44px}
  .lf-foot{margin-top:4px;font-size:11.5px}
  .lf-hint{font-size:13px}
  .lf.has-ch .lf-bar-in{row-gap:6px}
  .lf.has-ch .lf-choices{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
  .lf-ch{min-height:44px;padding:4px 10px;font-size:14px;line-height:1.25}
  .lf-ch b{width:24px;height:24px;font-size:13px}
  .lf-reset{min-width:44px;padding:4px 10px}
  .lf-reset span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .lf-bub h2{font-size:19px}
}