/* LEARNER-PROFILE.CSS — My Somolangu view, scoped under #lp-root.
   Wired via SideDrawer's profile renderer hook. UI-only (no logic yet). */

#lp-root { color:#111827; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#lp-root * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

#lp-root .lp-intro {
  background: linear-gradient(135deg,#065f46,#10b981); color:#fff;
  padding:16px 16px 60px; border-radius:0 0 16px 16px;
}
#lp-root .lp-intro-head {
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
#lp-root .lp-back-icon {
  width:36px; height:36px; flex:0 0 36px; border-radius:10px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; transition:background .15s;
}
#lp-root .lp-back-icon:hover { background:rgba(255,255,255,.28); }
#lp-root .lp-back-icon svg { width:20px; height:20px; }
#lp-root .lp-intro h2 { margin:0; font-size:20px; }
#lp-root .lp-intro p  { margin:0; font-size:13px; opacity:.9; }


#lp-root .lp-tabs-wrap {
  position: sticky; top: 0; z-index: 20;
  background:#fff; border-bottom:1px solid #e5e7eb;
  margin-top:-40px; border-radius:16px 16px 0 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,.04);
}
#lp-root .lp-tabs { display:flex; gap:4px; overflow-x:auto; padding:10px 12px; scrollbar-width:none; }
#lp-root .lp-tabs::-webkit-scrollbar { display:none; }
#lp-root .lp-tab {
  flex:0 0 auto; padding:10px 14px; border-radius:999px;
  border:1px solid #e5e7eb; background:#f9fafb; color:#374151;
  font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
  display:flex; align-items:center; gap:6px; min-height:44px;
}
#lp-root .lp-tab.active { background:#065f46; color:#fff; border-color:#065f46; }

/* Sticky-tabs enhancements (ported from prototype) */
#lp-root .lp-tabs-sentinel { height:1px; width:100%; }
#lp-root .lp-tabs-wrap { transition: box-shadow .2s ease, border-radius .2s ease, margin-top .25s ease; }
#lp-root .lp-tabs-wrap.stuck { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-radius:0; }
#lp-root .lp-tabs-scroll { position: relative; }
#lp-root .lp-tabs-scroll::after {
  content:""; position:absolute; top:0; right:0; bottom:0;
  width:28px; pointer-events:none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
  opacity:1; transition: opacity .2s ease;
}
#lp-root .lp-tabs-scroll.at-end::after { opacity:0; }
#lp-root .lp-tabs { scroll-behavior:smooth; }

/* Emerald banner shrinks when tabs stick */
#lp-root .lp-intro { transition: padding .25s ease, max-height .25s ease; overflow:hidden; max-height:240px; }
#lp-root .lp-intro h2 { transition: font-size .2s ease; }
#lp-root .lp-intro p  { transition: opacity .2s ease, max-height .2s ease, margin .2s ease; max-height:60px; }
#lp-root .lp-intro.shrink { padding:10px 16px 44px; max-height:72px; }
#lp-root .lp-intro.shrink h2 { font-size:15px; }
#lp-root .lp-intro.shrink p  { opacity:0; max-height:0; margin:0; }

/* Short labels on narrow viewports */
#lp-root .lp-tab .lp-lbl-short { display:none; }
@media (max-width: 380px) {
  #lp-root .lp-tab .lp-lbl-full  { display:none; }
  #lp-root .lp-tab .lp-lbl-short { display:inline; }
  #lp-root .lp-tab { padding:10px 12px; font-size:12.5px; }
}

#lp-root .lp-sources-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
  padding:14px; margin:12px;
}
#lp-root .lp-sources-title {
  font-size:13px; font-weight:700; color:#374151; margin-bottom:10px;
}
#lp-root .lp-sources-grid {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;
}
#lp-root .lp-src-pill {
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:8px 10px; border-radius:12px;
  border:1px solid #e5e7eb; background:#fff; cursor:pointer;
  transition:all .15s ease; user-select:none;
}
#lp-root .lp-src-pill:hover { border-color:#34d399; background:rgba(16,185,129,.05); }
#lp-root .lp-src-pill:has(input:checked) {
  border-color:#10b981; background:#ecfdf5; box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
#lp-root .lp-src-pill input { position:absolute; opacity:0; pointer-events:none; }
#lp-root .lp-src-box {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:6px; border:2px solid #d1d5db;
  background:#fff; flex-shrink:0; transition:all .15s ease;
}
#lp-root .lp-src-box svg { width:14px; height:14px; color:#fff; opacity:0; transition:opacity .15s ease; }
#lp-root .lp-src-pill:has(input:checked) .lp-src-box { background:#059669; border-color:#059669; }
#lp-root .lp-src-pill:has(input:checked) .lp-src-box svg { opacity:1; }
#lp-root .lp-src-lbl { font-size:12px; font-weight:600; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#lp-root .lp-src-pill:has(input:checked) .lp-src-lbl { color:#047857; }

