/* Personalised learning's shared look (docs/LEARNING_PLAN.md, "Approved design"): the learning
   questions, the answers, the learning snapshot, the Learning Profile, goals and progress. Identical in both portals (tools/checks.py,
   copies), on top of ui.css: families answer on the client portal, tutors and managers with a family
   on the staff portal. Every class starts "lp-". */

/* ---------- Before the questions ---------- */
.lp-start { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); overflow: hidden; }
.lp-start-main { padding: 28px; }
.lp-start-main .lp-start-h { font-size: 21px; }
.lp-start-main > p { color: var(--ot-ink-2); margin: 8px 0 0; max-width: 60ch; }
.lp-facts { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; }
.lp-facts li { display: flex; gap: 10px; align-items: flex-start; }
.lp-facts .ot-ic { color: var(--ot-blue-strong); margin-top: 2px; }
.lp-start-side { background: linear-gradient(160deg, #E3F0FA 0%, #F5FAFE 100%); border-left: 1px solid var(--ot-blue-soft-line); padding: 28px; display: grid; align-content: center; gap: 12px; }
.lp-start-side .ot-section-title { color: var(--ot-blue-strong); }
.lp-start-side ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ot-ink-2); }

/* ---------- The questions, one part at a time ---------- */
.lp-q { max-width: 860px; }
.lp-q-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--ot-line-soft); }
.lp-q-step { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ot-muted); font-weight: 600; }
.lp-q-head .lp-q-title { margin-top: 4px; font-size: 20px; }
.lp-q-track { height: 8px; border-radius: 4px; background: var(--ot-blue-soft); margin-top: 12px; overflow: hidden; }
.lp-q-track span { display: block; height: 100%; border-radius: 4px; background: var(--ot-blue); }
.lp-q-body { padding: 22px 24px 8px; display: grid; gap: 26px; }
.lp-q-body > .ot-hint { margin: 0; }
.lp-q-body .ot-fieldset > legend { font-size: 16.5px; }
.lp-q-body .ot-fieldset + .ot-fieldset { margin-top: 0; }
.lp-q-body .ot-fieldset .ot-hint { margin: 0 0 10px; }
.lp-q-body .ot-err { margin: 0 0 8px; }
.lp-q-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--ot-line-soft); margin-top: 18px; }
.lp-q-foot .ot-hint { margin-right: auto; flex: 1 1 200px; }
.lp-q-msg:empty { display: none; }
.lp-q-msg { margin: 0 24px; }
.lp-q .ot-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-q .ot-choices.lp-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-q .ot-choice .ot-box { min-height: 56px; }
/* Pick any that apply: chips that toggle */
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip { position: relative; margin: 0; }
.lp-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.lp-chip > span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1.5px solid var(--ot-line-button); border-radius: 999px; background: #fff; font-weight: 600; font-size: 15px; color: var(--ot-ink-2); }
.lp-chip > span::before { content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ot-line-input); background: #fff; flex: none; }
.lp-chip input:checked + span { border-color: var(--ot-blue-strong); background: var(--ot-blue-tint); color: var(--ot-blue-strong); box-shadow: inset 0 0 0 1px var(--ot-blue-strong); }
.lp-chip input:checked + span::before { background: var(--ot-blue-strong); border-color: var(--ot-blue-strong); }
/* the tick, drawn with borders: the security policy loads no image from a data: address */
.lp-chip input:checked + span::after { content: ""; position: absolute; left: 19px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.lp-chip input:focus-visible + span { outline: 3px solid var(--ot-blue-strong); outline-offset: 2px; }
/* Statements, on a labelled four-point scale: a grid on a computer, buttons two by two on a phone */
.lp-lik { display: grid; border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); overflow: hidden; }
.lp-lik-key { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 104px); gap: 6px; padding: 10px 16px; background: #F8FAFB; border-bottom: 1px solid var(--ot-line); font-size: 13px; font-weight: 600; color: var(--ot-muted); text-align: center; }
.lp-lik fieldset { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 104px); gap: 6px; align-items: center; margin: 0; padding: 10px 16px; border: 0; border-top: 1px solid var(--ot-line-soft); min-width: 0; }
.lp-lik-key + fieldset, .lp-lik > fieldset:first-child { border-top: 0; }
.lp-lik legend { float: left; padding: 0; font-weight: 600; font-size: 15.5px; color: var(--ot-ink); }
.lp-lik label { position: relative; margin: 0; }
.lp-lik input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.lp-lik label > span { display: grid; place-items: center; min-height: 44px; padding: 4px 6px; border: 1.5px solid var(--ot-line-button); border-radius: 8px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ot-ink-2); text-align: center; line-height: 1.2; }
.lp-lik .lp-sc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-lik label:hover > span { border-color: var(--ot-line-input); }
.lp-lik input:checked + span { background: var(--ot-blue-strong); border-color: var(--ot-blue-strong); color: #fff; }
.lp-lik input:focus-visible + span { outline: 3px solid var(--ot-blue-strong); outline-offset: 2px; }
.lp-lik .ot-err { grid-column: 1 / -1; margin: 4px 0 0; }
.lp-lik fieldset.lp-miss { background: #FFFBFB; }
.lp-lik fieldset.lp-miss label > span { border-color: var(--ot-bad-line); }
/* One block for each subject in the student's tutor assignments */
.lp-subj-block { border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); overflow: hidden; }
.lp-subj-block + .lp-subj-block { margin-top: 16px; }
.lp-subj-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--ot-blue-tint); border-bottom: 1px solid var(--ot-blue-soft-line); font-weight: 700; }
.lp-subj-h .lp-subj-t { font-weight: 500; font-size: 14px; color: var(--ot-muted); }
.lp-subj-block .lp-lik { border: 0; border-radius: 0; }
.lp-subj-block .ot-field { padding: 12px 16px 16px; border-top: 1px solid var(--ot-line-soft); }

/* ---------- The answers, as words ---------- */
.lp-ans { padding: 4px 24px 20px; }
.lp-ans h4 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ot-muted); margin: 18px 0 8px; }
.lp-ans h4:first-child { margin-top: 8px; }
.lp-ans .ot-dl { grid-template-columns: minmax(180px, 280px) 1fr; font-size: 14.5px; gap: 8px 16px; }
.lp-ans-who { margin: 6px 24px 0; }

/* ---------- The learning snapshot (staff only) ---------- */
.lp-snap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lp-tile { border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); padding: 12px 14px; background: #fff; display: grid; gap: 4px; align-content: start; }
.lp-tile-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.lp-tile-w { font-size: 13px; color: var(--ot-muted); overflow-wrap: anywhere; }
.lp-tile.lp-focus { border-color: var(--ot-warn-line); background: #FFFCF6; }
.lp-snap-note { font-size: 13.5px; color: var(--ot-muted); margin: 0 0 12px; }
.lp-private { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--ot-warn); }
.lp-private .ot-ic { width: 16px; height: 16px; }

