/* SchoolEP V230.75 — ONE Middle Pioneer visual authority.
   General Middle styling stays in the normal Middle stylesheets.
   This file owns ONLY the Pioneer visual delta for L2/L3/L4.

   Light Pioneer:
     main      #ffd003
     deep      #cad000
   Dark Pioneer:
     bright    #f7ff06
     deep      #cad000
*/

:root{
  --mp-yellow:#ffd003;
  --mp-yellow-deep:#cad000;
  --mp-yellow-bright:#f7ff06;
  --mp-yellow-ink:#665500;
  --mp-yellow-soft:#fff7b8;
  --mp-yellow-softer:#fffbed;
  --mp-dark-surface:#101827;
  --mp-dark-surface-2:#172033;
  --mp-dark-border:#596300;
  --mp-dark-text:#f8fafc;
  --mp-dark-muted:#cbd5e1;
}

/* Path visibility */
html[data-middle-path="general"] [data-middle-path-grid="pioneer"],
html[data-middle-path="pioneer"] [data-middle-path-grid="general"]{
  display:none;
}

/* ---------------------------------------------------------------
   L2 — path selector + Pioneer hero/cards
   --------------------------------------------------------------- */
.middle-track-selector{
  display:flex;
  gap:12px;
  align-items:stretch;
  margin:18px 0 20px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.middle-track-choice{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:52px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:var(--surface,#fff);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease;
}
.middle-track-choice .track-icon{
  width:31px;
  height:31px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.middle-track-choice[data-path="general"] .track-icon{
  background:#f97316;
}
.middle-track-choice[data-path="pioneer"] .track-icon{
  background:linear-gradient(135deg,#ffe86a,var(--mp-yellow));
  color:#3d3400;
}
html[data-middle-path="general"] .middle-track-choice[data-path="general"]{
  background:#fff7ed;
  border-color:#f97316;
  color:#c2410c;
}
html[data-middle-path="pioneer"] .middle-track-choice[data-path="pioneer"]{
  background:linear-gradient(135deg,#fff9cf,#fff0a0);
  border-color:var(--mp-yellow);
  color:#6b5900;
  box-shadow:0 5px 17px rgba(202,208,0,.15);
}
html[data-middle-path="pioneer"] .middle-track-choice[data-path="general"]{
  background:color-mix(in srgb,var(--surface,#fff) 96%,#f8fafc);
  border-color:#d8dee8;
  color:#7c4a25;
  box-shadow:none;
}

html[data-middle-path="pioneer"] .content-area{
  --m1-accent:var(--mp-yellow);
  --m1-accent-300:#ffe66b;
  --m1-accent-600:#8a7000;
  --accent:var(--mp-yellow);
  --accent-600:#8a7000;
  --accent-300:#ffe66b;
  --accent-rgb:255, 208, 3;
  --accent-600-rgb:138, 112, 0;
  --accent-300-rgb:255, 230, 107;
}

html[data-middle-path="pioneer"] .content-area .sp-hero{
  position:relative;
  border-color:var(--mp-yellow);
  background:linear-gradient(135deg,#fff8bf 0%,var(--mp-yellow) 100%);
  box-shadow:0 5px 16px rgba(202,208,0,.18);
}
html[data-middle-path="pioneer"] .content-area .sp-hero h2,
html[data-middle-path="pioneer"] .content-area .sp-hero p,
html[data-middle-path="pioneer"] .content-area .sp-hero p strong{
  color:#342c00;
  text-shadow:none;
}

html[data-middle-path="pioneer"] .middle-pioneer-grid .subject-card{
  position:relative;
  border-color:color-mix(in srgb,var(--mp-yellow) 58%,#d8dee8);
  background:linear-gradient(145deg,#fffef5,#fff7c8);
  box-shadow:0 5px 15px rgba(202,208,0,.10);
}
html[data-middle-path="pioneer"] .middle-pioneer-grid .subject-card::before{
  background:var(--mp-yellow);
}
html[data-middle-path="pioneer"] .middle-pioneer-grid .subject-card::after{
  background:linear-gradient(90deg,#ffe66b,var(--mp-yellow),var(--mp-yellow-deep));
}
html[data-middle-path="pioneer"] .middle-pioneer-grid .subject-card:hover,
html[data-middle-path="pioneer"] .middle-pioneer-grid .subject-card:focus-visible{
  border-color:var(--mp-yellow);
  background:linear-gradient(145deg,#fffdf0,#fff2a0);
  box-shadow:0 9px 24px rgba(202,208,0,.20);
}
html[data-middle-path="pioneer"] .middle-pioneer-grid .subj-icon{
  background:linear-gradient(135deg,#ffe66b,var(--mp-yellow));
  color:#3d3400;
  box-shadow:0 7px 17px rgba(202,208,0,.20);
}

/* ---------------------------------------------------------------
   L3 — same native Middle structure, yellow Pioneer visual identity
   --------------------------------------------------------------- */
html[data-middle-pioneer-l3="1"] .content-area{
  --accent:var(--mp-yellow);
  --accent-600:#8a7000;
  --accent-300:#ffe66b;
  --accent-rgb:255, 208, 3;
  --accent-600-rgb:138, 112, 0;
  --accent-300-rgb:255, 230, 107;
  overflow-anchor:none;
}

html[data-middle-pioneer-l3="1"] .content-area .sp-hero{
  position:relative;
  border-color:var(--mp-yellow);
  background:linear-gradient(145deg,#fffef2,#fff5ad);
  box-shadow:0 5px 16px rgba(202,208,0,.12);
}
html[data-middle-pioneer-l3="1"] #breadcrumbs{
  --schoolep-bc-current:#8a7000;
}
html[data-middle-pioneer-l3="1"] #breadcrumbs .middle-pioneer-breadcrumb{
  color:inherit;
  background:transparent;
  border:0;
  box-shadow:none;
}
html[data-middle-pioneer-l3="1"] #breadcrumbs .middle-pioneer-breadcrumb:hover,
html[data-middle-pioneer-l3="1"] #breadcrumbs .middle-pioneer-breadcrumb:focus-visible{
  color:#8a7000;
}

html[data-middle-pioneer-l3="1"] .content-area .term-card,
html[data-middle-pioneer-l3="1"] .content-area .terms-wrap,
html[data-middle-pioneer-l3="1"] .content-area .lessons-stack,
html[data-middle-pioneer-l3="1"] .content-area #program,
html[data-middle-pioneer-l3="1"] .content-area #supervised{
  background:transparent;
  box-shadow:none;
}
html[data-middle-pioneer-l3="1"] .content-area .term-card{
  border:0;
}
html[data-middle-pioneer-l3="1"] .content-area .lesson-block,
html[data-middle-pioneer-l3="1"] .content-area .supervised-card{
  border-color:color-mix(in srgb,var(--mp-yellow) 52%,#d8dee8);
  background:var(--surface,#fff);
  content-visibility:visible;
  contain:none;
}
html[data-middle-pioneer-l3="1"] .content-area .lesson-block:hover,
html[data-middle-pioneer-l3="1"] .content-area .supervised-card:hover{
  border-color:var(--mp-yellow);
  box-shadow:0 7px 18px rgba(202,208,0,.14);
}
html[data-middle-pioneer-l3="1"].schoolep-level3-accordion-restoring .lesson-block,
html[data-middle-pioneer-l3="1"].schoolep-level3-accordion-restoring .res-panel{
  transition:none;
  animation:none;
}

/* Marker position remains owned by level3-resource-pins.css.
   Middle Pioneer supplies color/glow variables only. */
html[data-middle-pioneer-l3="1"]{
  --opened-dot-color:var(--mp-yellow);
  --opened-dot-shadow:none;
  --opened-dot-last-shadow:0 0 0 2px rgba(255,208,3,.18);
}

/* ---------------------------------------------------------------
   L4 — Viewer / Quizzer / Videos
   All resource accent variables become Pioneer yellow.
   --------------------------------------------------------------- */
html[data-middle-pioneer-l4="1"]{
  --accent:var(--mp-yellow);
  --accent-600:#8a7000;
  --resource-accent:var(--mp-yellow);
  --resource-accent-600:#8a7000;
  --resource-accent-dark:var(--mp-yellow-deep);
  --resource-accent-rgb:255 208 3;
  --resource-accent-dark-rgb:202 208 0;
}
html[data-middle-pioneer-l4="1"] .content-area{
  --accent:var(--mp-yellow);
  --accent-600:#8a7000;
  --resource-accent:var(--mp-yellow);
  --resource-accent-600:#8a7000;
  --resource-accent-dark:var(--mp-yellow-deep);
  --resource-accent-rgb:255 208 3;
  --resource-accent-dark-rgb:202 208 0;
}

/* Hero */
html[data-middle-pioneer-l4="1"] .content-area .viewer-hero,
html[data-middle-pioneer-l4="1"] .content-area .video-head{
  border-color:var(--mp-yellow);
  background:
    linear-gradient(135deg,rgba(255,208,3,.18) 0%,rgba(255,208,3,.055) 100%),
    var(--surface,#fff);
  box-shadow:0 5px 16px rgba(202,208,0,.12);
}
html[data-middle-pioneer-l4="1"] .content-area .viewer-hero-item{
  border-color:rgba(202,208,0,.58);
  background:rgba(255,208,3,.13);
  color:#8a7000;
}

/* Viewer/PDF/image cards */
html[data-middle-pioneer-l4="1"] .viewer-container .panel,
html[data-middle-pioneer-l4="1"] .quiz-container,
html[data-middle-pioneer-l4="1"] .video-shell{
  border-color:color-mix(in srgb,var(--mp-yellow) 46%,#d8dee8);
  background:var(--surface,#fff);
}
html[data-middle-pioneer-l4="1"] .viewer-container .panel header,
html[data-middle-pioneer-l4="1"] .quiz-container header,
html[data-middle-pioneer-l4="1"] .video-shell header{
  background:rgba(255,208,3,.09);
  border-bottom-color:color-mix(in srgb,var(--mp-yellow) 36%,#d8dee8);
}
html[data-middle-pioneer-l4="1"] .viewer-container .panel header h2 i,
html[data-middle-pioneer-l4="1"] .viewer-container .panel header h2 .panel-pdf-icon{
  color:#8a7000;
}
html[data-middle-pioneer-l4="1"] .pdf-viewer,
html[data-middle-pioneer-l4="1"] .gallery,
html[data-middle-pioneer-l4="1"] .video-stage{
  border-color:color-mix(in srgb,var(--mp-yellow) 38%,#d8dee8);
  background:color-mix(in srgb,var(--mp-yellow) 4%,var(--surface,#fff));
}

/* Viewer controls/buttons */
html[data-middle-pioneer-l4="1"] .content-area .toolbar .btn,
html[data-middle-pioneer-l4="1"] .viewer-container .wb-fab,
html[data-middle-pioneer-l4="1"] .viewer-container .r-btn,
html[data-middle-pioneer-l4="1"] .viewer-container button,
html[data-middle-pioneer-l4="1"] .quiz-container button,
html[data-middle-pioneer-l4="1"] .video-shell button{
  border-color:color-mix(in srgb,var(--mp-yellow) 52%,#d8dee8);
}
html[data-middle-pioneer-l4="1"] .content-area .toolbar .btn:hover,
html[data-middle-pioneer-l4="1"] .viewer-container .wb-fab:hover,
html[data-middle-pioneer-l4="1"] .viewer-container .r-btn:hover,
html[data-middle-pioneer-l4="1"] .viewer-container button:hover,
html[data-middle-pioneer-l4="1"] .quiz-container button:hover,
html[data-middle-pioneer-l4="1"] .video-shell button:hover{
  border-color:var(--mp-yellow);
  color:#8a7000;
  box-shadow:0 0 0 2px rgba(255,208,3,.12);
}

/* V230.77 — Pioneer Viewer file actions.
   Strong active PDF action; unavailable Word/PPT remain readable, not faded. */
html[data-middle-pioneer-l4="1"] #pdfPanel > .toolbar,
html[data-middle-pioneer-l4="1"] #otherFormatsPanel > .toolbar{
  background:rgba(255,208,3,.045);
  border-top-color:rgba(202,208,0,.34);
}
html[data-middle-pioneer-l4="1"] #downloadBtn{
  background:#ffd003;
  border-color:#cad000;
  color:#3c3300;
  box-shadow:0 4px 14px rgba(202,208,0,.18);
  opacity:1;
}
html[data-middle-pioneer-l4="1"] #downloadBtn:hover{
  background:#f0c600;
  border-color:#b8bd00;
  color:#302900;
  box-shadow:0 6px 18px rgba(202,208,0,.24);
}
html[data-middle-pioneer-l4="1"] #otherFormatsPanel .btn.is-unavailable,
html[data-middle-pioneer-l4="1"] #otherFormatsPanel .btn.is-unavailable:hover{
  opacity:1;
  background:#fffef4;
  border-color:#d7d98a;
  color:#64748b;
  box-shadow:none;
}
html[data-middle-pioneer-l4="1"] #otherFormatsPanel header h2 i{
  color:#8a7000;
}

/* Pioneer breadcrumb node remains native; yellow appears only on hover/current. */
html[data-middle-pioneer-l4="1"] #l4bc-track{
  color:inherit;
  background:transparent;
  border:0;
  box-shadow:none;
}
html[data-middle-pioneer-l4="1"] #l4bc-track:hover,
html[data-middle-pioneer-l4="1"] #l4bc-track:focus-visible,
html[data-middle-pioneer-l4="1"] #l4bc-current{
  color:#8a7000;
}

/* ---------------------------------------------------------------
   Sidebar/footer Pioneer link tag
   --------------------------------------------------------------- */
.middle-pioneer-shell-link{position:relative}
.middle-pioneer-shell-banner{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-inline-start:6px;
  padding:2px 6px;
  min-height:18px;
  border:1px solid var(--mp-yellow-deep);
  border-radius:2px 0 2px 0;
  background:#fff3a4;
  color:#665500;
  font-size:.66rem;
  font-weight:900;
  line-height:1;
  vertical-align:middle;
}
.middle-pioneer-shell-banner i{
  color:#8a7000;
  font-size:.62rem;
}
.middle-pioneer-shell-link.is-current-pioneer-subject{
  color:#8a7000;
}
.middle-pioneer-shell-link.is-current-pioneer-subject .middle-pioneer-shell-banner{
  background:var(--mp-yellow);
  color:#332b00;
}

/* ---------------------------------------------------------------
   DARK MODE — V230.77 single Middle authority
   --------------------------------------------------------------- */

/* L2 path chooser: dark for BOTH General and Pioneer. */
html.dark-mode[data-middle-path] .middle-track-selector,
html[data-middle-path] body.dark-mode .middle-track-selector{
  background:transparent;
  border:0;
  box-shadow:none;
}
html.dark-mode[data-middle-path] .middle-track-choice,
html[data-middle-path] body.dark-mode .middle-track-choice{
  background:#172033;
  border-color:#374151;
  color:#e5e7eb;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
html.dark-mode[data-middle-path="general"] .middle-track-choice[data-path="general"],
html[data-middle-path="general"] body.dark-mode .middle-track-choice[data-path="general"]{
  background:#26180d;
  border-color:#f97316;
  color:#fdba74;
}
html.dark-mode[data-middle-path="general"] .middle-track-choice[data-path="pioneer"],
html[data-middle-path="general"] body.dark-mode .middle-track-choice[data-path="pioneer"]{
  background:#172033;
  border-color:#4b5563;
  color:#d1d5db;
}
html.dark-mode[data-middle-path="pioneer"] .middle-track-choice[data-path="pioneer"],
html[data-middle-path="pioneer"] body.dark-mode .middle-track-choice[data-path="pioneer"]{
  background:#202600;
  border-color:#cad000;
  color:#f7ff06;
}
html.dark-mode[data-middle-path="pioneer"] .middle-track-choice[data-path="general"],
html[data-middle-path="pioneer"] body.dark-mode .middle-track-choice[data-path="general"]{
  background:#172033;
  border-color:#4b5563;
  color:#fdba74;
}

/* L2 Pioneer hero: text/icon must remain readable in dark mode. */
html.dark-mode[data-middle-path="pioneer"] .content-area .sp-hero,
html[data-middle-path="pioneer"] body.dark-mode .content-area .sp-hero{
  background:linear-gradient(145deg,#101827,#172033);
  border-color:#cad000;
  box-shadow:0 0 0 1px rgba(202,208,0,.10),0 7px 20px rgba(0,0,0,.30);
}
html.dark-mode[data-middle-path="pioneer"] .content-area .sp-hero h2,
html.dark-mode[data-middle-path="pioneer"] .content-area .sp-hero h2 span,
html[data-middle-path="pioneer"] body.dark-mode .content-area .sp-hero h2,
html[data-middle-path="pioneer"] body.dark-mode .content-area .sp-hero h2 span,
html.dark-mode[data-middle-path="pioneer"] .content-area .sp-hero h2 i,
html[data-middle-path="pioneer"] body.dark-mode .content-area .sp-hero h2 i{
  color:#f8fafc;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
html.dark-mode[data-middle-path="pioneer"] .content-area .sp-hero p,
html.dark-mode[data-middle-path="pioneer"] .content-area .sp-hero p span,
html[data-middle-path="pioneer"] body.dark-mode .content-area .sp-hero p,
html[data-middle-path="pioneer"] body.dark-mode .content-area .sp-hero p span{
  color:#d7e0ec;
}
html.dark-mode[data-middle-path="pioneer"] .content-area .sp-hero p strong,
html[data-middle-path="pioneer"] body.dark-mode .content-area .sp-hero p strong{
  color:#f8fafc;
}
html.dark-mode[data-middle-path="pioneer"] .middle-pioneer-grid .subject-card,
html[data-middle-path="pioneer"] body.dark-mode .middle-pioneer-grid .subject-card{
  background:#111827;
  border-color:#596300;
  color:#f8fafc;
  box-shadow:0 4px 13px rgba(0,0,0,.28);
}
html.dark-mode[data-middle-path="pioneer"] .middle-pioneer-grid .subject-card::before,
html[data-middle-path="pioneer"] body.dark-mode .middle-pioneer-grid .subject-card::before{
  background:#cad000;
}
html.dark-mode[data-middle-path="pioneer"] .middle-pioneer-grid .subject-card::after,
html[data-middle-path="pioneer"] body.dark-mode .middle-pioneer-grid .subject-card::after{
  background:linear-gradient(90deg,#cad000,#f7ff06,#cad000);
}
html.dark-mode[data-middle-path="pioneer"] .middle-pioneer-grid .subj-title,
html[data-middle-path="pioneer"] body.dark-mode .middle-pioneer-grid .subj-title{color:#f8fafc}
html.dark-mode[data-middle-path="pioneer"] .middle-pioneer-grid .subj-desc,
html[data-middle-path="pioneer"] body.dark-mode .middle-pioneer-grid .subj-desc{color:#cbd5e1}

/* L3 Pioneer — neutral dark, yellow only as accent. */
html.dark-mode[data-middle-pioneer-l3="1"] .content-area,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area{
  --accent:#f7ff06;
  --accent-600:#cad000;
  --accent-300:#f7ff06;
  --accent-rgb:247, 255, 6;
  --accent-600-rgb:202, 208, 0;
  --accent-300-rgb:247, 255, 6;
  --surface:#111827;
  --surface-2:#172033;
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero{
  background:linear-gradient(145deg,#101827,#172033);
  border-color:#cad000;
  box-shadow:0 0 0 1px rgba(202,208,0,.10),0 7px 20px rgba(0,0,0,.30);
}
/* Own the real hero IDs so subject-hero.css cannot darken Pioneer copy. */
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero[data-schoolep-hero-art="v110"] #page-title,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero[data-schoolep-hero-art="v110"] #page-title,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero #page-title,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero #page-title{
  color:#f8fafc;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero[data-schoolep-hero-art="v110"] #hero-desc,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero[data-schoolep-hero-art="v110"] #hero-desc,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero #hero-desc,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero #hero-desc{
  color:#d7e0ec;
  text-shadow:none;
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero #hero-desc strong,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero #hero-desc strong{color:#f8fafc}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .hero-inline-btn,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .hero-inline-btn{
  color:#f7ff06;
  border-color:#cad000;
  background:rgba(202,208,0,.055);
  box-shadow:none;
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .term-card,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .terms-wrap,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .lessons-stack,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area #program,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area #supervised,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .term-card,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .terms-wrap,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .lessons-stack,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area #program,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area #supervised{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .lesson-block,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .supervised-card,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .lesson-block,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .supervised-card{
  background:#111827;
  border-color:#596300;
  color:#f8fafc;
  box-shadow:0 4px 12px rgba(0,0,0,.24);
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .lesson-block .title-text,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .supervised-card .supervised-label,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .term-title,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .lesson-block .title-text,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .supervised-card .supervised-label,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .term-title{color:#f8fafc}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .lesson-links .res-toggle,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .exam-toggle-btn,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .supervised-toggle-btn,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .lesson-links .res-toggle,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .exam-toggle-btn,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .supervised-toggle-btn{
  color:#e5e7eb;
  background:#172033;
  border-color:#4c5566;
}
html.dark-mode[data-middle-pioneer-l3="1"],
html[data-middle-pioneer-l3="1"] body.dark-mode{
  --opened-dot-color:#f7ff06;
  --opened-dot-shadow:0 0 8px rgba(247,255,6,.55);
  --opened-dot-last-shadow:0 0 0 2px rgba(202,208,0,.26),0 0 10px rgba(247,255,6,.76);
}

/* L4 Pioneer */
html.dark-mode[data-middle-pioneer-l4="1"],
html[data-middle-pioneer-l4="1"] body.dark-mode{
  --accent:#f7ff06;
  --accent-600:#cad000;
  --resource-accent:#f7ff06;
  --resource-accent-600:#cad000;
  --resource-accent-dark:#cad000;
  --resource-accent-rgb:247 255 6;
  --resource-accent-dark-rgb:202 208 0;
  --resource-hero-tint-rgb:30 41 59;
  --resource-hero-border-rgb:202 208 0;
}
html.dark-mode[data-middle-pioneer-l4="1"] .viewer-container .panel,
html.dark-mode[data-middle-pioneer-l4="1"] .quiz-container,
html.dark-mode[data-middle-pioneer-l4="1"] .video-shell,
html[data-middle-pioneer-l4="1"] body.dark-mode .viewer-container .panel,
html[data-middle-pioneer-l4="1"] body.dark-mode .quiz-container,
html[data-middle-pioneer-l4="1"] body.dark-mode .video-shell{
  background:#111827;
  border-color:#596300;
  color:#f8fafc;
  box-shadow:0 4px 13px rgba(0,0,0,.28);
}
html.dark-mode[data-middle-pioneer-l4="1"] .viewer-container .panel header,
html.dark-mode[data-middle-pioneer-l4="1"] .quiz-container header,
html.dark-mode[data-middle-pioneer-l4="1"] .video-shell header,
html[data-middle-pioneer-l4="1"] body.dark-mode .viewer-container .panel header,
html[data-middle-pioneer-l4="1"] body.dark-mode .quiz-container header,
html[data-middle-pioneer-l4="1"] body.dark-mode .video-shell header{
  background:#172033;
  border-bottom-color:rgba(202,208,0,.40);
}
html.dark-mode[data-middle-pioneer-l4="1"] .viewer-container .panel header h2,
html[data-middle-pioneer-l4="1"] body.dark-mode .viewer-container .panel header h2{
  color:#f8fafc;
}
html.dark-mode[data-middle-pioneer-l4="1"] .pdf-viewer,
html.dark-mode[data-middle-pioneer-l4="1"] .gallery,
html.dark-mode[data-middle-pioneer-l4="1"] .video-stage,
html[data-middle-pioneer-l4="1"] body.dark-mode .pdf-viewer,
html[data-middle-pioneer-l4="1"] body.dark-mode .gallery,
html[data-middle-pioneer-l4="1"] body.dark-mode .video-stage{
  background:#172033;
  border-color:#596300;
}
html.dark-mode[data-middle-pioneer-l4="1"] .content-area .viewer-hero-unit,
html[data-middle-pioneer-l4="1"] body.dark-mode .content-area .viewer-hero-unit{color:#f8fafc}
html.dark-mode[data-middle-pioneer-l4="1"] .content-area .viewer-hero-item,
html[data-middle-pioneer-l4="1"] body.dark-mode .content-area .viewer-hero-item,
html.dark-mode[data-middle-pioneer-l4="1"] #l4bc-current,
html[data-middle-pioneer-l4="1"] body.dark-mode #l4bc-current{color:#f7ff06}

/* PDF download must look active, not faded. */
html.dark-mode[data-middle-pioneer-l4="1"] #pdfPanel > .toolbar,
html.dark-mode[data-middle-pioneer-l4="1"] #otherFormatsPanel > .toolbar,
html[data-middle-pioneer-l4="1"] body.dark-mode #pdfPanel > .toolbar,
html[data-middle-pioneer-l4="1"] body.dark-mode #otherFormatsPanel > .toolbar{
  background:#141d2d;
  border-top-color:rgba(202,208,0,.36);
}
html.dark-mode[data-middle-pioneer-l4="1"] #downloadBtn,
html[data-middle-pioneer-l4="1"] body.dark-mode #downloadBtn{
  background:#cad000;
  border-color:#e3e900;
  color:#202400;
  opacity:1;
  box-shadow:0 4px 16px rgba(202,208,0,.20);
}
html.dark-mode[data-middle-pioneer-l4="1"] #downloadBtn:hover,
html[data-middle-pioneer-l4="1"] body.dark-mode #downloadBtn:hover{
  background:#f7ff06;
  border-color:#f7ff06;
  color:#171900;
}

/* Word/PPT unavailable controls stay fully legible. */
html.dark-mode[data-middle-pioneer-l4="1"] #otherFormatsPanel .btn.is-unavailable,
html.dark-mode[data-middle-pioneer-l4="1"] #otherFormatsPanel .btn.is-unavailable:hover,
html[data-middle-pioneer-l4="1"] body.dark-mode #otherFormatsPanel .btn.is-unavailable,
html[data-middle-pioneer-l4="1"] body.dark-mode #otherFormatsPanel .btn.is-unavailable:hover{
  opacity:1;
  background:#172033;
  border-color:#69713a;
  color:#cbd5e1;
  box-shadow:none;
}
html.dark-mode[data-middle-pioneer-l4="1"] #otherFormatsPanel header h2 i,
html[data-middle-pioneer-l4="1"] body.dark-mode #otherFormatsPanel header h2 i{color:#cad000}

/* Sidebar/footer Pioneer tag. */
html.dark-mode .middle-pioneer-shell-banner,
body.dark-mode .middle-pioneer-shell-banner{
  background:#172033;
  border-color:#cad000;
  color:#f7ff06;
}
html.dark-mode .middle-pioneer-shell-banner i,
body.dark-mode .middle-pioneer-shell-banner i{color:#f7ff06}

@media(max-width:720px){
  .middle-track-selector{flex-direction:column}
  .middle-track-choice{min-height:48px}
}

/* =====================================================================
   V230.78 — Middle Pioneer YELLOW-ONLY interaction authority.
   No orange hover/click/breadcrumb treatment on the Pioneer path.
   ===================================================================== */

/* Pioneer breadcrumbs follow the native breadcrumb paint at rest.
   Only hovered/focused/pressed nodes and the CURRENT node use Pioneer yellow. */
html[data-middle-path="pioneer"] #breadcrumbs a:hover,
html[data-middle-path="pioneer"] #breadcrumbs a:focus-visible,
html[data-middle-path="pioneer"] #breadcrumbs a:active,
html[data-middle-pioneer-l3="1"] #breadcrumbs a:hover,
html[data-middle-pioneer-l3="1"] #breadcrumbs a:focus-visible,
html[data-middle-pioneer-l3="1"] #breadcrumbs a:active,
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:hover,
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:focus-visible,
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:active{
  color:#8a7000;
  background:transparent;
  text-shadow:0 0 6px rgba(255,208,3,.24);
}
html[data-middle-path="pioneer"] #breadcrumbs a:hover i,
html[data-middle-path="pioneer"] #breadcrumbs a:focus-visible i,
html[data-middle-path="pioneer"] #breadcrumbs a:active i,
html[data-middle-pioneer-l3="1"] #breadcrumbs a:hover i,
html[data-middle-pioneer-l3="1"] #breadcrumbs a:focus-visible i,
html[data-middle-pioneer-l3="1"] #breadcrumbs a:active i,
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:hover i,
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:focus-visible i,
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:active i{
  color:#8a7000;
}

/* Current/selected page is allowed to stay yellow, exactly like the
   Primary breadcrumb keeps its current subject in the Primary accent. */
html[data-middle-path="pioneer"] #breadcrumbs .bc-current,
html[data-middle-path="pioneer"] #breadcrumbs [aria-current="page"],
html[data-middle-pioneer-l3="1"] #breadcrumbs .bc-current,
html[data-middle-pioneer-l3="1"] #breadcrumbs [aria-current="page"],
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb .bc-current,
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb [aria-current="page"],
html[data-middle-pioneer-l4="1"] #l4bc-current{
  color:#8a7000;
}
html[data-middle-path="pioneer"] #breadcrumbs .bc-current i,
html[data-middle-path="pioneer"] #breadcrumbs [aria-current="page"] i,
html[data-middle-pioneer-l3="1"] #breadcrumbs .bc-current i,
html[data-middle-pioneer-l3="1"] #breadcrumbs [aria-current="page"] i,
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb .bc-current i,
html[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb [aria-current="page"] i,
html[data-middle-pioneer-l4="1"] #l4bc-current i{
  color:#8a7000;
}

/* Hero supervised CTA — proper light hover/focus/click paint. */
html[data-middle-pioneer-l3="1"] .content-area .sp-hero .hero-inline-btn{
  color:#756100;
  border-color:#cad000;
  background:rgba(255,208,3,.07);
  box-shadow:none;
}
html[data-middle-pioneer-l3="1"] .content-area .sp-hero .hero-inline-btn:hover,
html[data-middle-pioneer-l3="1"] .content-area .sp-hero .hero-inline-btn:focus-visible{
  color:#332b00;
  border-color:#cad000;
  background:#ffd003;
  box-shadow:0 0 0 2px rgba(202,208,0,.14),0 5px 15px rgba(255,208,3,.18);
}
html[data-middle-pioneer-l3="1"] .content-area .sp-hero .hero-inline-btn:active{
  color:#202400;
  border-color:#b8bd00;
  background:#cad000;
  box-shadow:0 2px 7px rgba(202,208,0,.20);
  transform:translateY(1px);
}

/* Four lesson resource buttons: Pioneer yellow only. */
html[data-middle-pioneer-l3="1"] .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn){
  border-color:color-mix(in srgb,#ffd003 46%,#d8dee8);
  color:#6f5c00;
  background:var(--surface,#fff);
}
html[data-middle-pioneer-l3="1"] .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn):hover,
html[data-middle-pioneer-l3="1"] .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn):focus-visible{
  border-color:#cad000;
  color:#3d3300;
  background:#fff6bd;
  box-shadow:inset 0 -3px 0 #ffd003,0 4px 11px rgba(202,208,0,.14);
}
html[data-middle-pioneer-l3="1"] .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn):active{
  border-color:#cad000;
  color:#2e2800;
  background:#ffd003;
  box-shadow:inset 0 -3px 0 #cad000;
}

/* Supervised exam accordion heading: no inner rectangle/fill.
   The OUTER exam card owns the card border. */
html[data-middle-pioneer-l3="1"] .content-area .source-exam-card > .supervised-toggle-btn,
html[data-middle-pioneer-l3="1"] .content-area .supervised-card > .supervised-toggle-btn{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
html[data-middle-pioneer-l3="1"] .content-area .source-exam-card > .supervised-toggle-btn:hover,
html[data-middle-pioneer-l3="1"] .content-area .source-exam-card > .supervised-toggle-btn:focus-visible,
html[data-middle-pioneer-l3="1"] .content-area .supervised-card > .supervised-toggle-btn:hover,
html[data-middle-pioneer-l3="1"] .content-area .supervised-card > .supervised-toggle-btn:focus-visible{
  border:0;
  background:transparent;
  box-shadow:none;
  color:#756100;
}
html[data-middle-pioneer-l3="1"] .content-area .source-exam-card > .supervised-toggle-btn:active,
html[data-middle-pioneer-l3="1"] .content-area .supervised-card > .supervised-toggle-btn:active{
  background:transparent;
  box-shadow:none;
}

/* Dark Pioneer breadcrumb: native text at rest, yellow only on interaction/current. */
html.dark-mode[data-middle-path="pioneer"] #breadcrumbs a:hover,
html.dark-mode[data-middle-path="pioneer"] #breadcrumbs a:focus-visible,
html.dark-mode[data-middle-path="pioneer"] #breadcrumbs a:active,
html[data-middle-path="pioneer"] body.dark-mode #breadcrumbs a:hover,
html[data-middle-path="pioneer"] body.dark-mode #breadcrumbs a:focus-visible,
html[data-middle-path="pioneer"] body.dark-mode #breadcrumbs a:active,
html.dark-mode[data-middle-pioneer-l3="1"] #breadcrumbs a:hover,
html.dark-mode[data-middle-pioneer-l3="1"] #breadcrumbs a:focus-visible,
html.dark-mode[data-middle-pioneer-l3="1"] #breadcrumbs a:active,
html[data-middle-pioneer-l3="1"] body.dark-mode #breadcrumbs a:hover,
html[data-middle-pioneer-l3="1"] body.dark-mode #breadcrumbs a:focus-visible,
html[data-middle-pioneer-l3="1"] body.dark-mode #breadcrumbs a:active,
html.dark-mode[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:hover,
html.dark-mode[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:focus-visible,
html.dark-mode[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:active,
html[data-middle-pioneer-l4="1"] body.dark-mode #schoolep-level4-source-breadcrumb a:hover,
html[data-middle-pioneer-l4="1"] body.dark-mode #schoolep-level4-source-breadcrumb a:focus-visible,
html[data-middle-pioneer-l4="1"] body.dark-mode #schoolep-level4-source-breadcrumb a:active{
  color:#f7ff06;
  background:transparent;
  text-shadow:0 0 7px rgba(247,255,6,.30);
}
html.dark-mode[data-middle-path="pioneer"] #breadcrumbs a:hover i,
html.dark-mode[data-middle-path="pioneer"] #breadcrumbs a:focus-visible i,
html.dark-mode[data-middle-path="pioneer"] #breadcrumbs a:active i,
html[data-middle-path="pioneer"] body.dark-mode #breadcrumbs a:hover i,
html[data-middle-path="pioneer"] body.dark-mode #breadcrumbs a:focus-visible i,
html[data-middle-path="pioneer"] body.dark-mode #breadcrumbs a:active i,
html.dark-mode[data-middle-pioneer-l3="1"] #breadcrumbs a:hover i,
html.dark-mode[data-middle-pioneer-l3="1"] #breadcrumbs a:focus-visible i,
html.dark-mode[data-middle-pioneer-l3="1"] #breadcrumbs a:active i,
html[data-middle-pioneer-l3="1"] body.dark-mode #breadcrumbs a:hover i,
html[data-middle-pioneer-l3="1"] body.dark-mode #breadcrumbs a:focus-visible i,
html[data-middle-pioneer-l3="1"] body.dark-mode #breadcrumbs a:active i,
html.dark-mode[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:hover i,
html.dark-mode[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:focus-visible i,
html.dark-mode[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb a:active i,
html[data-middle-pioneer-l4="1"] body.dark-mode #schoolep-level4-source-breadcrumb a:hover i,
html[data-middle-pioneer-l4="1"] body.dark-mode #schoolep-level4-source-breadcrumb a:focus-visible i,
html[data-middle-pioneer-l4="1"] body.dark-mode #schoolep-level4-source-breadcrumb a:active i{
  color:#f7ff06;
}
html.dark-mode[data-middle-path="pioneer"] #breadcrumbs .bc-current,
html.dark-mode[data-middle-path="pioneer"] #breadcrumbs [aria-current="page"],
html[data-middle-path="pioneer"] body.dark-mode #breadcrumbs .bc-current,
html[data-middle-path="pioneer"] body.dark-mode #breadcrumbs [aria-current="page"],
html.dark-mode[data-middle-pioneer-l3="1"] #breadcrumbs .bc-current,
html.dark-mode[data-middle-pioneer-l3="1"] #breadcrumbs [aria-current="page"],
html[data-middle-pioneer-l3="1"] body.dark-mode #breadcrumbs .bc-current,
html[data-middle-pioneer-l3="1"] body.dark-mode #breadcrumbs [aria-current="page"],
html.dark-mode[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb .bc-current,
html.dark-mode[data-middle-pioneer-l4="1"] #schoolep-level4-source-breadcrumb [aria-current="page"],
html[data-middle-pioneer-l4="1"] body.dark-mode #schoolep-level4-source-breadcrumb .bc-current,
html[data-middle-pioneer-l4="1"] body.dark-mode #schoolep-level4-source-breadcrumb [aria-current="page"],
html.dark-mode[data-middle-pioneer-l4="1"] #l4bc-current,
html[data-middle-pioneer-l4="1"] body.dark-mode #l4bc-current{
  color:#f7ff06;
}

/* Dark hero CTA. */
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero .hero-inline-btn,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero .hero-inline-btn{
  color:#f7ff06;
  border-color:#cad000;
  background:rgba(202,208,0,.055);
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero .hero-inline-btn:hover,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero .hero-inline-btn:focus-visible,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero .hero-inline-btn:hover,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero .hero-inline-btn:focus-visible{
  color:#101827;
  border-color:#f7ff06;
  background:#cad000;
  box-shadow:0 0 0 2px rgba(247,255,6,.12),0 0 14px rgba(247,255,6,.16);
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .sp-hero .hero-inline-btn:active,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .sp-hero .hero-inline-btn:active{
  color:#101827;
  border-color:#f7ff06;
  background:#f7ff06;
}

/* Dark four resource buttons. */
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn),
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn){
  color:#e5e7eb;
  background:#172033;
  border-color:#4c5566;
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn):hover,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn):focus-visible,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn):hover,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn):focus-visible{
  color:#f7ff06;
  background:#18210f;
  border-color:#cad000;
  box-shadow:inset 0 -3px 0 #cad000,0 0 13px rgba(247,255,6,.10);
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn):active,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .lesson-links .res-toggle:not(.supervised-toggle-btn):active{
  color:#101827;
  background:#cad000;
  border-color:#f7ff06;
}

/* Dark supervised accordion heading stays transparent — no rectangle. */
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .source-exam-card > .supervised-toggle-btn,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .supervised-card > .supervised-toggle-btn,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .source-exam-card > .supervised-toggle-btn,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .supervised-card > .supervised-toggle-btn{
  color:#f8fafc;
  background:transparent;
  border:0;
  box-shadow:none;
}
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .source-exam-card > .supervised-toggle-btn:hover,
html.dark-mode[data-middle-pioneer-l3="1"] .content-area .source-exam-card > .supervised-toggle-btn:focus-visible,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .source-exam-card > .supervised-toggle-btn:hover,
html[data-middle-pioneer-l3="1"] body.dark-mode .content-area .source-exam-card > .supervised-toggle-btn:focus-visible{
  color:#f7ff06;
  background:transparent;
  border:0;
  box-shadow:none;
}

/* Compact badge on mobile: the short رائدة / Pionnier label stays in the corner
   and no longer crosses the centered hero title. */
@media(max-width:720px){
  .schoolep-pioneer-corner-tag{
    max-width:72px;
  }
}