/* =========================================================================
 * teacher-profile.css — "My Somolangu" teacher shell (5-tab)
 * Ported from public/teacher-profile-prototype.html. Every rule is scoped to
 * #tp-root (or .tp-bnav, which is fixed outside the root) so the teacher shell
 * cannot leak styles into the rest of math-revision.html.
 * ========================================================================= */

#tp-root {
  --t-dark:#1e3a8a; --t:#2563eb; --t-soft:#eff6ff; --t-border:#bfdbfe;
  --ink:#111827; --mut:#6b7280; --line:#e5e7eb;
  /* fixed-chrome metrics: nav height + iOS safe area, reused by basket + spacers */
  --tp-safe:env(safe-area-inset-bottom,0px);
  --tp-nav-h:60px;
  --tp-chrome:calc(var(--tp-nav-h) + var(--tp-safe));
  width:100%; max-width:900px; margin:0 auto;
  /* clear the fixed bottom nav AND the floating basket that sits above it */
  padding-bottom:calc(var(--tp-chrome) + 76px);
  scroll-padding-bottom:calc(var(--tp-chrome) + 76px);
  overscroll-behavior-y:contain;
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#tp-root *, .tp-bnav * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* ---------- page header ---------- */
#tp-root .tp-phead { background:linear-gradient(135deg,var(--t-dark),var(--t)); color:#fff; padding:14px 14px 20px; border-radius:14px; }
#tp-root .tp-phead .row { display:flex; align-items:center; gap:8px; }
#tp-root .tp-phead h2 { margin:0; font-size:18px; font-weight:700; }
#tp-root .tp-phead p { margin:4px 0 0; font-size:12px; opacity:.9; }
#tp-root .subj-chip { display:inline-block; vertical-align:middle; margin-left:8px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:700; background:#fff; color:var(--t-dark); }
#tp-root .tp-back-icon { width:36px; height:36px; min-height:36px; flex-shrink:0; border:0; border-radius:9px; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
#tp-root .tp-back-icon svg { width:18px; height:18px; }

/* ---------- generic blocks ---------- */
#tp-root .panel { padding:12px 2px 20px; display:none; }
#tp-root .panel.active { display:block; animation:tpFadeUp .26s ease both; }
@keyframes tpFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

#tp-root .card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.05); padding:14px; margin-bottom:10px; }
#tp-root .card h3 { margin:0 0 10px; font-size:14px; font-weight:700; }
#tp-root .card h3 .more { float:right; font-size:11px; font-weight:600; color:var(--t); }
#tp-root .sec-label { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; font-weight:700; margin:14px 4px 8px; }

#tp-root .kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
#tp-root .kpi { background:#fff; border-radius:12px; padding:12px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
#tp-root .kpi .v { font-size:21px; font-weight:800; color:var(--t-dark); }
#tp-root .kpi .l { font-size:11px; color:var(--mut); font-weight:600; margin-top:2px; }
#tp-root .kpi .d { font-size:11px; font-weight:700; margin-top:4px; }
#tp-root .d.up { color:#059669; }
#tp-root .d.down { color:#dc2626; }

#tp-root .qa-row { display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; }
#tp-root .qa-row::-webkit-scrollbar { display:none; }
#tp-root .qa { flex:0 0 auto; min-height:44px; display:flex; align-items:center; gap:6px; padding:10px 13px; border-radius:10px; background:#fff; border:1px solid var(--line); font-size:12.5px; font-weight:700; color:#374151; cursor:pointer; white-space:nowrap; }
#tp-root .qa.primary { background:var(--t-dark); color:#fff; border-color:var(--t-dark); }

#tp-root .listrow { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed #f1f3f5; font-size:13px; }
#tp-root .listrow:last-child { border:0; }
#tp-root .listrow .n { flex:1; min-width:0; }
#tp-root .listrow .n b { display:block; font-weight:700; font-size:13px; }
#tp-root .listrow .n span { display:block; font-size:11px; color:var(--mut); margin-top:2px; }
#tp-root .badge { font-size:10px; font-weight:800; padding:3px 8px; border-radius:99px; white-space:nowrap; }
#tp-root .badge.live { background:#dcfce7; color:#166534; }
#tp-root .badge.sched { background:#e0e7ff; color:#3730a3; }
#tp-root .badge.draft { background:#f3f4f6; color:#4b5563; }
#tp-root .badge.done { background:#f1f5f9; color:#334155; }
#tp-root .badge.warn { background:#fee2e2; color:#991b1b; }
#tp-root .avc { width:34px; height:34px; border-radius:50%; background:var(--t-soft); color:var(--t-dark); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