/* ---------- A student's learning, as staff see it ---------- */
.lp-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.lp-way { border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); padding: 18px; display: grid; gap: 10px; align-content: start; background: #fff; }
.lp-way h3 { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.lp-way h3 .ot-ic { color: var(--ot-blue-strong); }
.lp-way p { margin: 0; color: var(--ot-ink-2); font-size: 14.5px; }
.lp-way .ot-btn { justify-self: start; }
.lp-subj-note { margin: 14px 0 0; }
.lp-acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.lp-acts .ot-btn { white-space: normal; max-width: 100%; text-align: left; }   /* a long action wraps on a phone, never off its edge */
.lp-box { border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); background: #fff; margin-top: 20px; }
.lp-box-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--ot-line-soft); }
.lp-box-h h3 { font-size: 16px; }
.lp-box-b { padding: 14px 18px 18px; }
.lp-box .lp-ans { padding: 4px 18px 18px; }
.lp-people { display: inline-flex; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #EEF2F6; font-size: 12.5px; font-weight: 600; color: var(--ot-muted); vertical-align: 1px; }

/* ---------- The Learning Profile (learning-profile.js) ---------- */
.lp-pf-all { display: grid; gap: 20px; }
.lp-pf { overflow: hidden; }
.lp-prof-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 22px 24px 6px; }
.lp-prof-head :is(h2, h3) { font-size: 20px; }
.lp-prof-head p { margin: 4px 0 0; color: var(--ot-muted); font-size: 14.5px; }
.lp-pf-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-due { margin-bottom: 20px; }
.lp-due-go { margin-top: 10px; }
.lp-changed-box { margin: 14px 24px 0; padding: 16px 18px; border-radius: var(--ot-r-md); background: linear-gradient(115deg, #EAF6EE 0%, #F7FBF8 100%); border: 1px solid var(--ot-ok-line); }
.lp-changed-box > :first-child { display: flex; gap: 10px; align-items: center; font-size: 16px; color: var(--ot-ok); }
.lp-chg { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-chg li { display: grid; grid-template-columns: 160px 290px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.lp-chg li.lp-chg-none { grid-template-columns: minmax(0, 1fr); }
.lp-chg-a { font-weight: 700; }
.lp-chg-t { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lp-chg-t .ot-ic { width: 16px; height: 16px; color: var(--ot-muted); }
.lp-same { font-size: 13px; color: var(--ot-muted); font-weight: 600; }
.lp-chg-s { color: var(--ot-ink-2); font-size: 14.5px; }
.lp-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px 24px 4px; }
.lp-gl { border-radius: var(--ot-r-md); padding: 14px 16px; border: 1px solid var(--ot-line); }
.lp-gl > :first-child { display: flex; align-items: center; gap: 8px; font-size: 15.5px; margin-bottom: 8px; }
.lp-gl ul, .lp-gl ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ot-ink-2); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.lp-gl.ok { background: #F3FAF5; border-color: var(--ot-ok-line); } .lp-gl.ok > :first-child { color: var(--ot-ok); }
.lp-gl.warn { background: #FFFAF1; border-color: var(--ot-warn-line); } .lp-gl.warn > :first-child { color: var(--ot-warn); }
.lp-gl.next { background: var(--ot-blue-tint); border-color: var(--ot-blue-soft-line); } .lp-gl.next > :first-child { color: var(--ot-blue-strong); }
.lp-areas-h { padding: 22px 24px 8px; }
.lp-areas-h > :first-child { font-size: 18px; }
.lp-areas-h p { margin: 2px 0 0; color: var(--ot-muted); font-size: 14.5px; }
.lp-areas { padding: 0 24px; display: grid; gap: 10px; }
.lp-area { border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); background: #fff; }
.lp-area > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; }
.lp-area > summary::-webkit-details-marker { display: none; }
.lp-area > summary .n { font-weight: 700; font-size: 16px; }
.lp-chev { color: var(--ot-muted); transition: transform var(--ot-t); }
.lp-area > summary .lp-chev { margin-left: auto; }
.lp-area[open] > summary .lp-chev, .lp-ans-fold[open] > summary .lp-chev { transform: rotate(180deg); }
.lp-area[open] > summary { border-bottom: 1px solid var(--ot-line-soft); }
.lp-area-b { padding: 14px 16px 16px; display: grid; gap: 14px; }
.lp-ab > :first-child { margin: 0 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ot-muted); }
.lp-ab p { margin: 0; color: var(--ot-ink-2); line-height: 1.55; max-width: 80ch; overflow-wrap: anywhere; }
.lp-techs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.lp-tech { border: 1px solid var(--ot-blue-soft-line); background: var(--ot-blue-tint); border-radius: var(--ot-r-sm); padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.lp-tech .t { font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.lp-tech p { margin: 0; font-size: 14.5px; color: var(--ot-ink-2); line-height: 1.5; }
.lp-tech .w { font-size: 13.5px; color: var(--ot-muted); }
.lp-pt { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #0D5F86; background: #DDF0F8; border-radius: 999px; padding: 1px 8px; }
.lp-pt .ot-ic { width: 14px; height: 14px; }
.lp-best { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px 24px 0; }
.lp-best > div { border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); padding: 14px 16px; }
.lp-best > div > :is(h2, h3, h4, h5) { display: flex; align-items: center; gap: 8px; font-size: 15.5px; margin-bottom: 6px; }
.lp-best p, .lp-best ul { margin: 0; color: var(--ot-ink-2); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.lp-best ul { padding-left: 20px; display: grid; gap: 4px; }
.lp-know-h { padding: 20px 24px 8px; }
.lp-know-h > :first-child { font-size: 16px; }
.lp-know { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 24px; }
.lp-know > div { background: #F8FAFB; border: 1px solid var(--ot-line-soft); border-radius: var(--ot-r-sm); padding: 12px 14px; font-size: 14.5px; color: var(--ot-ink-2); line-height: 1.5; }
.lp-know b { color: var(--ot-ink); display: block; }
.lp-pf-foot { display: grid; gap: 12px; padding: 20px 24px 22px; }
.lp-next-ci { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--ot-r-sm); background: var(--ot-blue-tint); border: 1px solid var(--ot-blue-soft-line); color: var(--ot-ink-2); }
.lp-next-ci .ot-ic { color: var(--ot-blue-strong); margin-top: 2px; flex: none; }
.lp-src summary { cursor: pointer; font-weight: 600; color: var(--ot-blue-strong); font-size: 14.5px; min-height: 24px; }
.lp-src ol { margin: 8px 0 0; padding-left: 22px; font-size: 13.5px; color: var(--ot-muted); display: grid; gap: 2px; }
.lp-src a { font-weight: 600; }
/* The answers, folded at the end */
.lp-ans-sum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 24px; cursor: pointer; list-style: none; }
.lp-ans-sum::-webkit-details-marker { display: none; }
.lp-ans-sum > :first-child { font-size: 18px; }
.lp-ans-sum .ot-hint { flex: 1; margin: 0; }
.lp-ans-fold > div { border-top: 1px solid var(--ot-line-soft); }
.lp-ans-fold .lp-ans-who { margin-top: 14px; }
.lp-ans-fold .lp-ans-foot { padding: 0 24px 20px; }
/* A manager edits a profile in place */
.lp-ed-btn { display: flex; width: fit-content; margin: 0 0 0 auto; }
.lp-glance-wrap > .lp-ed-btn, .lp-know-wrap > .lp-ed-btn { margin: 14px 24px 0 auto; }
.lp-area-b > .lp-ed-btn { justify-self: end; margin: 0; }
.lp-best > div > .lp-ed-btn { float: right; margin: 0 0 6px 10px; }
.lp-edit { display: grid; gap: 16px; margin: 14px 24px; padding: 18px; border: 2px solid var(--ot-blue-strong); border-radius: var(--ot-r-md); background: #fff; box-shadow: 0 0 0 4px rgba(22, 87, 196, .12); }
.lp-area-b .lp-edit, .lp-best .lp-edit { margin: 0; }
.lp-edit .ot-textarea { min-height: 84px; }
.lp-edit-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.lp-picks { display: grid; gap: 8px; }
.lp-pick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1.5px solid var(--ot-line-button); border-radius: var(--ot-r-sm); background: #fff; cursor: pointer; }
.lp-pick input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ot-blue-strong); }
.lp-pick .t { font-weight: 650; }
.lp-pick .s { display: block; font-size: 13px; color: var(--ot-muted); }
.lp-pick:has(input:checked) { border-color: var(--ot-blue-strong); background: var(--ot-blue-tint); }
@media (max-width: 960px) {
  .lp-glance, .lp-techs, .lp-know, .lp-best { grid-template-columns: minmax(0, 1fr); }
  .lp-chg li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .lp-prof-head, .lp-glance, .lp-areas-h, .lp-areas, .lp-best, .lp-know-h, .lp-know, .lp-pf-foot, .lp-ans-sum, .lp-ans-fold .lp-ans-foot { padding-left: 16px; padding-right: 16px; }
  .lp-changed-box, .lp-edit { margin-left: 16px; margin-right: 16px; }
  .lp-glance-wrap > .lp-ed-btn, .lp-know-wrap > .lp-ed-btn { margin-right: 16px; }
  .lp-area > summary { flex-wrap: wrap; padding: 10px 14px; }
  .lp-chg-t { white-space: normal; flex-wrap: wrap; }
}
@media print {
  .lp-pf-acts, .lp-ed-btn, .lp-due-go, .lp-ans-foot .ot-btn { display: none !important; }
  .lp-area, .lp-gl, .lp-tech, .lp-know > div { break-inside: avoid; }
}

/* ---------- Tabs on a student's learning ---------- */
.lp-tabs { margin-bottom: 24px; }
.lp-tabs .ot-count { margin-left: 2px; }

/* ---------- Goals (learning-goals.js) ---------- */
.lp-g-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lp-g-head > div > :first-child { font-size: 20px; }
.lp-g-head p { margin: 2px 0 0; color: var(--ot-muted); font-size: 14.5px; }
.lp-g-msg:empty { display: none; }
.lp-g-msg { margin-bottom: 16px; }
.lp-g-empty .ot-empty { text-align: center; }
.lp-g-none { margin: 0 0 16px; }
.lp-ex { display: grid; gap: 8px; margin: 6px auto 16px; text-align: left; max-width: 52ch; padding-left: 20px; }
.lp-ex li { color: var(--ot-ink-2); }
.lp-aims li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.lp-goals { display: grid; gap: 20px; }
.lp-goal { overflow: hidden; }
.lp-goal-top { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 18px 24px 0; }
.lp-subj { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; background: #EEF2F6; font-size: 13.5px; font-weight: 700; color: var(--ot-ink-2); }
.lp-when { font-size: 14px; color: var(--ot-muted); display: inline-flex; gap: 6px; align-items: center; }
.lp-when .ot-ic { width: 16px; height: 16px; }
.lp-goal-acts { margin-left: auto; display: flex; gap: 8px; align-items: flex-start; }
.lp-more { position: relative; }
.lp-more > summary { list-style: none; }
.lp-more > summary::-webkit-details-marker { display: none; }
.lp-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 200px; display: grid; padding: 6px; background: #fff; border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); box-shadow: var(--ot-shadow-float); }
.lp-more-menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--ot-r-sm); background: none; font: 600 15px var(--ot-font); color: var(--ot-ink); text-align: left; cursor: pointer; }
.lp-more-menu button:hover { background: #F5F8FA; }
.lp-goal-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 10px 24px 18px; }
.lp-goal-main > div > :first-child { font-size: 19px; overflow-wrap: anywhere; }
.lp-measure { margin: 6px 0 0; color: var(--ot-ink-2); font-size: 15px; overflow-wrap: anywhere; }
.lp-measure b { color: var(--ot-ink); }
.lp-why { margin: 4px 0 0; color: var(--ot-muted); font-size: 14.5px; overflow-wrap: anywhere; }
.lp-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.lp-step { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: var(--ot-r-sm); }
.lp-step:hover { background: #F5F8FA; }
.lp-step input { width: 22px; height: 22px; accent-color: var(--ot-ok); margin: 0; flex: none; }
.lp-step label { flex: 1; font-weight: 550; cursor: pointer; overflow-wrap: anywhere; }
.lp-step.done label { color: var(--ot-muted); text-decoration: line-through; text-decoration-color: #9AA8B5; }
.lp-step .d { font-size: 13.5px; color: var(--ot-muted); white-space: nowrap; }
.lp-step.next { background: var(--ot-blue-tint); box-shadow: inset 3px 0 0 var(--ot-blue-strong); }
.lp-step.next .d { color: var(--ot-blue-strong); font-weight: 600; }
.lp-meter { border-left: 1px solid var(--ot-line-soft); padding-left: 24px; display: grid; align-content: start; gap: 4px; }
.lp-meter .v { font-size: 30px; font-weight: 750; color: var(--ot-blue-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lp-meter .v small { font-size: 16px; color: var(--ot-muted); font-weight: 600; }
.lp-meter .ot-bl-track { margin: 8px 0 6px; height: 10px; }
.lp-meter .ot-bar { height: 10px; }
.lp-meter .k { font-size: 14px; color: var(--ot-muted); overflow-wrap: anywhere; }
.lp-goal-foot { border-top: 1px solid var(--ot-line-soft); }
.lp-goal-foot > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; cursor: pointer; font-weight: 650; color: var(--ot-ink-2); list-style: none; }
.lp-goal-foot > summary::-webkit-details-marker { display: none; }
.lp-goal-foot > summary .ot-ic { color: var(--ot-blue-strong); }
.lp-goal-foot > summary .lp-chev { margin-left: auto; }
.lp-goal-foot[open] > summary .lp-chev, .lp-done-list[open] > summary .lp-chev { transform: rotate(180deg); }
.lp-changed { font-weight: 500; font-size: 13.5px; color: var(--ot-muted); }
.lp-lessons { list-style: none; margin: 0; padding: 0 24px 16px; display: grid; gap: 10px; }
.lp-lessons li { border: 1px solid var(--ot-line-soft); border-radius: var(--ot-r-sm); padding: 12px 14px; background: #FBFCFD; }
.lp-lessons .t { font-weight: 650; }
.lp-lessons .m { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--ot-muted); }
.lp-lessons .lp-sum { margin: 6px 0 0; font-size: 14.5px; color: var(--ot-ink-2); overflow-wrap: anywhere; }
.lp-lessons-none { margin: 0; padding: 0 24px 16px; }
.lp-done-list { margin-top: 20px; }
.lp-done-list > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; cursor: pointer; font-weight: 700; color: var(--ot-ink-2); list-style: none; }
.lp-done-list > summary::-webkit-details-marker { display: none; }
.lp-done-list > summary .lp-chev { margin-left: auto; }
.lp-done-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; flex-wrap: wrap; border-top: 1px solid var(--ot-line-soft); }
.lp-done-row .t { font-weight: 650; flex: 1; min-width: 200px; overflow-wrap: anywhere; }
/* The goal form */
dialog.ot-dlg.lp-dlg { width: min(680px, calc(100vw - 32px)); }
.lp-dlg .ot-dlg-body > * + * { margin-top: 18px; }
.lp-dlg .ot-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-dlg .ot-choice .ot-box { min-height: 58px; }
.lp-dlg .lp-date { margin-top: 10px; max-width: 220px; }
.lp-steps-edit { display: grid; gap: 8px; margin-bottom: 10px; }
.lp-step-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 160px 40px; gap: 8px; align-items: center; }
.lp-step-row .n { font-weight: 700; color: var(--ot-muted); text-align: center; }
.lp-step-row .ot-x { margin: 0; }
.lp-errsum:empty { display: none; }
.lp-errsum ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- Progress (learning-progress.js) ---------- */
.lp-prog-intro { margin: 0 0 16px; color: var(--ot-muted); font-size: 14.5px; max-width: 80ch; }
.lp-prog { display: grid; gap: 20px; }
.lp-chart-panel { overflow: hidden; }
.lp-ch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px 24px 4px; }
.lp-ch-head > div > :first-child { font-size: 18px; }
.lp-ch-head p { margin: 2px 0 0; color: var(--ot-muted); font-size: 14px; }
.lp-latest { text-align: right; }
.lp-latest .v { font-size: 28px; font-weight: 750; color: var(--ot-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lp-latest .v small { font-size: 15px; color: var(--ot-muted); }
.lp-latest .k { font-size: 13.5px; color: var(--ot-muted); }
.lp-latest .ch { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--ot-ok); }
.lp-latest .ch.down { color: var(--ot-ink-2); }
.lp-latest .ch .ot-ic { width: 16px; height: 16px; }
.lp-chart { padding: 6px 16px 0 8px; position: relative; }
.lp-chart svg { display: block; overflow: visible; }
.lp-chart .grid line { stroke: #E8EDF2; stroke-width: 1; }
.lp-chart .axis text { fill: var(--ot-muted); font: 12px var(--ot-font); }
.lp-chart .line { fill: none; stroke: var(--ot-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lp-chart .pt { fill: var(--ot-blue); stroke: #fff; stroke-width: 2; pointer-events: none; }
.lp-chart .pt.last { fill: var(--ot-blue-strong); }
.lp-chart .lbl { fill: var(--ot-ink); font: 700 13px var(--ot-font); }
.lp-chart .hit { fill: transparent; cursor: default; }
.lp-tip { position: absolute; pointer-events: none; background: #1F2933; color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -130%); }
.lp-cap { margin: 0; padding: 4px 24px 12px; font-size: 13.5px; color: var(--ot-muted); }
.lp-table > summary { padding: 0 24px 14px; cursor: pointer; font-weight: 600; color: var(--ot-blue-strong); font-size: 14.5px; }
.lp-table .ot-table-wrap { border-top: 1px solid var(--ot-line-soft); }
.lp-ch-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--ot-line-soft); }
.lp-ch-more > div { padding: 14px 24px 18px; }
.lp-ch-more > div + div { border-left: 1px solid var(--ot-line-soft); }
.lp-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lp-topics span { padding: 3px 10px; border-radius: 999px; background: #EEF2F6; font-size: 13.5px; font-weight: 600; color: var(--ot-ink-2); }
.lp-mini-goal { display: grid; gap: 2px; margin-top: 8px; }
.lp-mini-goal .t { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.lp-mini-goal .ot-bl-track { margin: 4px 0 2px; }
/* the streak, this week so far and the wins (Phase 2, Slice 8) */
.lp-wins-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; margin-bottom: 20px; }
.lp-streak { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; }
.lp-streak-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ot-warn-bg); color: var(--ot-warn); }
.lp-streak-ic .ot-ic { width: 22px; height: 22px; }
.lp-streak > div > :first-child, .lp-week-so-far > :first-child, .lp-wins > :first-child { font-size: 18px; margin: 0; }
.lp-streak-n { margin: 4px 0 2px; font-size: 26px; font-weight: 750; color: var(--ot-ink); line-height: 1.15; }
.lp-streak p { margin: 6px 0 0; color: var(--ot-muted); font-size: 14px; max-width: 46ch; }
.lp-streak p.lp-streak-keep { color: var(--ot-ink-2); font-weight: 600; }
.lp-week-so-far { padding: 20px 24px; }
.lp-wk-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.lp-wk-fig .v { font-size: 24px; font-weight: 750; color: var(--ot-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.lp-wk-fig .k { font-size: 13.5px; color: var(--ot-muted); }
.lp-wk-last { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--ot-line-soft); font-size: 14px; color: var(--ot-muted); }
.lp-wins { padding: 20px 24px; margin-bottom: 20px; }
.lp-wins .ot-hint { margin: 8px 0 0; }
.lp-win-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.lp-win-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ot-line-soft); }
.lp-win-list li:first-child { border-top: 0; }
.lp-win-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ot-blue-tint); color: var(--ot-blue-strong); }
.lp-win-ic.goal, .lp-win-ic.result { background: var(--ot-ok-bg); color: var(--ot-ok); }
.lp-win-ic .ot-ic { width: 18px; height: 18px; }
.lp-win-list .t { font-weight: 600; overflow-wrap: anywhere; }
.lp-win-list .s { font-size: 13.5px; color: var(--ot-muted); overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .lp-goal-main { grid-template-columns: minmax(0, 1fr); }
  .lp-wins-top { grid-template-columns: minmax(0, 1fr); }
  .lp-meter { border-left: 0; padding-left: 0; border-top: 1px solid var(--ot-line-soft); padding-top: 14px; }
}
@media (max-width: 640px) {
  .lp-goal-top, .lp-goal-main, .lp-goal-foot > summary, .lp-lessons, .lp-lessons-none, .lp-ch-head, .lp-cap, .lp-table > summary { padding-left: 16px; padding-right: 16px; }
  .lp-goal-acts { margin-left: 0; width: 100%; }
  .lp-more-menu { right: auto; left: 0; }
  .lp-step { flex-wrap: wrap; align-items: flex-start; gap: 2px 12px; padding: 10px; }
  .lp-step label { flex: 1 1 calc(100% - 40px); }
  .lp-step .d { flex-basis: 100%; padding-left: 34px; white-space: normal; }
  .lp-goal-foot > summary { flex-wrap: wrap; gap: 2px 10px; padding-top: 10px; padding-bottom: 10px; }
  .lp-changed { flex-basis: 100%; order: 3; padding-left: 30px; }
  .lp-dlg .ot-choices { grid-template-columns: minmax(0, 1fr); }
  .lp-step-row { grid-template-columns: 22px minmax(0, 1fr) 40px; }
  .lp-step-row .lp-st-d { grid-column: 2; }
  .lp-chart { padding: 6px 8px 0 0; }
  .lp-ch-more { grid-template-columns: minmax(0, 1fr); }
  .lp-ch-more > div { padding: 12px 16px 16px; }
  .lp-streak, .lp-week-so-far, .lp-wins { padding: 16px; }
  .lp-wk-fig .v { font-size: 20px; }
  .lp-ch-more > div + div { border-left: 0; border-top: 1px solid var(--ot-line-soft); }
  .lp-done-row, .lp-done-list > summary { padding-left: 16px; padding-right: 16px; }
}
@media print { .lp-goal-acts, .lp-tabs, .lp-chart .hit { display: none !important; } }

/* ---------- Phones and tablets ---------- */
@media (max-width: 1180px) { .lp-snap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .lp-ways { grid-template-columns: minmax(0, 1fr); }
  .lp-start { grid-template-columns: minmax(0, 1fr); }
  .lp-start-side { border-left: 0; border-top: 1px solid var(--ot-blue-soft-line); }
}
@media (max-width: 760px) {
  .lp-lik-key { display: none; }
  .lp-lik fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; }
  .lp-lik legend { grid-column: 1 / -1; width: 100%; margin-bottom: 4px; }
  .lp-lik .lp-sc { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
}
@media (max-width: 640px) {
  .lp-q .ot-choices, .lp-q .ot-choices.lp-c4 { grid-template-columns: minmax(0, 1fr); }
  .lp-q-head, .lp-q-body, .lp-q-foot { padding-left: 16px; padding-right: 16px; }
  .lp-q-msg { margin: 0 16px; }
  .lp-q-foot .ot-btn { flex: 1 1 auto; }
  .lp-start-main, .lp-start-side { padding: 20px 16px; }
  .lp-ans { padding-left: 16px; padding-right: 16px; }
  .lp-ans .ot-dl { grid-template-columns: minmax(0, 1fr); }
  .lp-ans-who { margin-left: 16px; margin-right: 16px; }
  .lp-snap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .lp-q .ot-choices.lp-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (forced-colors: active) {
  .lp-lik input:checked + span, .lp-chip input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .lp-chip input:checked + span::after { border-color: HighlightText; }
}
@media print { .lp-q-foot { display: none; } }

/* ---------- The planner (Phase 2): the month, and tests and assignments ----------
   pl- the planner, as- tests and assignments (learning-tests.js). */
.pl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.pl-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-nav { display: inline-flex; align-items: center; gap: 4px; }
.pl-nav .ot-btn { min-width: 44px; padding: 0 10px; }
.pl-range { font-weight: 700; font-size: 16px; }
.pl-month { border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); overflow: hidden; background: #fff; }
.pl-mh, .pl-mg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pl-mh span { padding: 8px 10px; font-size: 13px; font-weight: 700; color: var(--ot-muted); background: #F8FAFB; border-bottom: 1px solid var(--ot-line); }
.pl-md { min-height: 96px; padding: 6px 8px; border-top: 1px solid var(--ot-line-soft); border-left: 1px solid var(--ot-line-soft); display: grid; gap: 4px; align-content: start; min-width: 0; }
.pl-md:nth-child(7n + 1) { border-left: 0; }
.pl-md:nth-child(-n + 7) { border-top: 0; }
.pl-md .n { font-size: 13px; font-weight: 700; }
.pl-md.out .n { color: var(--ot-muted); font-weight: 500; }
.pl-md.today .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ot-blue-strong); color: #fff; }
.pl-md .ev { font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.pl-md .ev.test { background: var(--ot-bad-bg); color: var(--ot-bad); font-weight: 700; }
.pl-md .ev.asg { background: var(--ot-warn-bg); color: var(--ot-warn); font-weight: 700; }
.pl-md .ev.lesson { background: var(--ot-blue-soft); color: var(--ot-blue-strong-press); }
.pl-md .more { font-size: 12px; color: var(--ot-muted); font-weight: 600; }
.as-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.as-head > :first-child { font-size: 17px; margin: 0; }
.as-none { margin: 4px 0 0; }
.as-list { list-style: none; margin: 0; padding: 0; }
.as-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--ot-line-soft); }
.as-list > .as-item:first-child { border-top: 0; }
.as-cal { border-radius: 10px; border: 1px solid var(--ot-bad-line); text-align: center; overflow: hidden; background: #fff; }
.as-cal .mo { background: var(--ot-bad); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 0; }
.as-cal .d { font-size: 20px; font-weight: 750; padding: 2px 0 4px; }
.as-cal.asg { border-color: var(--ot-warn-line); }
.as-cal.asg .mo { background: var(--ot-warn); }
.as-item .t { font-weight: 700; overflow-wrap: anywhere; }
.as-item .m { font-size: 13.5px; color: var(--ot-muted); display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: center; }
.as-left { font-weight: 700; color: var(--ot-bad); }
.as-private { display: inline-flex; align-items: center; gap: 4px; }
.as-private .ot-ic { width: 14px; height: 14px; }
.as-covers, .as-goal, .as-by { margin: 4px 0 0; font-size: 14px; color: var(--ot-ink-2); overflow-wrap: anywhere; }
.as-goal { display: flex; gap: 6px; align-items: flex-start; }
.as-goal .ot-ic { width: 16px; height: 16px; color: var(--ot-ok); flex: none; margin-top: 2px; }
.as-by { font-size: 13px; color: var(--ot-muted); }
.as-result { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 14px; }
.as-item > div > .ot-btn { margin-top: 8px; }
.as-done { margin-top: 12px; border-top: 1px solid var(--ot-line-soft); padding-top: 10px; }
.as-done > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 650; list-style: none; }
.as-done > summary::-webkit-details-marker { display: none; }
.as-done[open] .lp-chev { transform: rotate(180deg); }
.as-kinds { flex-wrap: wrap; }
.as-remove { margin-right: auto; }
@media (max-width: 1100px) { .pl-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .pl-md { min-height: 56px; padding: 4px; }
  .pl-md .ev { padding: 0; width: 8px; height: 8px; border-radius: 50%; }
  .pl-md .ev .evt { display: none; }   /* a dot on a phone: the list beside the calendar says what it is */
  .pl-md .ev.test { background: var(--ot-bad); } .pl-md .ev.asg { background: var(--ot-warn); } .pl-md .ev.lesson { background: var(--ot-blue-strong); }
  .pl-md .more { display: none; }
  .pl-mh span { padding: 6px 4px; text-align: center; }
}
@media (max-width: 640px) {
  .as-item { grid-template-columns: 48px minmax(0, 1fr); }
  .as-item > .ot-btn { grid-column: 2; justify-self: start; }
}
@media print { .as-item .ot-btn, .as-head .ot-btn, .pl-nav { display: none !important; } }

/* ---------- The planner's days and week (Phase 2, Slice 7; learning-planner.js, learning/planner.js) ---------- */
.pl-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.pl-conn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0 0 16px; }
.pl-conn > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); background: var(--ot-surface); }
.pl-conn .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #EEF2F6; color: var(--ot-ink-2); flex: none; }
.pl-conn .ic.g { background: var(--ot-blue-soft); color: var(--ot-blue-strong); }
.pl-conn .tx { flex: 1; min-width: 0; }
.pl-conn .k { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ot-muted); }
.pl-conn .v { font-weight: 650; font-size: 14.5px; overflow-wrap: anywhere; }
.pl-side-stack { display: grid; gap: 20px; align-content: start; }
.pl-day { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding: 16px 20px; }
.pl-ring { --p: 0; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--ot-ok) calc(var(--p) * 1%), #E3E9EF 0); display: grid; place-items: center; flex: none; }
.pl-ring span { width: 40px; height: 40px; border-radius: 50%; background: var(--ot-surface); display: grid; place-items: center; font-weight: 750; font-size: 13px; }
.pl-stat { display: grid; }
.pl-stat b { font-size: 17px; }
.pl-stat > span { font-size: 13.5px; color: var(--ot-muted); }
.pl-stat > .pl-streak { display: inline-flex; align-items: center; gap: 4px; color: var(--ot-ink-2); font-weight: 600; }
.pl-streak .ot-ic { width: 15px; height: 15px; color: var(--ot-warn); }
.pl-quick { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ot-line-soft); }
.pl-quick .ot-input { flex: 1; min-width: 0; }
.pl-carry { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--ot-r-md); background: var(--ot-warn-bg); border: 1px solid var(--ot-warn-line); display: grid; gap: 10px; }
.pl-carry h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; color: var(--ot-warn); margin: 0; }
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-when { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ot-muted); margin: 18px 0 0; }
.pl-none { margin: 18px 0 0; }
.pl-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); background: var(--ot-surface); }
.pl-item > input { width: 24px; height: 24px; margin: 0; accent-color: var(--ot-ok); justify-self: center; }
.pl-item .t { font-weight: 650; overflow-wrap: anywhere; }
.pl-item .m { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--ot-muted); margin-top: 2px; }
.pl-item .a { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pl-item.done .t { color: var(--ot-muted); text-decoration: line-through; }
.pl-item.lesson { background: var(--ot-blue-tint); border-color: var(--ot-blue-soft-line); }
.pl-item.test { background: #FFF8F7; border-color: var(--ot-bad-line); }
.pl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ot-blue-strong); justify-self: center; }
.pl-flag { justify-self: center; color: var(--ot-bad); display: grid; }
.pl-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ot-ink-2); }
.pl-src { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.pl-src.ot { background: var(--ot-blue-soft); color: var(--ot-blue-strong); }
.pl-src.goal { background: var(--ot-ok-bg); color: var(--ot-ok); }
.pl-src.rev { background: #F1ECFB; color: #5B3BA8; }
.pl-src.test { background: var(--ot-bad-bg); color: var(--ot-bad); }
.pl-src.mine { background: #EEF2F6; color: var(--ot-ink-2); }
.pl-private { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ot-muted); }
.pl-private .ot-ic { width: 14px; height: 14px; }
.pl-more { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ot-line-button); border-radius: 10px; background: var(--ot-surface); color: var(--ot-ink-2); cursor: pointer; }
.pl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--ot-line); border-radius: var(--ot-r-md); overflow: hidden; background: var(--ot-surface); }
.pl-wd { border-left: 1px solid var(--ot-line-soft); min-height: 300px; display: flex; flex-direction: column; min-width: 0; }
.pl-wd:first-child { border-left: 0; }
.pl-wd-h { padding: 10px 10px 8px; border-bottom: 1px solid var(--ot-line-soft); display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pl-wd-h b { font-size: 14px; }
.pl-wd-h span { font-size: 13px; color: var(--ot-muted); }
.pl-wd.today .pl-wd-h { background: var(--ot-blue-tint); box-shadow: inset 0 -3px 0 var(--ot-blue-strong); }
.pl-wd.today .pl-wd-h b { color: var(--ot-blue-strong); }
.pl-wd-b { padding: 8px; display: grid; gap: 6px; align-content: start; flex: 1; }
.pl-wd-none { font-size: 13px; color: var(--ot-muted); padding: 2px; }
.pl-chip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: start; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--ot-line); font-size: 13px; line-height: 1.35; background: var(--ot-surface); overflow-wrap: anywhere; }
.pl-chip-l { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: start; min-height: 24px; min-width: 0; }
label.pl-chip-l { cursor: pointer; }
.pl-chip-l > span { min-width: 0; }
.pl-chip input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--ot-ok); }
.pl-chip .s { display: block; color: var(--ot-muted); font-size: 12px; }
.pl-chip .pl-private { display: flex; font-size: 12px; }
.pl-chip.done .pl-chip-l > span { text-decoration: line-through; color: var(--ot-muted); }
.pl-chip.lesson { background: var(--ot-blue-soft); border-color: var(--ot-blue-soft-line); font-weight: 650; color: var(--ot-blue-strong-press); }
.pl-chip.lesson .s { color: var(--ot-ink-2); }
.pl-chip.test { background: var(--ot-bad-bg); border-color: var(--ot-bad-line); font-weight: 700; color: var(--ot-bad); }
.pl-chip.test .s { color: var(--ot-ink-2); }
.pl-chip.rev { border-color: #D9CCF4; background: #F8F5FE; }
.pl-chip.goal { border-color: var(--ot-ok-line); }
.pl-chip-open { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--ot-ink-2); cursor: pointer; }
.pl-chip-open .ot-ic { width: 16px; height: 16px; }
.pl-chip-open:hover { background: #EEF2F6; }
.pl-add-day { margin-top: auto; padding: 6px 8px 8px; }
.pl-add-day button { width: 100%; min-height: 32px; border: 1px dashed var(--ot-line-button); border-radius: 8px; background: none; color: var(--ot-muted); font: 600 13px var(--ot-font); cursor: pointer; }
.pl-wk-foot { display: flex; gap: 10px 24px; flex-wrap: wrap; padding: 12px 4px; font-size: 14px; color: var(--ot-muted); }
.pl-wk-foot b { color: var(--ot-ink); }
.pl-wk-h { font-size: 17px; margin: 0; }
.pl-week-wrap { margin-top: 20px; }
.pl-tests { margin-bottom: 8px; }
.pl-tipbox { display: grid; gap: 10px; }
.pl-tipbox h3 { font-size: 16px; margin: 0; }
.pl-tipbox .t { font-weight: 700; }
.pl-tipbox p { margin: 2px 0 0; font-size: 14px; color: var(--ot-ink-2); }
.pl-tip { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: var(--ot-r-sm); background: var(--ot-blue-tint); border: 1px solid var(--ot-blue-soft-line); color: var(--ot-ink-2); font-size: 14.5px; }
.pl-tip .ot-ic { color: var(--ot-blue-strong); flex: none; margin-top: 2px; }
.pl-timer { text-align: center; display: grid; gap: 12px; justify-items: center; }
.pl-clock { --p: 0; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(var(--ot-blue-strong) calc(var(--p) * 1%), var(--ot-blue-soft) 0); display: grid; place-items: center; }
.pl-clock span { width: 170px; height: 170px; border-radius: 50%; background: var(--ot-surface); display: grid; place-items: center; font-size: 42px; font-weight: 750; font-variant-numeric: tabular-nums; }
.pl-timer-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pl-custom { width: 100%; max-width: 200px; text-align: left; }
.pl-rev { display: grid; gap: 10px; }
.pl-rev-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 160px 110px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #D9CCF4; border-radius: var(--ot-r-md); background: #F8F5FE; }
.pl-rev-row .n { width: 28px; height: 28px; border-radius: 50%; background: #5B3BA8; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.pl-rev-row .t { font-weight: 650; }
.pl-rev-row .s { font-size: 13px; color: var(--ot-ink-2); }
.pl-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-kinds label { position: relative; margin: 0; }
.pl-kinds input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pl-kinds span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ot-line-button); border-radius: 999px; font-weight: 600; font-size: 14.5px; color: var(--ot-ink-2); background: var(--ot-surface); }
.pl-kinds input:checked + span { background: var(--ot-blue-soft); border-color: var(--ot-blue-strong); color: var(--ot-blue-strong); box-shadow: inset 0 0 0 1px var(--ot-blue-strong); }
.pl-kinds input:focus-visible + span { outline: 3px solid var(--ot-blue-strong); outline-offset: 2px; }
.pl-row2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pl-row2.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-until { margin-top: 10px; max-width: 220px; }
.pl-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ot-ink-2); }
.pl-link { display: flex; gap: 8px; }
.pl-link .ot-input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
.pl-share { grid-template-columns: minmax(0, 1fr); }
.as-rev { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin-top: 6px; }
.as-rev .ot-bl-track { width: 90px; margin: 0; }
.sp-note { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ot-muted); margin: 0 0 14px; }
.sp-note .ot-ic { width: 16px; height: 16px; flex: none; }
@media (max-width: 1100px) {
  .pl-week { grid-template-columns: minmax(0, 1fr); }
  .pl-wd { border-left: 0; border-top: 1px solid var(--ot-line-soft); min-height: 0; }
  .pl-wd:first-child { border-top: 0; }
}
@media (max-width: 760px) { .pl-conn { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pl-item { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px; align-items: start; }
  .pl-item > input { margin-top: 1px; }
  .pl-item .a .ot-btn-text { display: none; }
  .pl-carry .pl-item { grid-template-columns: 26px minmax(0, 1fr); }
  .pl-carry .pl-item .a { grid-column: 2; justify-content: flex-start; }
  .pl-carry .pl-item .a .ot-btn-text { display: inline-flex; }
  .pl-day, .pl-quick { padding-left: 16px; padding-right: 16px; }
  .pl-rev-row { grid-template-columns: 28px minmax(0, 1fr); }
  .pl-rev-row > :nth-child(n+3) { grid-column: 2; }
  .pl-row2, .pl-row2.two { grid-template-columns: minmax(0, 1fr); }
}
@media print { .pl-acts, .pl-conn, .pl-quick, .pl-add-day, .pl-chip-open, .pl-more { display: none !important; } }

/* ---------- progress reports (learning-report.js, Phase 2, Slice 9) ---------- */
.rp-sheet { background: var(--ot-surface); border: 1px solid var(--ot-line); border-radius: var(--ot-r-lg); padding: 28px 32px; max-width: 820px; color: var(--ot-ink); }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--ot-blue); }
.rp-logo { height: 30px; width: auto; }
.rp-title { text-align: right; }
.rp-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ot-blue-strong); }
.rp-title > :last-child { margin: 2px 0 0; font-size: 22px; }
.rp-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin: 16px 0; }
.rp-meta dt { font-size: 12.5px; color: var(--ot-muted); font-weight: 600; }
.rp-meta dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.rp-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.rp-fig { border: 1px solid var(--ot-line-soft); border-radius: var(--ot-r-md); padding: 10px 12px; background: var(--ot-canvas); }
.rp-fig .v { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.rp-fig .k { font-size: 13px; color: var(--ot-muted); }
.rp-fig .s { font-size: 12.5px; font-weight: 600; color: var(--ot-ink-2); }
.rp-sec { margin-top: 14px; }
.rp-sec > :first-child { margin: 0 0 6px; font-size: 15px; color: var(--ot-blue-strong); }
.rp-sec p { margin: 0; }
.rp-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.rp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.rp-home { background: var(--ot-blue-tint); border-radius: var(--ot-r-md); padding: 12px 16px; }
.rp-habits { margin-top: 10px; }
.rp-habits .rp-fig { background: var(--ot-surface); }
.rp-sub { font-size: 12.5px; color: var(--ot-muted); margin: 6px 0 0; }
.rp-sec p.rp-sub { margin-top: 6px; }
/* each lesson's rating: the chart beside the table (learning-report.js) */
.rp-lessons { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rp-chart { width: 100%; height: auto; display: block; }
.rp-chart .grid { stroke: var(--ot-line); stroke-width: 1; }
.rp-chart .axis { font-size: 10px; fill: var(--ot-muted); }
.rp-chart .line { fill: none; stroke: var(--ot-blue-strong); stroke-width: 2; }
.rp-chart .pt { fill: var(--ot-blue-strong); stroke: var(--ot-surface); stroke-width: 2; }
.rp-chart .lbl { font-size: 11px; font-weight: 700; fill: var(--ot-ink); }
.rp-ltab { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-ltab th, .rp-ltab td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--ot-line-soft); overflow-wrap: anywhere; }
.rp-ltab th { font-size: 12px; color: var(--ot-muted); font-weight: 600; }
.rp-ltab td:first-child, .rp-ltab th:last-child, .rp-ltab td:last-child { white-space: nowrap; }
.rp-ltab th:last-child, .rp-ltab td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rp-tests { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 0 !important; font-size: 14px; }
.rp-tests li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ot-line-soft); padding: 5px 0; }
.rp-tests span { overflow-wrap: anywhere; min-width: 0; }
.rp-tests b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the portal's own note: drawn from the lessons, or answer or redo the learning questions */
.rp-note { border: 1px solid var(--ot-line); border-left: 4px solid var(--ot-blue); border-radius: var(--ot-r-md); padding: 10px 14px; margin-top: 14px; font-size: 14px; }
.rp-note b { display: block; margin-bottom: 2px; }
.rp-note a { color: var(--ot-blue-strong); font-weight: 600; }
.rp-goals { width: 100%; border-collapse: collapse; font-size: 14px; }
.rp-goals th, .rp-goals td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ot-line-soft); overflow-wrap: anywhere; }
.rp-goals th { font-size: 12.5px; color: var(--ot-muted); font-weight: 600; }
.rp-none { color: var(--ot-muted); font-style: italic; }
.rp-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--ot-line-soft); font-size: 12.5px; color: var(--ot-muted); }
#rpPrint { display: none; }
/* the homework sheet (worksheet.js), in the report's template: complete here, as the print window loads
   only ui.css and this file */
