/* Learning paths (G2): the teacher's editor in the Studio. Studio look (teal, Lexend); previews use the course-path design (.lp). */
.pe .link { color: var(--brand-d); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.pe h3 { margin-top: 0; }
.pe .inp.pe-narrow { max-width: 460px; }
.pe .nowrap { flex-wrap: nowrap; } .pe .nowrap .inp { min-width: 0; }
.pe .pe-tol { max-width: 120px; }
.pe-save { white-space: nowrap; } .pe-save[data-state="saving"], .pe-save[data-state="dirty"] { color: var(--amber); } .pe-save[data-state="error"] { color: #fff; background: var(--red); }
.pe-save[data-state="saved"] { color: var(--green); }
.pe-flag { background: #fff4e5; border-left: 4px solid var(--amber); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.pe-flag ul { margin: 6px 0 0; padding-left: 20px; } .pe-flag .row { margin-top: 8px; }
.pe .ok-line { color: var(--green); font-weight: 600; }
.pe-soft { margin: 8px 0; } .pe-soft summary { cursor: pointer; color: var(--muted); min-height: 32px; display: list-item; } .pe-soft ul { padding-left: 20px; }

/* outline: units and lessons */
.pe-units { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 14px; }
.pe-unit { border: 1px solid var(--line); border-left: 6px solid var(--brand); border-radius: 12px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.pe-uhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pe-uhead .inp { flex: 1 1 220px; min-width: 0; font-weight: 600; }
.pe-num { font-weight: 700; color: var(--brand-d); white-space: nowrap; }
.pe-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pe-lrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; min-width: 0; }
.pe-code { display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding: 0 6px; border-radius: 8px; background: var(--brand-l); color: var(--brand-d); font-weight: 700; font-size: .85rem; }
.pe-lt { flex: 1 1 220px; min-width: 0; } .pe-lt b { display: block; overflow-wrap: anywhere; } .pe-lt small { color: var(--muted); display: block; margin-top: 2px; }
.pe-tools { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.pe-tools .tool { min-width: 36px; }
.pe .pe-move { width: auto; padding: 6px 8px; min-height: 36px; font-size: .85rem; }
table.list.pe-prog td, table.list.pe-prog th { text-align: center; } table.list.pe-prog td:first-child, table.list.pe-prog th:first-child, table.list.pe-prog td:nth-child(2) { text-align: left; }
.pe-ok { color: var(--green); font-weight: 700; white-space: nowrap; } .pe-try { color: var(--amber); font-weight: 600; }

/* the lesson editor */
.pe-f { min-width: 0; } .pe-f label { margin-top: 8px; } .pe-f.grow { flex: 1 1 260px; }
.pe-list, .pe-ideas, .pe-blocks, .pe-qs, .pe-steps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.pe-srow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; min-width: 0; } .pe-srow .pe-tools { margin-bottom: 4px; }
.pe-idea { border: 1px solid var(--line); border-left: 6px solid #2D72B8; border-radius: 12px; padding: 12px; display: grid; gap: 6px; min-width: 0; }
.pe-block { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; background: #fbfcfd; min-width: 0; }
.pe-block.k-example { border-style: solid; border-color: #c9d8ec; background: #f7fafd; }
.pe-block.k-watch { border-color: #f0d49a; } .pe-block.k-concept { border-color: #b9dcdc; }
.pe-bhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pe-bhead > b { color: var(--ink); }
.pe-step { border-left: 3px solid var(--brand-l); padding-left: 8px; }
.pe-vocab { border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
.pe-q { border: 1px solid var(--line); border-left: 6px solid var(--amber); border-radius: 12px; padding: 12px; display: grid; gap: 4px; min-width: 0; scroll-margin-top: 80px; }
.pe-q.ver { border-left-color: var(--green); }
.pe-opt { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: nowrap; min-width: 0; } .pe-opt .inp { flex: 1; min-width: 0; }
.pe-opt input[type=radio] { width: 24px; height: 24px; flex: none; margin: 0; }
.pe-verify { margin-top: 8px; font-weight: 600; }
.pe-prev { margin-top: 6px; } .pe-prev > summary { cursor: pointer; color: var(--brand-d); font-weight: 500; min-height: 32px; display: list-item; }
.pe-pv.lp { min-height: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; font-size: 16px; overflow-x: auto; }
.pe-pv.lp .qcard { margin-bottom: 14px; } .pe-pv.lp .pe-sample { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.pe-sopts { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; } .pe-sopts .ol { font-weight: 700; color: var(--blue); margin-right: 4px; }
@media (max-width: 640px) { .pe-tools { margin-left: 0; } .pe-opt { flex-wrap: wrap; } .pe-opt .inp { flex-basis: 160px; } }
.pe-sub { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }

/* G4: checking imported items beside their originals */
.pe-tocheck { border-left: 6px solid var(--amber); }
.rv-count { font-size: 1.05rem; } .rv-nav { align-items: center; } .rv-nav .inp { flex: 1 1 260px; min-width: 0; }
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rv-item { border-left: 6px solid var(--amber); min-width: 0; scroll-margin-top: 80px; margin: 0; }
.rv-item.rv-done { border-left-color: var(--green); background: #f6fbf8; }
.rv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 8px; }
.rv-orig, .rv-imp { min-width: 0; } .rv-orig h4, .rv-imp h4 { margin: 0 0 6px; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.rv-src { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; min-height: 60px; }
.rv-fig { margin: 0 0 8px; } .rv-fig:last-child { margin-bottom: 0; }
.rv-fig img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.rv-fig figcaption { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .85rem; margin-top: 4px; }
.rv-word { margin: 0; padding: 8px 12px; border-left: 4px solid #2D72B8; background: #f7fafd; border-radius: 6px; overflow-wrap: anywhere; }
.rv-word p { margin: 4px 0; }
.rv-pv.lp { min-height: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; overflow-x: auto; }
.rv-pv.lp h2 { margin-top: 0; font-size: 1.2rem; } .rv-pv .qcard { margin-bottom: 8px; }
.rv-title { font-weight: 700; font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.rv-key { margin: 8px 0 0; } .rv-notes { margin: 10px 0 0; padding: 8px 12px 8px 28px; background: #fff4e5; border-radius: 8px; }
.rv-acts { margin-top: 8px; }
.rv-page { position: relative; display: inline-block; max-width: 100%; } .rv-page canvas { display: block; max-width: 100%; height: auto !important; border: 1px solid var(--line); }
.rv-mark { position: absolute; border: 3px solid var(--amber); border-radius: 4px; background: rgba(240, 160, 40, .12); pointer-events: none; }
.pe-focus { outline: 3px solid var(--amber); outline-offset: 3px; transition: outline-color .4s; }
/* AI helper, part 1: the question maker (the dialog lives outside .pe) */
.pe-ai { align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ai-btn { border-color: var(--brand); color: var(--brand-d); background: var(--brand-l); }
.ai-types { border: 0; padding: 0; margin: 8px 0; display: flex; gap: 16px; flex-wrap: wrap; } .ai-types legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.ai-wait { color: var(--brand-d); font-weight: 600; }
.ai-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.ai-q { margin: 0; padding: 12px; } .ai-q .pe-bhead { flex-wrap: wrap; gap: 8px; } .ai-q .check { font-weight: 600; }
.ai-q.ai-warn { border-left: 4px solid var(--amber); }
.ai-q .lp, .ai-q .pe-pv { overflow-wrap: anywhere; } .ai-q .katex-display, .ai-q .sol { overflow-x: auto; }
.ai-src { margin: 0 0 6px; } .state.ai-made { background: var(--brand-l); color: var(--brand-d); }
.ai-num { max-width: 130px; } #ai-admin .meter { margin: 8px 0 12px; } .ai-days { margin-top: 10px; } .ai-days summary { cursor: pointer; min-height: 32px; display: list-item; }

/* 40 (Lesson Builder): formula buttons, pictures, storage meter, big idea and video previews */
.pe-fx { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; margin: 0 0 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.pe-fxl { font-size: .8rem; color: var(--muted); padding: 0 4px; }
.pe-fxb { min-width: 48px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; color: var(--ink); }
.pe-fxb:hover { border-color: var(--brand); background: var(--brand-l); }
.fx-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-size: .8rem; } .fx-frac i:first-child { border-bottom: 1.5px solid currentColor; padding: 0 3px 1px; } .fx-frac i { font-style: italic; }
.pe-fxs { width: auto; min-height: 44px; padding: 6px 8px; }
.pe-fxh { font-size: .8rem; color: var(--muted); margin-left: auto; }
.pe-pic { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.pe-pic .lpimg { flex: 0 1 280px; margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; }
.pe-pic .lpimg img { max-width: 100%; height: auto; display: block; }
.pe-pic .lpimg-miss { color: var(--muted); padding: 12px; }
.pe-picf { flex: 1 1 320px; min-width: 0; }
.pe-meter { display: block; height: 8px; border-radius: 999px; background: #e9edf0; overflow: hidden; margin-top: 4px; max-width: 360px; } .pe-meter i { display: block; height: 100%; background: var(--brand); }
.pe-bigpv:empty, #pe-vidpv:empty { display: none; }
.pe-bigpv, #pe-vidpv { margin-top: 8px; padding: 10px; border-radius: 10px; min-height: 0; }
@media (max-width: 700px) { .pe-fx { top: 56px; } .pe-fxh { display: none; } }