#lp-root .lp-paper-seg-wrap { margin-top:10px; }
#lp-root .lp-seg { display:inline-flex; background:#f3f4f6; border-radius:10px; padding:3px; }
#lp-root .lp-seg.lp-seg-full { display:flex; width:100%; gap:4px; padding:4px; border-radius:12px; }
#lp-root .lp-seg button {
  border:0; background:transparent; padding:7px 12px; font-size:13px; font-weight:600;
  color:#374151; border-radius:8px; min-height:40px; cursor:pointer;
}
#lp-root .lp-seg.lp-seg-full button { flex:1; }
#lp-root .lp-seg button.active { background:#065f46; color:#fff; }

#lp-root .lp-form-tabs {
  display:flex; gap:6px; padding:10px 12px; background:#fff;
  border-bottom:1px solid #eef1f4; position:sticky; top:64px; z-index:17;
}
#lp-root .lp-form-tab {
  flex:1; padding:10px; border-radius:8px; border:1px solid #e5e7eb;
  background:#f9fafb; color:#374151; font-size:13px; font-weight:700;
  cursor:pointer; min-height:40px;
}
#lp-root .lp-form-tab.active { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
#lp-root .lp-form-tabs.lp-sub-chips { top: 64px; }

#lp-root .lp-panel { padding:12px 12px 80px; }

#lp-root .lp-topic-card {
  background:#fff; border-radius:12px; margin-bottom:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.05); overflow:hidden;
}
#lp-root .lp-topic-head {
  display:flex; align-items:center; gap:8px; padding:14px; cursor:pointer; min-height:56px;
}
#lp-root .lp-topic-head .lp-chev { color:#9ca3af; transition:transform .2s; font-size:14px; }
#lp-root .lp-topic-card.open .lp-topic-head .lp-chev { transform: rotate(90deg); }
#lp-root .lp-topic-head .lp-name { flex:1; font-size:14px; font-weight:700; color:#111827; }
#lp-root .lp-topic-head .lp-pill {
  font-size:11px; color:#6b7280; background:#f3f4f6;
  padding:2px 8px; border-radius:99px; margin-left:4px;
}
#lp-root .lp-frac-link {
  font-size:13px; font-weight:700; color:#065f46; background:#ecfdf5;
  padding:6px 10px; border-radius:8px; text-decoration:none;
  border:1px solid #a7f3d0; white-space:nowrap; cursor:pointer;
}
#lp-root .lp-frac-link:active { background:#d1fae5; }

#lp-root .lp-subtopics { display:none; padding: 0 14px 12px; border-top:1px solid #f3f4f6; }
#lp-root .lp-topic-card.open .lp-subtopics { display:block; }

#lp-root .lp-sub-row { padding:10px 0; border-bottom:1px dashed #f3f4f6; }
#lp-root .lp-sub-row:last-child { border:0; }
#lp-root .lp-sub-head { display:flex; align-items:center; gap:8px; }
#lp-root .lp-sub-head .lp-sname { flex:1; font-size:13px; font-weight:600; color:#374151; }
#lp-root .lp-qn-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#lp-root .lp-qn-chip {
  min-width:44px; min-height:32px; padding:4px 10px; border-radius:8px;
  font-size:12px; font-weight:700; display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; border:1px solid transparent;
}
#lp-root .lp-qn-chip.correct { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
#lp-root .lp-qn-chip.wrong   { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
#lp-root .lp-qn-chip.none    { background:#f3f4f6; color:#6b7280; border-color:#e5e7eb; }

/* Detail */
#lp-root .lp-detail { display:none; }
#lp-root .lp-detail.active { display:block; }
#lp-root .lp-detail-head {
  background:#fff; padding:12px 14px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid #eef1f4; position:sticky; top:0; z-index:19;
}
#lp-root .lp-back-btn {
  background:#f3f4f6; border:0; width:36px; height:36px; border-radius:8px;
  font-size:18px; cursor:pointer;
}
#lp-root .lp-detail-head .lp-t { flex:1; }
#lp-root .lp-detail-head h3 { margin:0; font-size:15px; color:#111827; }
#lp-root .lp-detail-head .lp-meta { font-size:11px; color:#6b7280; margin-top:2px; }

#lp-root .lp-stat-tabs {
  display:flex; background:#fff; border-bottom:1px solid #eef1f4;
  position:sticky; top:70px; z-index:18;
}
#lp-root .lp-stat-tab {
  flex:1; padding:12px 6px; border:0; background:transparent;
  font-size:12px; font-weight:700; color:#6b7280; cursor:pointer;
  border-bottom:3px solid transparent; min-height:48px;
}
#lp-root .lp-stat-tab.active { color:#065f46; border-color:#065f46; }
#lp-root .lp-stat-tab .lp-count {
  display:inline-block; margin-left:4px; background:#f3f4f6; color:#374151;
  padding:1px 7px; border-radius:99px; font-size:11px;
}
#lp-root .lp-stat-tab.active .lp-count { background:#065f46; color:#fff; }