.hw-sheet .hw-title { font-size: 22px; line-height: 1.25; }
.hw-sheet .sum { line-height: 1.6; }
.hw-for { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hw-for .rp-fig .v { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.hw-sheet .ws { font-size: 15.5px; line-height: 1.7; max-width: none; overflow-x: auto; }
.hw-sheet .ws-h { font-size: 15.5px; font-weight: 800; margin: 14px 0 4px; }
.hw-sheet .ws-q { display: flex; gap: 10px; margin: 10px 0 0; }
.hw-sheet .ws-qn { font-weight: 750; min-width: 1.8em; flex: none; color: var(--ot-blue-strong); }
.hw-sheet .ws p { margin: 6px 0; }
.ws-room { height: 46px; margin-left: calc(1.8em + 10px); border-bottom: 1px dashed var(--ot-line);
  background: repeating-linear-gradient(transparent 0 22px, var(--ot-line-soft) 22px 23px); }
.hw-sheet .ws-tips { margin-top: 14px; max-width: none; background: var(--ot-blue-tint); border: 0; border-radius: var(--ot-r-md); padding: 12px 16px; }
.hw-sheet .ws-tips .ws-q { margin: 4px 0 0; }
.hw-sheet .ws-tips .ws-qn { min-width: 1.2em; }
.hw-sheet .ws-plan { max-width: none; color: inherit; }
@media (max-width: 760px) { .hw-for { grid-template-columns: minmax(0, 1fr); } }
/* the list of reports, and one open */
.rp-year { margin: 18px 0 8px; font-size: 15px; color: var(--ot-muted); }
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rp-item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; }
.rp-item > div { flex: 1 1 240px; min-width: 0; }
.rp-item .t { font-weight: 650; overflow-wrap: anywhere; }
.rp-item .s { font-size: 13.5px; color: var(--ot-muted); }
.lp-new-badge { margin-left: 8px; vertical-align: middle; }
.rp-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
/* writing a report, for staff (learning-staff.js) */
.rp-list-h { margin: 0 0 6px; font-size: 18px; }
.rp-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rp-edit { display: grid; gap: 12px; min-width: 0; }
.rp-points { display: grid; gap: 8px; }
.rp-point { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rp-count { font-size: 12.5px; color: var(--ot-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-count.over { color: var(--ot-bad); font-weight: 700; }
.rp-edit-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rp-edit-acts .as-remove { margin-right: auto; }
.rp-ai { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rp-inputs { margin: 0 0 12px; }
.rp-side { position: sticky; top: 16px; min-width: 0; }
.rp-side-h { margin: 0 0 8px; font-size: 13.5px; color: var(--ot-muted); text-transform: uppercase; letter-spacing: .05em; }
.rp-preview .rp-sheet { padding: 18px; font-size: 14px; }
.rp-preview .rp-meta, .rp-preview .rp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-preview .rp-two, .rp-preview .rp-lessons { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .rp-editor { grid-template-columns: minmax(0, 1fr); } .rp-side { position: static; } }
@media (max-width: 760px) {
  .rp-sheet { padding: 18px 16px; }
  .rp-meta, .rp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-two, .rp-lessons { grid-template-columns: minmax(0, 1fr); }
  .rp-head { flex-direction: column; align-items: flex-start; }
  .rp-title { text-align: left; }
}
@page { size: A4; margin: 12mm; }
/* the homework sheet in print, on as many A4 pages as it needs: the computer's layout (the page is narrower
   than the phone breakpoint), with three ruled lines to write on under each question, a question never parted
   from its lines, and no heading left at the foot of a page */
@media print {
  .hw-sheet { font-size: 10.5pt; line-height: 1.45; }
  .hw-sheet .rp-head { flex-direction: row; align-items: center; }
  .hw-sheet .rp-title { text-align: right; }
  .hw-sheet .hw-title { font-size: 17pt; }
  .hw-sheet .rp-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hw-sheet .hw-for { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hw-sheet .ws { font-size: 10.5pt; line-height: 1.55; }
  .hw-sheet .ws-room { height: 66px; border-bottom: 0; background: repeating-linear-gradient(transparent 0 21px, var(--ot-line) 21px 22px);
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* the lines print, as backgrounds otherwise don't */
  .hw-sheet .ws-item, .hw-sheet .ws-tips, .hw-sheet .rp-note, .hw-sheet .rp-fig, .hw-sheet .rp-sec:first-of-type { break-inside: avoid; }
  .hw-sheet .hw-h, .hw-sheet .ws-h { break-after: avoid; }
  .hw-sheet .rp-head, .hw-sheet .rp-fig, .hw-sheet .ws-tips, .hw-sheet .rp-note { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media print {
  body.rp-printing > *:not(#rpPrint) { display: none !important; }
  body.rp-printing #rpPrint { display: block; }
  #rpPrint .rp-sheet { border: 0; border-radius: 0; padding: 0; max-width: none; font-size: 10.5pt; line-height: 1.45; }
  #rpPrint .rp-meta, #rpPrint .rp-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #rpPrint .rp-two, #rpPrint .rp-lessons { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #rpPrint .rp-head { flex-direction: row; align-items: center; }
  #rpPrint .rp-title { text-align: right; }
  #rpPrint .rp-fig .v { font-size: 16pt; }
  #rpPrint .rp-ltab, #rpPrint .rp-goals, #rpPrint .rp-tests { font-size: 9.5pt; }
  #rpPrint .rp-home, #rpPrint .rp-fig, #rpPrint .rp-head, #rpPrint .rp-note, #rpPrint .rp-chart { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #rpPrint .rp-fig, #rpPrint .rp-two, #rpPrint .rp-home, #rpPrint .rp-note, #rpPrint .rp-summary, #rpPrint .rp-chart, #rpPrint tr, #rpPrint li { break-inside: avoid; }
  #rpPrint .rp-sec > :first-child { break-after: avoid; }
}