/* ═══════════════════════════════════════════════════════════════════════════
   Weblaze Student Portal — refined learning UI
   File: assets/css/portal.css   (loaded after main.css by includes/cdp/portal.php only)
   Everything is scoped to body.portal, so admin, faculty and public pages are untouched.
   Palette: off-white surface, deep charcoal text, one restrained accent (charcoal),
   semantic green (done) / amber (attention) only.
   ═══════════════════════════════════════════════════════════════════════════ */
body.portal{
  --pt-bg:#F6F6F3; --pt-surface:#FFFFFF; --pt-ink:#1C1D21; --pt-ink-2:#3F434A; --pt-muted:#6B7078;
  --pt-line:#E6E5E0; --pt-line-2:#D6D5CF; --pt-soft:#F1F0EC; --pt-done:#17703C; --pt-done-bg:#EEF7F1;
  --pt-warn:#9A5B00; --pt-warn-bg:#FFF7E8; --pt-radius:14px;
  background:var(--pt-bg);color:var(--pt-ink)
}
body.portal .admin-sidebar{background:var(--pt-surface);border-right-color:var(--pt-line)}
body.portal .admin-main{padding:var(--sp-8) var(--sp-8) var(--sp-16)}
body.portal .portal-content{max-width:1080px;margin:0 auto}
body.portal .admin-page-header{margin-bottom:var(--sp-6)}
body.portal .admin-page-title{color:var(--pt-ink);font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:-0.02em;line-height:1.25}
body.portal .admin-page-sub{color:var(--pt-muted)}
body.portal .admin-section-card{border-color:var(--pt-line);border-radius:var(--pt-radius);box-shadow:0 1px 2px rgba(28,29,33,.04)}
body.portal .admin-section-card-header{border-bottom-color:var(--pt-line)}
body.portal .admin-section-title{color:var(--pt-ink)}
body.portal .admin-crumbs{margin-bottom:var(--sp-4)}
body.portal .admin-progress{background:var(--pt-soft)}
body.portal .admin-progress>span{background:var(--pt-ink)}
body.portal .app-items li{border-bottom-color:var(--pt-line)}
body.portal :focus-visible{outline:2px solid var(--pt-ink);outline-offset:2px}
body.portal-auth{background:var(--pt-bg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Shared: status pills + item rows ──────────────────────────────────────── */
.pt-pill{display:inline-flex;align-items:center;gap:6px;font-size:0.74rem;font-weight:600;line-height:1;padding:6px 10px;border-radius:999px;border:1px solid var(--pt-line-2);color:var(--pt-ink-2);background:var(--pt-surface);white-space:nowrap}
.pt-pill--done{color:var(--pt-done);background:var(--pt-done-bg);border-color:#CFE7D8}
.pt-pill--now{color:#fff;background:var(--pt-ink);border-color:var(--pt-ink)}
.pt-pill--warn{color:var(--pt-warn);background:var(--pt-warn-bg);border-color:#F3DFB5}
.pt-pill--locked,.pt-pill--soon{color:var(--pt-muted);background:var(--pt-soft);border-color:var(--pt-line)}
.pt-kicker{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--pt-muted)}
.pt-list{list-style:none;margin:0;padding:0}
.pt-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;padding:14px var(--sp-6);border-bottom:1px solid var(--pt-line);text-decoration:none;color:inherit}
.pt-list>li:last-child>.pt-row,.pt-list>li:last-child.pt-row{border-bottom:none}
a.pt-row:hover{background:#FBFBF9;color:inherit}
.pt-row-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--pt-soft);color:var(--pt-ink-2);flex-shrink:0}
.pt-row--done .pt-row-icon{background:var(--pt-done-bg);color:var(--pt-done)}
.pt-row-title{display:block;font-weight:600;color:var(--pt-ink);line-height:1.35;overflow-wrap:anywhere}
.pt-row-meta{display:block;font-size:0.8rem;color:var(--pt-muted);margin-top:2px;overflow-wrap:anywhere}
.pt-group-label{padding:var(--sp-4) var(--sp-6) 6px;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--pt-muted);background:#FBFBF9;border-bottom:1px solid var(--pt-line)}
.pt-empty{padding:var(--sp-10) var(--sp-6);text-align:center;color:var(--pt-muted)}
.pt-empty h2,.pt-empty h3{color:var(--pt-ink);font-size:1.05rem;margin:var(--sp-3) 0 var(--sp-2)}
.pt-empty p{max-width:520px;margin:0 auto;font-size:0.9rem;line-height:1.65}
.pt-empty-icon{width:48px;height:48px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;background:var(--pt-soft);color:var(--pt-ink-2)}
.pt-note{margin:0;padding:12px var(--sp-6);font-size:0.84rem;color:var(--pt-ink-2);background:#FBFBF9;border-top:1px solid var(--pt-line)}

/* ── Dashboard ──────────────────────────────────────────────────────────────── */
.pd-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6);align-items:center;padding:var(--sp-8);background:var(--pt-ink);color:#fff;border-radius:var(--pt-radius);margin-bottom:var(--sp-6)}
.pd-hero .pt-kicker{color:rgba(255,255,255,.62)}
.pd-hero-title{font-family:var(--font-head);font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:700;line-height:1.3;margin:6px 0;color:#fff;overflow-wrap:anywhere}
.pd-hero-meta{font-size:0.86rem;color:rgba(255,255,255,.72)}
.pd-hero .btn{background:#fff;color:var(--pt-ink);border-color:#fff}
.pd-hero .btn:hover{background:#EDEDEA;color:var(--pt-ink)}
.pd-course{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:0}
.pd-course-main{padding:var(--sp-6);min-width:0}
.pd-course-side{padding:var(--sp-6);border-left:1px solid var(--pt-line);background:#FBFBF9}
.pd-percent{font-family:var(--font-head);font-size:2.2rem;font-weight:800;letter-spacing:-0.03em;line-height:1;color:var(--pt-ink)}
.pd-stats{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.pd-stats li{border:1px solid var(--pt-line);border-radius:10px;padding:10px 12px;font-size:0.78rem;color:var(--pt-muted);background:var(--pt-surface)}
.pd-stats strong{display:block;font-size:1.05rem;color:var(--pt-ink)}
.pd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sp-5)}
.pd-side-block+.pd-side-block{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--pt-line)}
.pd-side-title{font-weight:600;color:var(--pt-ink);font-size:0.92rem;margin:4px 0 2px;line-height:1.35;overflow-wrap:anywhere}
.pd-side-meta{font-size:0.8rem;color:var(--pt-muted);line-height:1.5}
.pd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.pd-grid>.admin-section-card{margin-bottom:0}

/* ── Curriculum (module accordion) ─────────────────────────────────────────── */
.cur-head{display:flex;gap:var(--sp-6);align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.cur-progress{min-width:240px;flex:0 1 320px}
.cur-progress-row{display:flex;justify-content:space-between;font-size:0.82rem;color:var(--pt-muted);margin-bottom:6px}
.cur-progress-row strong{color:var(--pt-ink)}
.cur-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.cur-module{background:var(--pt-surface);border:1px solid var(--pt-line);border-radius:var(--pt-radius);overflow:hidden}
.cur-module--current{border-color:var(--pt-ink);box-shadow:0 0 0 1px var(--pt-ink)}
.cur-module>details>summary{list-style:none;cursor:pointer}
.cur-module>details>summary::-webkit-details-marker{display:none}
.cur-sum{display:grid;grid-template-columns:44px minmax(0,1fr) auto 20px;gap:var(--sp-4);align-items:center;padding:var(--sp-5) var(--sp-6)}
.cur-num{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;background:var(--pt-soft);color:var(--pt-ink)}
.cur-module--completed .cur-num{background:var(--pt-done-bg);color:var(--pt-done)}
.cur-module--current .cur-num{background:var(--pt-ink);color:#fff}
.cur-module--locked .cur-num{color:var(--pt-muted)}
.cur-title{display:block;font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--pt-ink);line-height:1.3;margin:2px 0;overflow-wrap:anywhere}
.cur-meta{display:block;font-size:0.8rem;color:var(--pt-muted)}
.cur-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:120px}
.cur-side .admin-progress{width:120px}
.cur-chevron{color:var(--pt-muted);transition:transform .2s var(--ease)}
details[open]>summary .cur-chevron{transform:rotate(180deg)}
.cur-body{border-top:1px solid var(--pt-line)}
.cur-body-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px var(--sp-6);background:#FBFBF9;border-top:1px solid var(--pt-line);font-size:0.84rem;color:var(--pt-muted)}

/* ── Module (week) page ────────────────────────────────────────────────────── */
.wk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:var(--sp-6);align-items:start;margin-bottom:var(--sp-6)}
.wk-head>*{min-width:0}
.wk-progress .btn{white-space:normal;text-align:center;overflow-wrap:anywhere}
.wk-progress{background:var(--pt-surface);border:1px solid var(--pt-line);border-radius:var(--pt-radius);padding:var(--sp-5)}
.wk-progress .cur-progress-row{margin-bottom:8px}
.wk-summary{max-width:72ch}
.wk-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:var(--sp-8)}

/* ── Lesson reading ───────────────────────────────────────────────────────── */
body.portal .lesson-layout{grid-template-columns:minmax(0,1fr) 270px;gap:var(--sp-8)}
body.portal .lesson-article .admin-section-body{padding:clamp(20px,4vw,48px)}
body.portal .lesson-article .rich{max-width:70ch;font-size:1.02rem;line-height:1.8;color:var(--pt-ink-2)}
body.portal .lesson-article .rich h2{font-size:1.32rem;color:var(--pt-ink);padding-top:var(--sp-2)}
body.portal .lesson-article .rich h3{color:var(--pt-ink)}
body.portal .lesson-article .rich .rich-code,body.portal .lesson-article .rich .rich-table{max-width:100%}
body.portal .lesson-outline{border-color:var(--pt-line);border-radius:var(--pt-radius);top:var(--sp-8);max-height:calc(100vh - 64px);overflow:auto}
body.portal .lesson-outline li a[aria-current="page"]{background:var(--pt-ink)}
.ls-progress{display:flex;align-items:center;gap:10px;font-size:0.8rem;color:var(--pt-muted);margin-bottom:var(--sp-3)}
.ls-progress .admin-progress{flex:1}
.ls-complete{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-5) var(--sp-6);background:var(--pt-surface);border:1px solid var(--pt-line);border-radius:var(--pt-radius);margin-bottom:var(--sp-6)}
.ls-complete--done{background:var(--pt-done-bg);border-color:#CFE7D8}
.ls-complete-text{font-size:0.9rem;color:var(--pt-ink-2)}
.ls-complete-text strong{display:block;color:var(--pt-ink);font-size:0.98rem}
.ls-pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.ls-pager a{display:block;padding:var(--sp-4) var(--sp-5);border:1px solid var(--pt-line);border-radius:var(--pt-radius);background:var(--pt-surface);text-decoration:none;color:inherit;min-width:0}
.ls-pager a:hover{border-color:var(--pt-line-2);box-shadow:0 2px 10px rgba(28,29,33,.05)}
.ls-pager .ls-next{text-align:right;grid-column:2}
.ls-pager .pt-row-title{font-size:0.92rem}

/* ── Quiz ─────────────────────────────────────────────────────────────────── */
.qz-facts{list-style:none;margin:0 0 var(--sp-6);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.qz-facts li{border:1px solid var(--pt-line);border-radius:10px;padding:12px 14px;font-size:0.78rem;color:var(--pt-muted);background:#FBFBF9}
.qz-facts strong{display:block;font-size:1.05rem;color:var(--pt-ink);margin-bottom:2px}
.qz-rules{margin:0 0 var(--sp-6);padding-left:1.2em;font-size:0.9rem;line-height:1.7;color:var(--pt-ink-2)}
.qz-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:var(--sp-6);align-items:start}
.qz-layout>*{min-width:0}
.qz-panel{position:sticky;top:var(--sp-8);background:var(--pt-surface);border:1px solid var(--pt-line);border-radius:var(--pt-radius);padding:var(--sp-5)}
.qz-panel-count{font-size:0.84rem;color:var(--pt-ink-2);margin:6px 0 10px}
.qz-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:var(--sp-4) 0}
.qz-grid a{display:flex;align-items:center;justify-content:center;height:34px;border-radius:8px;border:1px solid var(--pt-line-2);font-size:0.8rem;font-weight:600;color:var(--pt-ink-2);text-decoration:none;background:var(--pt-surface)}
.qz-grid a.is-answered{background:var(--pt-ink);border-color:var(--pt-ink);color:#fff}
.qz-grid a:hover{border-color:var(--pt-ink)}
body.portal .quiz-question{border-color:var(--pt-line);border-radius:var(--pt-radius);padding:var(--sp-6);scroll-margin-top:var(--sp-8)}
body.portal .quiz-option{border-color:var(--pt-line);padding:12px 14px;min-height:44px;align-items:center}
body.portal .quiz-option input{margin-top:0;width:18px;height:18px}
body.portal .quiz-option:has(input:checked){border-color:var(--pt-ink);background:#F7F7F4;box-shadow:inset 0 0 0 1px var(--pt-ink)}
.qz-qtype{display:inline-block;font-size:0.72rem;font-weight:600;color:var(--pt-ink-2);background:var(--pt-soft);border-radius:999px;padding:3px 10px;margin-left:6px}
.qz-submitbar{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-5) var(--sp-6);background:var(--pt-surface);border:1px solid var(--pt-line);border-radius:var(--pt-radius)}
.qz-result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-6);align-items:center;padding:var(--sp-6)}
.qz-score{width:110px;height:110px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:6px solid var(--pt-soft);font-family:var(--font-head)}
.qz-score strong{font-size:1.6rem;line-height:1;color:var(--pt-ink)}
.qz-score span{font-size:0.72rem;color:var(--pt-muted);margin-top:4px}
.qz-score--pass{border-color:#CFE7D8}
.qz-score--fail{border-color:#F3DFB5}
.qz-dialog{margin:auto;inset:0;border:none;border-radius:var(--pt-radius);padding:0;max-width:440px;width:calc(100% - 32px);box-shadow:0 24px 64px rgba(0,0,0,.22);color:var(--pt-ink)}
.qz-dialog::backdrop{background:rgba(28,29,33,.45)}
.qz-dialog-body{padding:var(--sp-6)}
.qz-dialog h2{font-size:1.15rem;margin:0 0 var(--sp-3)}
.qz-dialog p{font-size:0.9rem;line-height:1.6;color:var(--pt-ink-2);margin:0 0 var(--sp-3)}
.qz-dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:var(--sp-4) var(--sp-6);background:#FBFBF9;border-top:1px solid var(--pt-line)}
.qz-unanswered{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--sp-3);padding:0;list-style:none}
.qz-unanswered a{font-size:0.78rem;font-weight:600;border:1px solid var(--pt-line-2);border-radius:999px;padding:3px 10px;text-decoration:none;color:var(--pt-ink)}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  body.portal .lesson-layout{grid-template-columns:minmax(0,1fr)}
  body.portal .lesson-outline{position:static;max-height:none}
}
@media(max-width:960px){
  .pd-course{grid-template-columns:1fr}
  .pd-course-side{border-left:none;border-top:1px solid var(--pt-line)}
  .wk-head{grid-template-columns:minmax(0,1fr)}
  .qz-layout{grid-template-columns:1fr}
  .qz-panel{position:static;order:-1}
  .qz-grid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}
}
@media(max-width:900px){
  body.portal .admin-main{padding:var(--sp-5) var(--sp-4) var(--sp-12);max-width:100%;margin-left:0}
}
@media(max-width:720px){
  .pd-hero{grid-template-columns:1fr;padding:var(--sp-6)}
  .pd-grid{grid-template-columns:1fr}
  .pd-stats{grid-template-columns:1fr 1fr 1fr}
  .pt-row{grid-template-columns:32px minmax(0,1fr);padding:12px var(--sp-4)}
  .pt-row>.pt-pill,.pt-row>.pt-row-side{grid-column:2;justify-self:start}
  .pt-row-icon{width:32px;height:32px}
  .cur-sum{grid-template-columns:36px minmax(0,1fr) 18px;padding:var(--sp-4)}
  .cur-num{width:36px;height:36px;border-radius:10px;font-size:0.9rem}
  .cur-side{grid-column:2;grid-row:2;align-items:flex-start;min-width:0}
  .cur-chevron{grid-column:3;grid-row:1}
  .pt-group-label,.pt-note,.cur-body-foot{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .ls-pager{grid-template-columns:1fr}
  .ls-pager .ls-next{grid-column:1}
  .qz-result{grid-template-columns:1fr;justify-items:start}
}
@media(prefers-reduced-motion:reduce){.cur-chevron{transition:none}}