/* Learning paths (G1): the student view, in the Math Path / Physics Path design (grid paper, navy serif headings,
   leaf-shaped cards, worked examples with steps shown one at a time, A-B-C choice buttons). Everything is scoped to .lp. */
.lp {
  --navy: #16325C; --blue: #2D72B8; --blue-l: #E8F0FA; --green: #6DAA3C; --green-d: #3F7F24; --green-l: #EAF5E2;
  --ink: #1D2B3A; --muted: #586779; --line: #D5DEE8; --paper: #F2F6FA; --red: #C8402F; --red-l: #FBECEA; --amber: #D9A514;
  --t1: #2D72B8; --t2: #1F8A8A; --t3: #5E9B32; --t4: #7357A6; --t5: #C8742A;
  --serif: Cambria, "Cambria Math", Georgia, "Times New Roman", serif;
  --hand: "Segoe Print", "Ink Free", "Bradley Hand", "Comic Sans MS", "Chalkboard SE", cursive;
  --arab: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", Arial, sans-serif;
  --leaf: 28px 6px 28px 6px;
  color: var(--ink); font-size: 17px; line-height: 1.55;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(45,114,184,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(45,114,184,.07) 1px, transparent 1px);
  background-size: 26px 26px; min-height: calc(100vh - 64px); max-width: none; margin: 0; padding: 22px 16px 60px;
}
.lp .inner { max-width: 1000px; margin: 0 auto; }
.lp h1, .lp h2, .lp h3, .lp h4 { font-family: var(--serif); color: var(--navy); line-height: 1.2; margin: 0 0 .5em; }
.lp h1 { font-size: 2rem; } .lp h2 { font-size: 1.55rem; } .lp h3 { font-size: 1.2rem; } .lp h4 { font-size: 1.05rem; }
.lp p { margin: 0 0 .8em; max-width: 72ch; }
.lp b.tl { color: #1F7B7E; }
.lp .card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 3px 0 var(--line); margin-bottom: 18px; }
.lp .lab { display: inline-block; font-size: .92rem; font-weight: 600; color: var(--blue); margin-bottom: .2rem; }
.lp .btn { min-height: 46px; border-radius: 12px; }
.lp .btn.green { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.lp .btn.green:hover:not(:disabled) { background: #356C1E; }
.lp .link { background: none; border: 0; color: var(--blue); font-weight: 600; padding: 6px 0; min-height: 44px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.lp .preview-strip { background: #FFF7D6; border: 1px solid #EBD889; border-radius: 12px; padding: 8px 14px; margin-bottom: 14px; font-weight: 600; }

/* path home: units and lessons */
.lp .phead { border-top: 6px solid var(--green); }
.lp .stats { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
.lp .stats div { display: flex; flex-direction: column; }
.lp .stats b { font-family: var(--serif); font-size: 2rem; color: var(--navy); line-height: 1; }
.lp .stats span { font-size: .82rem; color: var(--muted); }
.lp .bar { height: 10px; background: var(--paper); border-radius: 6px; overflow: hidden; margin-top: 12px; }
.lp .bar i { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.lp .units { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lp .tile { background: #fff; border: 1px solid var(--line); border-left: 8px solid var(--tc); border-radius: var(--leaf); box-shadow: 0 3px 0 var(--line); overflow: hidden; }
.lp .tile.tp1 { --tc: var(--t1); } .lp .tile.tp2 { --tc: var(--t2); } .lp .tile.tp3 { --tc: var(--t3); } .lp .tile.tp4 { --tc: var(--t4); } .lp .tile.tp0 { --tc: var(--t5); }
.lp .tile-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 16px 20px; }
.lp .tnum { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--tc); font-weight: 700; min-width: 1.1em; text-align: center; }
.lp .tt b { font-family: var(--serif); font-size: 1.25rem; color: var(--navy); display: block; }
.lp .tt span { font-size: .88rem; color: var(--muted); }
.lp .lessons { list-style: none; margin: 0; padding: 0 18px 16px; display: grid; gap: 8px; }
.lp .lrow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: #FBFDFF; }
.lp .lrow .stone { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--line); background: #fff; display: grid; place-items: center; font-weight: 700; color: var(--navy); font-size: .9rem; }
.lp .lrow.done .stone { background: var(--tc, var(--green)); border-color: var(--tc, var(--green)); color: #fff; }
.lp .lrow.cur .stone { border-color: var(--tc, var(--blue)); box-shadow: 0 0 0 5px rgba(45,114,184,.18); }
.lp .lrow.locked { background: #EEF2F6; color: #8C99A8; }
.lp .lrow.locked .stone { background: #F1F4F8; color: #9AA6B4; }
.lp .lrow .lt { flex: 1; min-width: 0; }
.lp .lrow .lt b { display: block; color: var(--navy); }
.lp .lrow.locked .lt b { color: #8C99A8; }
.lp .lrow .lt span { font-size: .86rem; color: var(--muted); }
.lp .lrow .btn { flex: none; }

/* lesson player */
.lp .pbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.lp .ptitle { flex: 1; font-family: var(--serif); color: var(--navy); font-size: 1.1rem; min-width: 0; }
.lp .ptitle b { background: var(--navy); color: #fff; border-radius: 6px; padding: 0 7px; font-family: inherit; font-size: .9rem; margin-right: 4px; }
.lp .dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
/* each dot is a 24 px tap target (G1-D1); the visible dot is drawn inside it */
.lp .dot { width: 24px; height: 24px; border-radius: 50%; border: 0; background: none; padding: 0; min-height: 0; display: inline-grid; place-items: center; cursor: pointer; }
.lp .dot::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #B8C5D3; background: #fff; box-sizing: border-box; }
.lp .dot:disabled { cursor: default; }
.lp .dot.k-try::before { border-radius: 3px; transform: rotate(45deg) scale(.86); }
.lp .dot.k-ready::before, .lp .dot.k-q::before { border-radius: 3px; }
.lp .dot.seen::before { background: #A9C6E6; border-color: var(--blue); }
.lp .dot.now::before { background: var(--navy); border-color: var(--navy); width: 20px; height: 20px; }
.lp .screen { min-height: 46vh; }
.lp .screen > p, .lp .screen .box p { font-size: 1.05rem; }
.lp .pfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; bottom: 0; background: rgba(242,246,250,.94); padding: 10px 0; backdrop-filter: blur(4px); }
.lp .pfoot .count { color: var(--muted); font-size: .9rem; }
.lp .intro h1 { font-size: 2.2rem; }
.lp .goals { padding-left: 1.2em; } .lp .goals li { margin: 4px 0; font-size: 1.08rem; }
.lp .idea-h { border-bottom: 2px solid var(--blue-l); margin-bottom: 14px; }
.lp .vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lp .vcard { border: 1px solid var(--line); border-radius: var(--leaf); padding: 14px 16px; background: #FBFDFF; }
.lp .vcard > b { font-size: 1.2rem; color: var(--navy); display: block; }
.lp .vcard .ar { font-size: 1.25rem; color: var(--green-d); margin: 4px 0; }
.lp .vcard p { font-size: .96rem; margin: 0 0 6px; }
.lp .vex { background: #fff; border: 1px dashed var(--line); border-radius: 10px; padding: 4px 10px; display: inline-block; }
.lp .ar { font-family: var(--arab); direction: rtl; unicode-bidi: isolate; }
.lp .dmath { overflow-x: auto; overflow-y: hidden; padding: 4px 0; font-size: 1.12em; }
.lp .blist { padding-left: 1.3em; } .lp .blist li { margin: 4px 0; }
.lp .box { border-radius: 14px; margin: 14px 0; padding: 14px 18px; }
.lp .box h4 { margin-bottom: .6em; }
.lp .box.concept { border: 2px solid var(--navy); background: #fff; padding-top: 0; }
.lp .box.concept > h4 { background: var(--navy); color: #fff; margin: 0 -18px 12px; padding: 8px 18px; border-radius: 11px 11px 0 0; }
.lp .box.example { background: #F6F9FD; border: 1px solid #D3E1F0; border-left: 6px solid var(--blue); }
.lp .exn { display: inline-block; background: var(--blue); color: #fff; font-size: .85rem; border-radius: 6px; padding: 1px 8px; margin-right: 8px; vertical-align: 2px; }
.lp .problem { background: #fff; border: 1.5px dashed #A9C1DC; border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; font-weight: 500; overflow-x: auto; }
.lp .think { font-family: var(--hand); color: var(--green-d); margin: 4px 0 8px; }
.lp .box.plain { border: 1px solid var(--line); background: #fff; }
.lp .steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.lp .step { display: grid; grid-template-columns: 34px minmax(0, 1.25fr) minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 8px 0; border-top: 1px solid #E3EBF4; counter-increment: st; }
.lp .step::before { content: counter(st); width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 700; }
.lp .step.hidden { display: none; }
.lp .step .sw { overflow-x: auto; overflow-y: hidden; }
.lp .step .sw .katex-display { margin: 0; text-align: left; }
.lp .step .sw .katex-display > .katex { text-align: left; }
.lp .step .sn { color: var(--muted); font-size: .95rem; border-left: 3px solid var(--green); padding-left: 10px; }
.lp .note { border-radius: 14px; padding: 12px 16px; margin: 14px 0; }
.lp .note.watch { background: var(--red-l); border-left: 6px solid var(--red); }
.lp .note.watch h4 { color: var(--red); }
.lp .note.tip { background: var(--green-l); border-left: 6px solid var(--green); }
.lp .note.khaled { background: #FFFCF2; border: 1px solid #E6DCC0; }
.lp .note.khaled p { font-family: var(--hand); }
.lp .note p:last-child { margin-bottom: 0; }
.lp .tw { overflow-x: auto; margin: 12px 0; }
.lp .tbl { border-collapse: collapse; min-width: 50%; background: #fff; }
.lp .tbl th, .lp .tbl td { border: 1px solid var(--line); padding: 7px 12px; text-align: left; vertical-align: middle; }
.lp .tbl th { background: var(--navy); color: #fff; font-weight: 600; }
.lp .tbl tr:nth-child(even) td { background: #F8FAFD; }
.lp .remember { background: #FFF7D6; border: 1px solid #EBD889; border-radius: var(--leaf); padding: 14px 20px; }
.lp .remember li { margin: 6px 0; font-size: 1.05rem; }
.lp .ready { text-align: center; padding: 20px 0; }
.lp .ready p { margin-left: auto; margin-right: auto; }
.lp .ok-line { color: var(--green-d); font-weight: 600; }

/* questions */
.lp .qcard .qq { font-size: 1.22rem; margin-bottom: 12px; font-weight: 500; overflow-x: auto; overflow-y: hidden; }
.lp .opts { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.lp .opt { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; min-width: 0; min-height: 58px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; font-size: 1.08rem; color: inherit; cursor: pointer; }
.lp .opt:hover:not(:disabled) { border-color: var(--blue); }
.lp .ol { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 700; color: var(--navy); font-size: .92rem; }
.lp .ot { flex: 1; min-width: 0; overflow-x: auto; }
.lp .opt.sel { border-color: var(--navy); background: #EEF3FA; }
.lp .opt.sel .ol { background: var(--navy); color: #fff; border-color: var(--navy); }
.lp .opt.right { border-color: #3E9A4B; background: #EAF6EA; }
.lp .opt.right .ol { background: #3E9A4B; color: #fff; border-color: #3E9A4B; }
.lp .opt.wrong { border-color: var(--red); background: var(--red-l); }
.lp .opt.wrong .ol { background: var(--red); color: #fff; border-color: var(--red); }
.lp .opt:disabled { opacity: 1; cursor: default; }
.lp .numans label { font-weight: 600; color: var(--navy); display: block; margin-bottom: 6px; }
.lp .nrow { display: flex; gap: 8px; align-items: center; }
.lp .nrow .btn { min-width: 54px; min-height: 54px; font-size: 1.3rem; }
.lp .inp.num { max-width: 260px; font-size: 1.25rem; min-height: 54px; }
.lp .numans.right .inp { border-color: #3E9A4B; background: #EAF6EA; }
.lp .numans.wrong .inp { border-color: var(--red); background: var(--red-l); }
.lp textarea.inp { min-height: 90px; }
.lp .fb { margin-top: 16px; border-radius: 14px; padding: 14px 18px; scroll-margin-bottom: 110px; }
.lp .fb.good { background: #EAF6EA; border: 1px solid #B9DDB9; }
.lp .fb.bad { background: #FFF6E6; border: 1px solid #F0D49A; }
.lp .fb.self { background: #EEF3FA; border: 1px solid #C9D8EC; }
.lp .fb > b { font-size: 1.1rem; color: var(--navy); }
.lp .fb .corr { margin: 6px 0; font-weight: 600; overflow-x: auto; }
.lp .qhint { margin: 0 0 12px; } .lp .qhint summary { color: var(--blue); font-weight: 600; cursor: pointer; }
/* G2: generated practice questions (as in the course paths) */
.lp .fb .why { margin: 6px 0; color: #8A3B2E; }
.lp .explain { margin: 8px 0 0; padding-left: 1.4em; } .lp .explain li { overflow-x: auto; overflow-y: hidden; }
.lp .qfig { display: flex; justify-content: center; margin: 8px 0 14px; }
.lp .qfig svg { width: 100%; max-width: 330px; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.lp .qfig svg.nline, .lp .qfig svg.wide { max-width: 520px; }
.lp .preview-strip a { margin-left: 8px; font-weight: 600; }

/* results */
.lp .result { text-align: center; }
.lp .score-ring { --c: #3E9A4B; width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; align-content: center;
  background: radial-gradient(#fff 0 58%, transparent 59%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--paper) 0); }
.lp .score-ring.fail { --c: var(--amber); }
.lp .score-ring b { font-family: var(--serif); font-size: 2.2rem; color: var(--navy); line-height: 1; }
.lp .score-ring span { font-size: .9rem; color: var(--muted); }
.lp details.rev { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 8px 0; text-align: left; background: #fff; }
.lp details.rev.no { border-color: #EDC4BC; background: #FFFBFA; }
.lp details.rev summary { cursor: pointer; display: flex; gap: 10px; align-items: flex-start; min-height: 32px; }
.lp .rn { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font-size: .82rem; font-weight: 700; }
.lp .rq { flex: 1; min-width: 0; overflow-x: auto; }
.lp .menu { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }

/* the student's list: learning paths */
.lpcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lpcards li { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line, #d8e0e8); border-radius: 14px; padding: 12px 14px; }
.lpcards li > div { flex: 1; min-width: 0; }
.lpcards h3 { margin: 0 0 4px; }
.lpcards .bar { height: 8px; background: #eef2f6; border-radius: 6px; overflow: hidden; margin-top: 6px; max-width: 320px; }
.lpcards .bar i { display: block; height: 100%; background: #3f7f24; }

@media (max-width: 760px) {
  .lp { font-size: 16px; padding: 14px 10px 50px; }
  .lp h1, .lp .intro h1 { font-size: 1.6rem; }
  .lp .card { padding: 16px; }
  .lp .tnum { font-size: 2.2rem; }
  .lp .step { grid-template-columns: 30px minmax(0, 1fr); }
  .lp .step .sn { grid-column: 2; }
  .lp .pfoot .count { display: none; }
  .lp .lrow { flex-wrap: wrap; }
  .lpcards li { flex-wrap: wrap; }
}


/* 40 (Lesson Builder, 3 Nov 2026): Learn → Practice → Check, the big idea, pictures, the video, Explain this topic, hints */
.lp .lsteps { list-style: none; display: flex; gap: 6px; margin: 0 0 10px; padding: 0; }
.lp .lsteps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: .95rem; }
.lp .lsteps li span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--line); color: var(--ink); font-size: .8rem; }
.lp .lsteps li.now { background: var(--navy); border-color: var(--navy); color: #fff; } .lp .lsteps li.now span { background: #fff; color: var(--navy); }
.lp .lsteps li.done { color: var(--green-d); border-color: #BFDDB0; background: var(--green-l); } .lp .lsteps li.done span { background: var(--green-d); color: #fff; }
.lp .bigidea { background: var(--navy); color: #fff; border-radius: var(--leaf); padding: 14px 20px; margin: 12px 0 16px; max-width: 72ch; }
.lp .bigidea .lab { color: #BFD6F2; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.lp .bigidea .bi { font-size: 1.12rem; } .lp .bigidea .katex { color: #fff; }
.lp .lpimg { margin: 12px 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; max-width: 720px; }
.lp .lpimg img { display: block; max-width: 100%; height: auto; border-radius: 6px; background: var(--paper); }
.lp .lpimg figcaption { font-size: .95rem; color: var(--muted); margin-top: 6px; }
.lp .lpimg-miss { color: var(--muted); font-style: italic; padding: 18px; text-align: center; }
.lp .lpvideo { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.lp .lpvideo .vplay { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; overflow: hidden; background: #10292b; cursor: pointer; padding: 0; }
.lp .lpvideo .vplay img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.lp .lpvideo .vbtn { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; }
.lp .lpvideo .vt { display: flex; flex-direction: column; margin: 0; }
.lp .vframe { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
.lp .qhelp { margin: 8px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.lp .qhelp .hrow { display: flex; flex-wrap: wrap; gap: 8px; }
.lp .qhelp .btn { min-height: 44px; }
.lp .btn.explain { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--t2); color: #145F60; background: #E3F3F3; font-weight: 700; }
.lp .hbox { background: var(--blue-l); border-radius: 10px; padding: 10px 14px; } .lp .hbox .lab { display: block; }
.lp .hbox.sol { background: var(--green-l); border: 1px solid #BFDDB0; } .lp .hbox .corr { margin: 6px 0 0; font-weight: 600; }
.lp.explain { background: none; min-height: 0; padding: 0; }
.lp.explain .ex-idea { margin: 14px 0; } .lp.explain .step.hidden { display: list-item; }
@media (max-width: 560px) { .lp .lsteps li { font-size: .85rem; gap: 4px; } .lp .lsteps li span { display: none; } }

/* 41 (3 Nov 2026): "Where do we use this?" after the big idea (up to 3 lines written by the teacher) */
.lp .uses { --u-bg: #FFF1BF; --u-ink: #7A4A05; --u-ico: #A16207; background: var(--u-bg); border-radius: 14px; padding: 14px 18px; margin: 0 0 16px; max-width: 72ch; color: var(--ink); }
.lp .uses .uhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.lp .uses h3 { margin: 0; color: var(--u-ink); font-size: 1.1rem; } .lp .uses .ar { color: var(--u-ink); font-size: 1.05rem; }
.lp .uses ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp .uses li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; min-width: 0; } .lp .uses li > span { min-width: 0; overflow-wrap: anywhere; }
.lp .uses .uico { flex: none; color: var(--u-ico); margin-top: 1px; }