#tp-root .bar { height:8px; border-radius:99px; background:#f1f5f9; overflow:hidden; margin-top:6px; }
#tp-root .bar > i { display:block; height:100%; border-radius:99px; background:var(--t); }
#tp-root .bar > i.good { background:#10b981; }
#tp-root .bar > i.mid { background:#f59e0b; }
#tp-root .bar > i.bad { background:#ef4444; }

/* ---------- filters ---------- */
#tp-root .filters { background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.05); margin-bottom:10px; }
#tp-root .ctrl-label { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
#tp-root .seg { display:inline-flex; background:#f3f4f6; border-radius:10px; padding:3px; }
#tp-root .seg button { border:0; background:transparent; padding:8px 12px; font-size:12px; font-weight:700; color:#374151; border-radius:8px; min-height:36px; cursor:pointer; }
#tp-root .seg button.active { background:var(--t-dark); color:#fff; }
#tp-root .form-tabs { display:flex; gap:6px; margin-top:10px; }
#tp-root .form-tab { flex:1; padding:10px 4px; border-radius:9px; border:1px solid var(--line); background:#f9fafb; color:#374151; font-size:13px; font-weight:800; cursor:pointer; min-height:42px; }
#tp-root .form-tab.active { background:var(--t-soft); color:var(--t-dark); border-color:var(--t-border); }
#tp-root .src-check { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px; background:#f9fafb; border:1px solid var(--line); font-size:12px; font-weight:600; color:#374151; min-height:36px; cursor:pointer; }
#tp-root .src-check input { accent-color:var(--t-dark); width:16px; height:16px; }
#tp-root .chips-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* questions summary line */
#tp-root .tp-qsum { font-size:12px; color:var(--mut); font-weight:600; margin:2px 4px 10px; }
#tp-root .tp-qsum b { color:var(--t-dark); font-weight:800; }


/* ---------- topics ---------- */
#tp-root .topic-card { background:#fff; border-radius:12px; margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,.05); overflow:hidden; }
#tp-root .topic-head { display:flex; align-items:center; gap:8px; padding:13px 14px; cursor:pointer; min-height:56px; }
#tp-root .topic-head .chev { color:#9ca3af; transition:transform .2s; font-size:13px; }
#tp-root .topic-card.open .topic-head .chev { transform:rotate(90deg); }
#tp-root .topic-head .name { flex:1; font-size:13.5px; font-weight:700; }
#tp-root .topic-head .pill { font-size:10.5px; color:var(--mut); background:#f3f4f6; padding:3px 8px; border-radius:99px; font-weight:700; }
#tp-root .cnt-pill { font-size:12px; font-weight:800; color:var(--t-dark); background:var(--t-soft); border:1px solid var(--t-border); padding:5px 9px; border-radius:8px; white-space:nowrap; }
#tp-root .subtopics { display:none; padding:0 14px 12px; border-top:1px solid #f3f4f6; }
#tp-root .topic-card.open .subtopics { display:block; }
#tp-root .sub-row { display:flex; align-items:center; gap:8px; padding:11px 0; border-bottom:1px dashed #f3f4f6; }
#tp-root .sub-row:last-child { border:0; }
#tp-root .sub-row .sname { flex:1; font-size:12.5px; font-weight:600; color:#374151; }
#tp-root .mini-btn { border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 9px; font-size:11.5px; font-weight:700; color:#374151; cursor:pointer; min-height:36px; }
#tp-root .mini-btn.add { border-color:var(--t-border); background:var(--t-soft); color:var(--t-dark); }

#tp-root .diff { font-size:10px; font-weight:800; padding:2px 7px; border-radius:99px; }
#tp-root .diff.easy { background:#dcfce7; color:#166534; }
#tp-root .diff.med { background:#fef3c7; color:#92400e; }
#tp-root .diff.hard { background:#fee2e2; color:#991b1b; }