#lp-root .lp-attempt-all {
  margin:12px; padding:12px; border-radius:10px; background:#065f46;
  color:#fff; font-weight:700; font-size:13px; text-align:center;
  text-decoration:none; display:block; min-height:44px;
}
#lp-root .lp-attempt-all.mid { background:#b45309; }
#lp-root .lp-attempt-all.low { background:#991b1b; }

#lp-root .lp-qcard {
  background:#fff; margin:8px 12px; border-radius:12px; padding:12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
#lp-root .lp-qcard-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
#lp-root .lp-qtag { font-size:10px; padding:2px 7px; border-radius:99px; background:#f3f4f6; color:#374151; font-weight:600; }
#lp-root .lp-qtag.grade { background:#dbeafe; color:#1e40af; }
#lp-root .lp-qtag.topic { background:#fef3c7; color:#92400e; }
#lp-root .lp-qtag.sub   { background:#e0e7ff; color:#3730a3; }
#lp-root .lp-qcard-body { display:flex; align-items:flex-start; gap:10px; }
#lp-root .lp-qcard-meta { flex:1; }
#lp-root .lp-qcard-title { font-size:13px; font-weight:700; color:#111827; }
#lp-root .lp-qcard-src { font-size:11px; color:#6b7280; margin-top:2px; }
#lp-root .lp-qcard-marks { background:#065f46; color:#fff; font-size:11px; font-weight:700; padding:4px 8px; border-radius:6px; }
#lp-root .lp-qcard-book { background:transparent; border:0; font-size:18px; color:#9ca3af; cursor:pointer; padding:4px; }
#lp-root .lp-qcard-book.saved { color:#f59e0b; }
#lp-root .lp-qcard-history { margin-top:10px; border-top:1px dashed #f3f4f6; padding-top:8px; }
#lp-root .lp-hist-toggle {
  display:flex; align-items:center; gap:6px; width:100%;
  background:transparent; border:0; padding:6px 0; cursor:pointer;
  font-size:11px; font-weight:700; color:#6b7280;
  text-transform:uppercase; letter-spacing:.4px; text-align:left;
}
#lp-root .lp-hist-toggle .lp-hist-chev {
  display:inline-block; transition: transform .2s ease;
  font-size:10px; color:#9ca3af;
}
#lp-root .lp-hist-toggle[aria-expanded="true"] .lp-hist-chev { transform: rotate(90deg); }
#lp-root .lp-hist-toggle .lp-hist-count {
  margin-left:auto; background:#f3f4f6; color:#374151;
  padding:1px 8px; border-radius:99px; font-size:10px;
}
#lp-root .lp-hist-body {
  overflow:hidden; max-height:0; opacity:0;
  transition: max-height .22s ease, opacity .18s ease, margin-top .22s ease;
  margin-top:0;
}
#lp-root .lp-hist-body.open { max-height:400px; opacity:1; margin-top:4px; }
#lp-root .lp-attempt-item { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; }
#lp-root .lp-attempt-item .lp-verdict {
  width:20px; height:20px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:700;
  color:#fff; flex-shrink:0;
}
#lp-root .lp-verdict.ok { background:#10b981; }
#lp-root .lp-verdict.no { background:#ef4444; }
#lp-root .lp-attempt-item .lp-ans { flex:1; color:#374151; font-family: ui-monospace, monospace; }
#lp-root .lp-attempt-item .lp-when { font-size:10px; color:#9ca3af; }
#lp-root .lp-no-history {
  font-size:11px; color:#9ca3af; font-style:italic;
  padding:6px 0; text-transform:none; letter-spacing:0; font-weight:600;
}

/* Tab / panel transitions — mirror question-attempt & side-drawer patterns */
@keyframes lpPanelIn {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}
#lp-root .lp-tab-panel:not(.lp-hidden) { animation: lpPanelIn .2s ease-out; }
#lp-root .lp-detail.active { animation: lpPanelIn .22s ease-out; }
#lp-root #lpQCards.lp-swap { animation: lpPanelIn .18s ease-out; }
#lp-root #lpTopicList.lp-swap { animation: lpPanelIn .18s ease-out; }

/* Animated pill indicator on top tabs (subtle slide of active bg) */
#lp-root .lp-tab, #lp-root .lp-form-tab, #lp-root .lp-seg button, #lp-root .lp-stat-tab {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  #lp-root .lp-tab-panel:not(.lp-hidden),
  #lp-root .lp-detail.active,
  #lp-root #lpQCards.lp-swap,
  #lp-root #lpTopicList.lp-swap { animation:none; }
  #lp-root .lp-hist-body { transition:none; }
}

#lp-root .lp-coming-soon {
  min-height: 50vh;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:600; color:#6b7280;
  padding:40px 20px; text-align:center;
}

#lp-root .lp-hidden { display:none !important; }