/* ---------- sub tabs ---------- */
#tp-root .subtabs { display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; scrollbar-width:none; }
#tp-root .subtabs::-webkit-scrollbar { display:none; }
#tp-root .subtab { flex:0 0 auto; padding:8px 13px; border-radius:99px; border:1px solid var(--line); background:#fff; font-size:12px; font-weight:700; color:#4b5563; cursor:pointer; min-height:40px; }
#tp-root .subtab.active { background:var(--t-dark); color:#fff; border-color:var(--t-dark); }

#tp-root .note { font-size:11.5px; color:var(--mut); background:#fff; border:1px dashed var(--line); border-radius:10px; padding:10px 12px; margin-bottom:10px; line-height:1.5; }
#tp-root .empty { text-align:center; color:var(--mut); font-size:13px; padding:26px 16px; font-weight:600; }
#tp-root .code-box { display:flex; align-items:center; gap:10px; background:var(--t-soft); border:1px dashed var(--t-border); border-radius:10px; padding:12px; }
#tp-root .code-box b { flex:1; font-size:18px; letter-spacing:2px; color:var(--t-dark); font-family:ui-monospace,monospace; }
#tp-root .tp-hidden { display:none !important; }

/* ---------- roster ---------- */
#tp-root .sort-row { display:flex; align-items:center; gap:8px; margin:2px 0 8px; overflow-x:auto; scrollbar-width:none; }
#tp-root .sort-row::-webkit-scrollbar { display:none; }
#tp-root .sort-row .seg { flex:0 0 auto; }
#tp-root .r-row { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--line); cursor:pointer; min-height:56px; }
#tp-root .r-row:last-child { border-bottom:0; }
#tp-root .r-row.sel { background:var(--t-soft); border-radius:10px; padding-left:8px; padding-right:8px; }
#tp-root .r-main { flex:1; min-width:0; }
#tp-root .r-main b { display:block; font-size:13px; font-weight:800; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tp-root .r-main span { display:block; font-size:11px; color:var(--mut); font-weight:600; margin-top:2px; }
#tp-root .r-acc { font-size:14px; font-weight:900; min-width:44px; text-align:right; }
#tp-root .r-acc.good { color:#059669; }
#tp-root .r-acc.mid { color:#b45309; }
#tp-root .r-acc.bad { color:#dc2626; }
#tp-root .r-trend { font-size:12px; font-weight:900; min-width:18px; text-align:center; }
#tp-root .r-trend.up { color:#059669; }
#tp-root .r-trend.down { color:#dc2626; }
#tp-root .r-trend.flat { color:#9ca3af; }

/* fixed chrome metrics also needed on <body>-level elements */
.tp-basket, .tp-bnav { --tp-safe:env(safe-area-inset-bottom,0px); --tp-nav-h:60px; --tp-chrome:calc(var(--tp-nav-h) + var(--tp-safe)); }

/* ---------- basket (floating) ---------- */
.tp-basket { position:fixed; bottom:calc(var(--tp-chrome) + 12px); left:50%; transform:translateX(-50%); z-index:45; display:flex; align-items:center; gap:10px; background:#1e3a8a; color:#fff; padding:11px 15px; border-radius:99px; box-shadow:0 8px 22px rgba(30,58,138,.35); font-size:12.5px; font-weight:700; cursor:pointer; max-width:92%; white-space:nowrap; border:0; }
.tp-basket .ct { background:#fff; color:#1e3a8a; border-radius:99px; padding:2px 8px; font-size:11px; font-weight:900; }
.tp-basket.tp-hidden { display:none !important; }

/* ---------- bottom nav (fixed) ---------- */
.tp-bnav { position:fixed; bottom:0; left:0; right:0; z-index:50; background:#fff; border-top:1px solid #e5e7eb; box-shadow:0 -2px 12px rgba(0,0,0,.06); padding-bottom:var(--tp-safe); }
.tp-bnav-inner { display:flex; width:100%; max-width:900px; margin:0 auto; }
.tp-bnav button { flex:1; border:0; background:transparent; padding:8px 2px 10px; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; font-weight:700; color:#9ca3af; cursor:pointer; min-height:var(--tp-nav-h); font-family:inherit; }
.tp-bnav button .ic { font-size:17px; line-height:1; }
.tp-bnav button.active { color:#1e3a8a; }
.tp-bnav button.active .ic { transform:translateY(-1px); }


/* ---------- responsive width ---------- */
#tp-root .panel { padding-left:10px; padding-right:10px; }
@media (max-width:380px) {
  #tp-root .panel { padding-left:6px; padding-right:6px; }
  #tp-root .tp-phead { border-radius:12px; padding:12px 12px 18px; }
}
/* short / small viewports: slimmer nav, extra clearance so nothing hides under it */
@media (max-height:640px), (max-width:380px) {
  #tp-root { --tp-nav-h:54px; }
  .tp-basket, .tp-bnav { --tp-nav-h:54px; }
  .tp-bnav button { padding:6px 2px 8px; font-size:10px; }
  .tp-bnav button .ic { font-size:16px; }
}
@media (min-width:700px) {
  #tp-root .panel { padding-left:16px; padding-right:16px; }
  #tp-root .kpis { grid-template-columns:repeat(4,1fr); }
}
/* when the basket is hidden the page only needs to clear the nav */
#tp-root.tp-no-basket { padding-bottom:calc(var(--tp-chrome) + 20px); scroll-padding-bottom:calc(var(--tp-chrome) + 20px); }


/* ---------- Questions tab: dedicated topic/subtopic question list ---------- */
#tp-root .cnt-pill[data-tp-open] { cursor:pointer; min-height:32px; }
#tp-root .cnt-pill[data-tp-open]:active { background:var(--t-border); }
#tp-root .cnt-pill[disabled] { opacity:.5; cursor:default; }

#tp-root .tp-qdetail { display:none; }
#tp-root .tp-qdetail.active { display:block; animation:tpFadeUp .26s ease both; }
#tp-root .tp-qd-head { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
#tp-root .tp-qd-back { width:36px; height:36px; min-height:36px; flex-shrink:0; border:0; border-radius:9px; background:#f3f4f6; color:var(--ink); font-size:20px; line-height:1; cursor:pointer; }
#tp-root .tp-qd-head .t { flex:1; min-width:0; }
#tp-root .tp-qd-head h3 { margin:0; font-size:14px; font-weight:800; color:var(--t-dark); }
#tp-root .tp-qd-head .meta { font-size:11px; color:var(--mut); margin-top:2px; }

#tp-root .tp-qd-item { margin-bottom:12px; }
#tp-root .tp-qd-item .tp-embedded-card { border-radius:12px; }

#tp-root .tp-akey-toggle { display:flex; align-items:center; gap:7px; width:100%; min-height:40px; margin-top:-2px; padding:9px 12px; border:1px solid var(--t-border); border-top:0; border-radius:0 0 11px 11px; background:var(--t-soft); color:var(--t-dark); font-size:12px; font-weight:800; cursor:pointer; }
#tp-root .tp-akey-toggle .chev { transition:transform .18s ease; font-size:14px; }
#tp-root .tp-qd-item.akey-open .tp-akey-toggle { border-radius:0; }
#tp-root .tp-qd-item.akey-open .tp-akey-toggle .chev { transform:rotate(90deg); }

#tp-root .akey { display:none; border:1px solid var(--t-border); border-top:0; background:var(--t-soft); border-radius:0 0 11px 11px; padding:9px 10px 10px; }
#tp-root .tp-qd-item.akey-open .akey { display:block; animation:tpFadeUp .18s ease both; }
#tp-root .akey-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
#tp-root .akey-head .lbl { font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; border-radius:6px; padding:2px 6px; }
#tp-root .akey-tabs { display:flex; gap:5px; margin-left:auto; flex-wrap:wrap; }
#tp-root .akey-tabs button { border:1px solid var(--t-border); background:#fff; color:var(--t-dark); font-size:11px; font-weight:800; border-radius:99px; padding:6px 11px; min-height:32px; cursor:pointer; }
#tp-root .akey-tabs button.on { background:var(--t-dark); border-color:var(--t-dark); color:#fff; }
#tp-root .akey-body { background:#fff; border:1px solid var(--t-border); border-radius:9px; padding:9px 10px; font-size:12.5px; color:#374151; line-height:1.6; overflow-x:auto; }
#tp-root .akey-body .ans { font-weight:800; color:var(--t-dark); font-size:13.5px; }
#tp-root .akey-body ol { margin:0; padding-left:18px; }
#tp-root .akey-body ol li { margin:4px 0; }
#tp-root .akey-body .none { color:var(--mut); font-style:italic; }
#tp-root .akey-body .vid { display:flex; align-items:flex-start; gap:9px; }
#tp-root .akey-body .vid .thumb { width:58px; height:38px; border-radius:7px; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
#tp-root .akey-body img { max-width:100%; height:auto; }

/* ---- Answer key video player (mirrors the learner video tab) ---- */
#tp-root .tp-vwrap { position:relative; width:100%; aspect-ratio:16/9; background:#111827; border-radius:10px; overflow:hidden; }
#tp-root .tp-vwrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#tp-root .tp-vph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#e5e7eb; background:#111827; font-size:12px; font-weight:700; }
#tp-root .tp-vph .ic { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:18px; }
#tp-root .tp-vph p { margin:0; }
#tp-root .tp-vlist { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
#tp-root .tp-vlist .lbl { margin:0 0 2px; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
#tp-root .tp-vsrc { display:flex; align-items:center; gap:9px; width:100%; min-height:48px; padding:8px 10px; border:1px solid var(--t-border); border-radius:10px; background:#fff; text-align:left; cursor:pointer; }
#tp-root .tp-vsrc.active { border-color:var(--t-dark); background:var(--t-soft); }
#tp-root .tp-vsrc .pbtn { width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--t-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
#tp-root .tp-vsrc .t { min-width:0; display:flex; flex-direction:column; }
#tp-root .tp-vsrc .t b { font-size:12.5px; color:#111827; }
#tp-root .tp-vsrc .t span { font-size:11px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#tp-root .tp-vyt { display:inline-flex; align-items:center; gap:6px; margin-top:9px; min-height:40px; padding:8px 12px; border-radius:10px; background:#fef2f2; border:1px solid #fecaca; color:#dc2626; font-size:11.5px; font-weight:800; text-decoration:none; }

/* ---- Export bar for the dedicated topic/subtopic question list ---- */
#tp-root .tp-qd-export { background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:12px; }
#tp-root .tp-qd-export .x-btns { display:flex; gap:8px; flex-wrap:wrap; }
#tp-root .tp-qd-export .x-btn { flex:1 1 46%; min-height:44px; padding:10px 12px; border-radius:10px; border:1px solid var(--t-border); background:var(--t-soft); color:var(--t-dark); font-size:12.5px; font-weight:800; cursor:pointer; }
#tp-root .tp-qd-export .x-btn.pdf { background:var(--t-dark); border-color:var(--t-dark); color:#fff; }
#tp-root .tp-qd-export .x-opt { display:flex; align-items:center; gap:8px; margin-top:10px; min-height:44px; font-size:12px; font-weight:700; color:#111827; cursor:pointer; }
#tp-root .tp-qd-export .x-opt input { width:18px; height:18px; flex-shrink:0; accent-color:var(--t-dark); }
#tp-root .tp-qd-export .x-note { margin-top:2px; font-size:11px; color:var(--mut); }

/* ---- "Show full question" toggle + context parts ---- */
#tp-root .tp-fullq-toggle { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px; margin-top:8px; padding:9px 12px; border:1px dashed var(--t-border); border-radius:11px; background:#fff; color:var(--t-dark); font-size:12px; font-weight:800; cursor:pointer; }
#tp-root .tp-fullq-toggle.on { background:var(--t-soft); border-style:solid; }
#tp-root .tp-qd-item.tp-extra-part { opacity:.94; }
#tp-root .tp-qd-item.tp-extra-part .tp-embedded-card { border-left:4px solid #cbd5e1; background:#f8fafc; }
#tp-root .tp-extra-tag { font-size:10.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--mut); margin:2px 0 6px; }

/* Parent stem shown once above the first part of a parent group (mirrors export) */
#tp-root .tp-parent-stem { background:#f8fafc; border:1px dashed var(--t-border); border-left:4px solid var(--t-accent, #3b82f6); border-radius:12px; padding:12px 14px; margin:0 0 8px; }
#tp-root .tp-parent-stem .tp-parent-lbl { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#64748b; margin-bottom:6px; }
#tp-root .tp-parent-stem .tp-parent-text { font-size:14px; line-height:1.6; color:#1e293b; }
#tp-root .tp-parent-stem .tp-parent-text img { max-width:100%; height:auto; }
#tp-root .tp-qd-item.tp-grouped .tp-embedded-card { margin-left:10px; }
@media (max-width:480px){ #tp-root .tp-qd-item.tp-grouped .tp-embedded-card { margin-left:6px; } }