/* ============================================================
   ETHOS / BSC Online — Canonical Shared Stylesheet (V1)
   Single source of truth for school UI styling.
   ============================================================ */
/* NOTE:
   --text and --muted are intentionally locked to black
   to ensure cross-browser/mobile readability under dark-mode engines.
*/
/* Date: 2026-01-27 */
/* ================= Theme variables (canonical) ================= */
:root{
  color-scheme:light;
 /* ETHOS #7A1F27 palette */
  --brand:#7A1F27;
  --brand-600:#671921;
  --brand-100:#F8EDEE;

  --gold:#F4B400;
 /* Quiz state colors (canonical) */
  --bsc-pass:#0F7A2A;
  --bsc-pass-bg:#EAF7EE;
  --bsc-fail:#B42318;
  --bsc-fail-bg:#FDECEC;
  --bsc-warn:#92400E;
/* Base surfaces */
  --bg:#F3EEE6;
  --text:#111111;
  --muted:#5F5348;

  --panel:#FFFFFF;
  --panel-2:#FCFAF9;
  --divider:#D9CEC2;

  --radius:16px;
  --shadow-sm:0 6px 16px rgba(0,0,0,.12);
  --shadow-md:0 10px 26px rgba(0,0,0,.16);

  /* legacy aliases */
  --ethos-maroon:#7A1F27;
  --ethos-beige:#F3EEE6;
  --ethos-beige-2:#FCFAF9;
  --ethos-border:#D9CEC2;
}

/* ================= Base / reset ================= */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:#111111;
  background:#f3eee6;
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.bsc-dashboard{
  background:#f3eee6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1,h2,h3,h4{
  font-family:"Arial","Helvetica",sans-serif;
  color:#7A1F27;
}

a{color:#7A1F27;text-decoration:none}
a:hover{text-decoration:underline}

/* Containers */
.wrap,.container{max-width:1024px;margin:0 auto;padding:24px}

/* ================= Lesson content helpers ================= */

.lesson-body img{
  max-width:100%;
  height:auto;
  display:block;
  margin:12px auto;
  border-radius:6px;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
}

/* Floated lesson images (override default behavior) */

.lesson-body img.lesson-img-left,
.lesson-body img.lesson-img-right{
  max-width:45%;
  height:auto;

}

/* float directions */

.lesson-body img.lesson-img-left{
  float:left;
  margin:0.25rem 1rem 0.75rem 0;
}

.lesson-body img.lesson-img-right{
  float:right;
  margin:0.25rem 0 0.75rem 1rem;
}

/* clear helper */

.lesson-body .lesson-clear{
  clear:both;
}

/* mobile behavior */

@media (max-width:700px){

  .lesson-body img.lesson-img-left,
  .lesson-body img.lesson-img-right{
    float:none;
    max-width:100%;
    margin:12px auto;
  }

}
.lesson-body .caption{
  font-size:0.9em;
  color:#5F5348;
  text-align:center;
  margin-top:-6px;
  margin-bottom:12px;
}
/* Mobile only: prevent headings from sitting beside floated images */
@media (max-width:700px){
  .lesson-body h1,
  .lesson-body h2,
  .lesson-body h3,
  .lesson-body h4{
    clear:both;
  }
}
/* Float image figures */

.lesson-body figure.lesson-img-left,
.lesson-body figure.lesson-img-right{
  max-width:45%;
}

.lesson-body figure.lesson-img-left{
  float:left;
  margin:0.25rem 1rem 0.75rem 0;
}

.lesson-body figure.lesson-img-right{
  float:right;
  margin:0.25rem 0 0.75rem 1rem;
}
/* size modifiers for floated FIGURES (must come after the float rules) */
.lesson-body figure.img-small  { max-width:35%; }
.lesson-body figure.img-medium { max-width:50%; }
.lesson-body figure.img-large  { max-width:60%; }

/* caption styling */

.lesson-body figcaption{
  font-size:0.9em;
  color:#5F5348;
  text-align:center;
  margin-top:6px;
  font-style:italic;
}
/* Ensure lists respect floated lesson images */

.lesson-body ul,
.lesson-body ol{
  overflow:hidden;
}
.lesson-body{
  max-width: 780px;
  margin: 0 auto;
}

.lesson-body p{
  line-height: 1.72;
  margin-bottom: 1.25em;
}
.lesson-body{
  max-width:780px;
  margin:40px auto;
}
.lesson-body sup.fn {
  font-weight: 700;
  font-size: 0.8em;
}

/* ================= Hero band ================= */
.ethos-hero{
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FFF7F7 100%),
    #FCFAF9;
  border-bottom:1px solid #D9CEC2;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.hero-kicker{color:#5F5348;font-weight:600;letter-spacing:.2px;margin-bottom:6px}
.hero-title{
  margin:0;
  font-size:34px;
  line-height:1.15;
  color:#111;
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* ================= Cards / notices ================= */
.card{
  background:#FFFFFF;
  border:1px solid #D9CEC2;
  border-radius:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  padding:20px;
  margin:16px 0;
}

.notice{
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid #D9CEC2;
  color:#111111;
  margin:12px 0;
}
.notice.ok{background:#f0fbf4;border-color:#cbead2;color:#115e28}
.notice.bad{background:#fff5f5;border-color:#f3d1d1;color:#7a1f27}
.notice.warn{background:#fffaf0;border-color:#f2dfb9;color:#7a4d12}

/* Passed lesson result box — match lesson banner spine */
.notice.ok{border-left:4px solid #3f8b4f}

/* Headings + utilities */
h1,h2,h3{margin:0 0 12px 0}
h1{font-size:28px} h2{font-size:22px} h3{font-size:18px}
.muted{color:#5F5348}
.hr{height:1px;background:#D9CEC2;margin:16px 0}

/* Utility: hidden */
.hid{display:none !important}

/* ================= Buttons ================= */
.button,.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius:12px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(180deg, #7A1F27 0%, #671921 100%);
  box-shadow:0 10px 20px rgba(122,31,39,.20);
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration:none;
  display:inline-block;
}

/* Canon button sizing (trimmed) */
a.btn,.btn{
  padding:5px 10px;     /* top/bottom, left/right */
  line-height:1.2;
}

.button:hover,.btn:hover{transform:translateY(-1px);filter:saturate(1.05);text-decoration:none}
.button:disabled,.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* Ensure CE translation on login button is white like EN */
.login-btn .ce-line{color:#ffffff !important}

/* Small screens: keep buttons readable */
@media (max-width:600px){
  .button,.btn{
    font-size:14px;
    border-radius:10px;
  }
}

/* ================= Fieldsets (quiz) ================= */
fieldset{
  border:1px solid #D9CEC2;
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  padding:18px;
  margin:18px 0;
}
legend{
  padding:0 8px;
  font-weight:800;
  color:#7A1F27;
  letter-spacing:.2px;
}
fieldset h3{
  margin:0 0 8px 0;
  font-size:1.1em;
  font-weight:700;
  color:#7A1F27;
}

/* ================= Quiz blocks ================= */
.q{
  padding:14px;
  border-radius:12px;
  border:1px solid #D9CEC2;
  background:#fff;
  margin:12px 0;
}
.q:hover{border-color:#ead8da;background:#fffafa}

/* Inputs near buttons (PIN / short answer) */
.inputs-inline input{
  width:200px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d9c6c9;
  background:#fff;
}

/* ================= Lists (future index) ================= */
.lesson-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lesson-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px;
  border-radius:12px;
  background:#fff;
  border:1px solid #D9CEC2;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.lesson-item.locked{opacity:.75}

/* ================= Continuous Quiz Layout ================= */
#quizSection fieldset,
#quizSection .q{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin:0;
}

/* Subtle separators between consecutive questions */
#quizSection fieldset + fieldset,
#quizSection .q + .q{
  border-top:1px solid #D9CEC2;
  padding-top:12px;
  margin-top:12px;
}

/* Clean legend + choices */
#quizSection legend{
  margin:0 0 6px 0;
  padding:0;
  font-weight:800;
  color:#7A1F27;
}
#quizSection .choice{margin:4px 0}

/* Choice alignment (wrap indentation) */
#quizSection label.choice{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:4px 0;
  line-height:1.5;
}
#quizSection label.choice input[type="radio"],
#quizSection label.choice input[type="checkbox"]{
  flex:0 0 auto;
  margin-top:3px;
}
#quizSection label.choice span{
  flex:1 1 auto;
  display:inline-block;
  text-indent:0;
  margin:0;
  padding:0;
  word-break:break-word;
}
/* ============================================================
   Lesson UI (from bsc-lesson.css) — banners, headers, notes, etc.
   ============================================================ */

/* Lesson banner states */
.banner{
  background:#fdf8f1;
  color:#7A1F27;
  padding:16px 18px;
  border-radius:16px;
  margin:12px 0;
  border:1px solid #7A1F27;
}
.banner-success{
  border-color: rgba(15,122,42,.35);
  background: #EAF7EE;
  color: #0F7A2A;
}
.banner-danger{
  border-color: rgba(180,35,24,.35);
  background: #FDECEC;
  color: #B42318;
}

/* Current / active lesson */
.banner.banner-active{
  background:#FFFFFF;
  border-left:4px solid #7A1F27;
}

/* Passed lesson */
.banner.banner-passed{
  background:#f1faf3;
  border-left:4px solid #3f8b4f;
}

/* Quiz card (legacy; kept for compatibility) */
.quiz-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:16px;
  margin:16px 0;
}

.choice{display:block;margin:6px 0}

/* Button styling used in lesson legacy */
button{
  border-radius:12px;
  padding:10px 16px;
  border:1px solid #7A1F27;
  cursor:pointer;
  color:#7A1F27;
  background:#fff;
}

.button-link{
  border:none;
  background:none;
  color:#7A1F27;
  text-decoration:underline;
  cursor:pointer;
  padding:0 4px;
}

.bad{background:#fcfaf9;border-color:#7A1F27}
.ok{background:#fcfaf9;border-color:#7A1F27}

/* Continuous questions style (legacy; ethos-bsc already provides canon) */
#quizSection fieldset{border:0;margin:0;padding:0}

/* Back-to-dashboard button row */
.lesson-header-top{
  display:flex;
  justify-content:flex-start;
  margin-top:10px;
  margin-bottom:6px;
}
.back-to-dashboard{
  font-size:0.9rem;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid currentColor;
  text-decoration:none;
  white-space:nowrap;
}
.back-to-dashboard:hover{background-color:rgba(0,0,0,0.08)}

/* Banner top row */
.banner-top-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
@media (max-width:700px){
  .banner-top-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .btn-back-course{
    order:3;
    align-self:flex-start;
    margin-top:8px;
  }

  #bannerStats{
    margin-top:8px;
  }
}
/* Course back pill */
.btn-back-course{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #7A1F27;
  background:#efe6d7;
  color:#7A1F27;
  font-size:0.85rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.btn-back-course:hover{
	opacity:0.9;
    text-decoration:none;
	}

/* Instruction blocks injected into quiz */
.quiz-instruction{
  margin:12px 0;
  padding:10px;
  background:#fcfaf9;
  border-left:4px solid #7A1F27;
  border-radius:8px;
  display:none; /* hidden until JS moves them into place */
}
.quiz-instruction.show{display:block}

/* Floating "Copy to notes" button for lesson selection */
#copyToNotesBtn{
  position:absolute;
  z-index:2000;
  display:none;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #7A1F27;
  background:#7A1F27;
  color:#fff;
  font-size:0.75rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  cursor:pointer;
  white-space:nowrap;
}
#copyToNotesBtn:hover{opacity:0.9}

/* Pro Clip Mode: styled, collapsible lesson snippets inside notes */
.bsc-note-clip{
  border-left:3px solid #7A1F27;
  margin:8px 0;
  background:#fcfaf9;
  padding:6px 8px 8px;
  border-radius:6px;
}
.bsc-note-clip-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#7A1F27;
  opacity:0.85;
}
.bsc-note-clip-toggle{
  border:none;
  background:none;
  color:inherit;
  font-size:0.75rem;
  font-weight:600;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.bsc-note-clip-toggle:focus-visible{
  outline:2px solid #7A1F27;
  outline-offset:2px;
}
.bsc-note-clip-body{
  margin-top:4px;
  font-size:0.92em;
}
.bsc-note-clip.bsc-note-clip-collapsed .bsc-note-clip-body{display:none}

/* Smart Anchor Button */
.bsc-note-clip-jump{
  border-radius:999px;
  border:1px solid #7A1F27;
  background:#fff;
  color:#7A1F27;
  padding:2px 8px;
  font-size:0.7rem;
  cursor:pointer;
  white-space:nowrap;
}
.bsc-note-clip-jump:hover{
  background:#7A1F27;
  color:#fff;
}

/* Flash highlight for scroll targets (single paragraph, not whole card) */
.bsc-highlight-target{
  animation:bscFlash 1.2s ease-out;
  background-color:rgba(255,255,0,0.35);
  transition:background-color 0.6s ease-out;
}
@keyframes bscFlash{
  0%{background-color:rgba(255,255,0,0.8)}
  40%{background-color:rgba(255,255,0,0.5)}
  70%{background-color:rgba(255,255,0,0.2)}
  100%{background-color:rgba(255,255,0,0)}
}

/* Notes UI */
.bsc-notes-panel{}

.bsc-notes-header h2{margin:0 0 4px 0}
.bsc-notes-sub{
  margin:0 0 4px 0;
  font-size:0.9rem;
  color:#7A1F27;
}

.bsc-notes-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-top:4px;
  margin-bottom:10px;
}
.notes-toolbar-sep{color:#D9CEC2;padding:0 2px}

.notes-btn{
  border-radius:8px;
  padding:4px 8px;
  border:1px solid #D9CEC2;
  background:#fff;
  color:#7A1F27;
  font-size:0.8rem;
  cursor:pointer;
}
.notes-btn:hover{
  border-color:#7A1F27;
  background:#fdf7f2;
}

.notes-color-row{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.notes-color-label{
  font-size:0.8rem;
  color:#7A1F27;
  margin-right:2px;
}
.notes-color-swatch{
  width:18px;
  height:18px;
  border-radius:4px;
  border:1px solid #D9CEC2;
  padding:0;
  cursor:pointer;
  background:#000;
}
.notes-color-swatch.is-active{
  box-shadow:0 0 0 2px #7A1F27;
  border-color:#7A1F27;
}

.notes-heading-icon{
  display:inline-block;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:700;
  color:#7A1F27;
  line-height:1;
}
.notes-heading-icon.lg{font-size:1.1rem}
.notes-heading-icon.sm{font-size:0.9rem}

.notes-highlight-btn{
  font-size:0.75rem;
  padding:3px 6px;
  border-radius:6px;
}

.bsc-notes-heading-large{
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.5rem;
  font-weight:700;
  color:#7A1F27;
  margin:10px 0 4px;
}
.bsc-notes-heading-small{
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.1rem;
  font-weight:700;
  color:#7A1F27;
  margin:8px 0 4px;
}

.bsc-notes-footer{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.bsc-notes-editor{
  min-height:160px;
  border:1px solid #7A1F27;
  border-radius:8px;
  padding:10px;
  outline:none;
  box-shadow:none;
  background:#fff;
  margin-top:8px;
  margin-bottom:8px;
}
.bsc-notes-editor:focus,
.bsc-notes-editor:focus-visible{
  outline:none;
  box-shadow:none;
  border-color:#7A1F27;
}

/* Impersonation banner styling (shared) */
body.bsc-dashboard .impersonation-banner{
  margin-top:10px;
  padding:8px 10px;
  border-radius:10px;
  font-size:0.85rem;
  line-height:1.3;
  background:#fff7e0;
  border:1px solid #d3a431;
  color:#8a6415;
}

/* Per-lesson survey reminder banner */
.survey-reminder{
  margin-top:10px;
  padding:8px 10px;
  border-radius:10px;
  font-size:0.85rem;
  line-height:1.3;
  background:#fff7e6;
  border:1px solid #f59e0b;
  color:#92400e;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}
.survey-reminder a.btn-survey{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid #7A1F27;
  background:#7A1F27;
  color:#fff;
  font-size:0.85rem;
  text-decoration:none;
  white-space:nowrap;
}
.survey-reminder a.btn-survey:hover{opacity:0.9}

/* ============================================================
   Worksheet UI (from bsc-worksheet.css)
   ============================================================ */

.ws-page{
  max-width:980px;
  margin:24px auto 40px;
  padding:0 16px;
}

.ws-header{
  background:#FFFFFF;
  border-radius:14px;
  border:1px solid #D9CEC2;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  padding:18px 20px;
  margin-bottom:18px;
}

.ws-kicker{
  font-size:0.85rem;
  color:#5F5348;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:4px;
}

.ws-title{
  margin:0 0 4px;
  font-size:1.5rem;
  color:#7A1F27;
}

.ws-sub{
  margin:4px 0 0;
  font-size:0.95rem;
  color:#5F5348;
}

.ws-section-label{
  margin:18px 0 6px;
  font-weight:600;
  color:#7A1F27;
}

.ws-table{
  width:100%;
  border-collapse:collapse;
  background:#FFFFFF;
  border-radius:12px;
  border:1px solid #D9CEC2;
  overflow:hidden;
}

.ws-table th,
.ws-table td{
  padding:8px 10px;
  border-bottom:1px solid #D9CEC2;
  vertical-align:top;
}

.ws-table th{
  background:#FCFAF9;
  font-size:0.9rem;
  font-weight:600;
  color:#5F5348;
}

.ws-table tr:last-child td{border-bottom:none}

.ws-ref{
  white-space:nowrap;
  font-weight:600;
}

.ws-notes{
  width:100%;
  min-height:72px;
  border-radius:10px;
  border:1px solid #D9CEC2;
  padding:8px;
  resize:vertical;
  font:inherit;
  background:#fff;
}

.ws-cta{
  text-align:center;
  margin:18px 0 4px;
}

.ws-pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px dashed #D9CEC2;
  font-size:0.8rem;
  color:#5F5348;
}

.ws-footer{
  margin-top:16px;
  font-size:0.85rem;
  color:#5F5348;
}

/* Small screens */
@media (max-width:640px){
  .ws-page{padding:0 10px;}
  .ws-table th:nth-child(1),
  .ws-table td:nth-child(1){width:32%;}
}
/* Shared language selector styling */
.bsc-viewlang-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0;
}

.bsc-viewlang-label{
  font-weight:500;
}

.bsc-viewlang-select{
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #bcae9b;
  background:#efe6d7;
  font-size:14px;
}

.bsc-viewlang-btn{
  background:#8b1d1d;
  color:#fff;
  border:none;
  border-radius:18px;
  padding:6px 14px;
  font-weight:600;
  cursor:pointer;
}

.bsc-viewlang-btn:hover{
  background:#6e1515;
}
/* ============================================================
   Worksheet callout box + charts (from ethos-bsc.css tail)
   ============================================================ */

/* Permanent #7A1F27 border (worksheet callout box) */
.box{
  box-sizing:border-box;
  border:3px solid #7A1F27;
  background:#F3EEE6;
  margin:25px auto;
  width:85%;
  max-width:960px;
  border-radius:5px;
  box-shadow:0 14px 28px rgba(0,0,0,.24);
  padding:12px 15px;
}

/* Ensure breathing room under worksheet callout table */
table.box.middle{
  margin-bottom:24px !important;
}

/* If the next element has zero top-margin, force a gap anyway */
table.box.middle + *{
  margin-top:18px !important;
}

table.chart{border-collapse:collapse}
table.chart td{
  border:solid 1px black;
  padding:4px 40px;
}

/* ============================================================
   Dashboard UI (from bsc-dashboard-inline.css)
   SCOPED to dashboard pages ONLY to avoid global side effects.
   Add class="bsc-dashboard" to <body> on the dashboard page.
   ============================================================ */

/* Dashboard page chrome (scoped) */

body.bsc-dashboard .wrap{
  max-width:960px;
  margin:0 auto;
  padding:16px 12px 40px;
}

/* Top bar */
body.bsc-dashboard .top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  flex-wrap:wrap;
  gap:6px;
}
body.bsc-dashboard .top-bar a{font-size:0.85rem}

/* Dashboard card */
body.bsc-dashboard .dashboard-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:16px 18px 20px;
  margin:12px 0;
  border:1px solid #D9CEC2;
}

body.bsc-dashboard .dash-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

body.bsc-dashboard .dash-title{
  font-size:1.6rem;
  font-weight:700;
  color:#7A1F27;
}

body.bsc-dashboard .dash-subtitle{
  color:#7a6b5b;
  font-size:0.95rem;
}
body.bsc-dashboard .student-id{
  font-size:0.85rem;
  color:#7A1F27;
  text-align:right;
  background:#f3e7d6;
  border:1px solid #7A1F27;
  border-radius:10px;
  padding:6px 10px;
  min-width:160px;
  box-shadow:none;
}

body.bsc-dashboard .student-name{
  font-weight:600;
  color:#7A1F27;
  margin-bottom:2px;
}

body.bsc-dashboard .student-sid{
  font-size:0.8rem;
  color:#7a6b5b;
}

body.bsc-dashboard .student-sid strong{
  color:#7a6b5b;
}

/* Course sections */
body.bsc-dashboard .course-section{margin-top:14px}
body.bsc-dashboard .course-section h2{
  font-size:1.1rem;
  margin:6px 0 8px;
  color:#7A1F27;
}

body.bsc-dashboard .course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:14px;
  margin-top:14px;
}

/* Course tiles */
body.bsc-dashboard .course-tile{
  border-radius:12px;
  padding:14px 16px;
  background:#fff;
  border:1px solid #D9CEC2;
  transition:box-shadow .15s ease, transform .15s ease;
}

/* Major course tiles */
body.bsc-dashboard .course-tile.major{
  border-left:6px solid #7A1F27;
  background:linear-gradient(to right, rgba(123,30,30,0.06), #fff);
}

/* Minor course tiles */
body.bsc-dashboard .course-tile.minor{
  border-left:6px solid #2d6a77;
  background:linear-gradient(to right, rgba(45,106,119,0.06), #fff);
}

/* Hover (only available courses) */
body.bsc-dashboard .course-tile.available:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transform:translateY(-2px);
}

/* Unavailable dimming */
body.bsc-dashboard .course-tile.unavailable{
  opacity:0.55;
  pointer-events:none;
  filter:grayscale(0.5);
}

body.bsc-dashboard .course-title{
  font-weight:700;
  font-size:1.1rem;
  margin-bottom:4px;
  color:#7A1F27;
}
body.bsc-dashboard .course-meta{font-size:0.9rem;color:#7a6b5b}

body.bsc-dashboard .course-footer{
  margin-top:6px;
  font-size:0.8rem;
  color:#7a6b5b;
}
body.bsc-dashboard .course-footer span.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #7A1F27;
  font-size:0.75rem;
  color:#7A1F27;
  background:#fff;
}

/* Footer */
body.bsc-dashboard .bsc-footer{
  margin-top:20px;
  padding-top:10px;
  border-top:1px solid #e2d2c0;
  font-size:0.8rem;
  color:#7a6b5b;
  text-align:center;
}
body.bsc-dashboard .bsc-footer a{
  color:#7b1e1e;
  text-decoration:underline;
}
body.bsc-dashboard .bsc-footer a:hover{text-decoration:none}

/* Impersonation banner (dashboard legacy) */
body.bsc-dashboard .impersonation-banner{
  padding:10px 12px;
  margin-bottom:12px;
  border-radius:12px;
  background:#faf2e8;
  border-left:5px solid #7A1F27;
  font-size:0.9rem;
  color:#7a6b5b;
}

/* ============================================================
   End of original consolidated CSS file 
   ============================================================ */

/* ============================================================
   Step 2 harvested additions (integrated)
   Source pages: JMAN home-jman.php, lesson.php, intro.php
   Notes: dashboard-only rules are scoped under body.bsc-dashboard
   ============================================================ */

/* ---------- Dashboard additions (scoped) ---------- */
body.bsc-dashboard .lock-warning{
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:0.88rem;
  line-height:1.35;
  background:#fbecec;
  border:1px solid #c0392b;
  color:#7f1d1d;
}

body.bsc-dashboard .lessons-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:8px;
}

body.bsc-dashboard .lesson-tile{
  border-radius:10px;
  padding:8px 10px;
  border:1px solid #e0d3c3;
  background:#fff;
  font-size:0.9rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.bsc-dashboard .lesson-tile.idle{border-color:#e0d3c3;background:#fff}
body.bsc-dashboard .lesson-tile.passed{border-color:#3f8b4f;background:#f1faf3;border-left:4px solid #3f8b4f}
body.bsc-dashboard .lesson-tile.locked{border-color:#c0392b;background:#fbecec;border-left:4px solid #c0392b}
body.bsc-dashboard .lesson-tile.in-progress{border-color:#e0a84f;background:#fdf5e8;border-left:4px solid #e0a84f}
body.bsc-dashboard .lesson-tile:hover{box-shadow:0 4px 10px rgba(0,0,0,.06);transform:translateY(-1px)}
body.bsc-dashboard .lesson-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-weight:600}
body.bsc-dashboard .lesson-status{font-size:0.8rem;color:#7a6b5b}
body.bsc-dashboard .lesson-actions{margin-top:4px}
body.bsc-dashboard .lesson-link{font-size:0.85rem;text-decoration:none;color:#7A1F27}
body.bsc-dashboard .lesson-link:hover{text-decoration:underline}

body.bsc-dashboard .dev-banner{
  margin-bottom:10px;
  padding:8px 10px;
  border-radius:10px;
  font-size:0.85rem;
  line-height:1.3;
  background:#e5f4ff;
  border:1px solid #3b82f6;
  color:#1e3a8a;
}

body.bsc-dashboard .dev-toggle{
  display:inline-block;
  padding:4px 14px;
  border-radius:999px;
  border:1px solid #1d4ed8;
  font-size:0.78rem;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:0.06em;
  background:#e0edff;
  color:#1d4ed8;
}
body.bsc-dashboard .dev-toggle.lock{border-color:#b91c1c;background:#fee2e2;color:#7f1d1d}

body.bsc-dashboard .legal-disclaimer{
  margin-top:12px;
  padding-top:8px;
  border-top:1px dashed #D9CEC2;
  font-size:0.78rem;
  color:#7a6b5b;
  line-height:1.35;
}

body.bsc-dashboard .resume-wrap{
  margin-top:12px;
}

body.bsc-dashboard .resume-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid #7A1F27;
  background:#f3e7d6;
  color:#7A1F27;
  font-size:0.95rem;
  font-weight:700;
  line-height:1.1;
  text-decoration:none;
  box-shadow:none;
  transition:transform .06s ease, background-color .2s ease, box-shadow .2s ease;
}

body.bsc-dashboard .resume-btn:hover{
  transform:translateY(-1px);
  background:#efe1ce;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}

body.bsc-dashboard .resume-btn:focus-visible{
  outline:2px solid #7A1F27;
  outline-offset:2px;
}

body.bsc-dashboard .resume-help{
  margin-top:8px;
  color:#7a6b5b;
  font-size:0.95rem;
}

/* ---------- Lesson additions (shared) ---------- */
.quiz-q{
  border-radius:12px;
  padding:10px 10px 8px;
  margin-bottom:10px;
}
.quiz-q.q-ok{
  background: rgba(15,122,42,.06);
  border-left: 6px solid rgba(15,122,42,.55);
}
.quiz-q.q-bad{
  background: rgba(180,35,24,.06);
  border-left: 6px solid rgba(180,35,24,.55);
}
.quiz-q .qnum{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
}
.quiz-q.q-ok .qnum{
  background: rgba(15,122,42,.10);
  color: #0F7A2A;
}
.quiz-q.q-bad .qnum{
  background: rgba(180,35,24,.10);
  color: #B42318;
}
.quiz-q.q-ok .qnum::after{ content: " ✓"; font-weight: 800; }
.quiz-q.q-bad .qnum::after{ content: " ✗"; font-weight: 800; }

.quiz-actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}

/* Inline pill buttons used in lesson + modals */
.bsc-inline-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid currentColor;
  background:#fff;
  color:inherit;
  font-size:0.85rem;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.bsc-inline-btn:hover{ opacity:0.92; }

/* Generic modal UI (lesson) */
.bsc-modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 5000;
  padding: 14px;
}
.bsc-modal{
  width: min(720px, 100%);
  background:#fff;
  border:1px solid #D9CEC2;
  border-radius:14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  overflow:hidden;
}
.bsc-modal-header{
  padding:12px 14px;
  background: #F3EEE6;
  border-bottom:1px solid #D9CEC2;
  color: #7A1F27;
  font-weight:700;
  font-size:1.05rem;
}
.bsc-modal-body{
  padding:14px;
  color:#2b1f1f;
  line-height:1.45;
  font-size: 1rem;
}
.bsc-modal-body p{ margin: 0 0 10px 0; }
.bsc-modal-footer{
  padding:12px 14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid #D9CEC2;
  background:#fff;
}
.bsc-modal-btn{
  border-radius: 999px;
  padding: 9px 14px;
  border: 1px solid #7A1F27;
  background: #7A1F27;
  color:#fff;
  cursor:pointer;
}
.bsc-modal-btn:hover{ opacity:.92; }

/* ---------- Intro page additions (safe selectors) ---------- */
.ws-card{
  background:#fff;
  border-radius:16px;
  border:1px solid #D9CEC2;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  padding:18px 18px 20px;
  margin:12px 0;
}
.intro-body{font-size:0.95rem;color:#5e5144;line-height:1.5}
.intro-body p{margin:0 0 0.7rem}
.ws-actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.ws-card .notice{font-size:0.85rem;color:#7a6b5b}


/* ============================================================
   End of canonical shared stylesheet (V1)
   ============================================================ */

body.bsc-dashboard .dev-toggle.open{border-color:#1d4ed8;background:#e0edff;color:#1d4ed8}



/* ================= Form control readability hotfix =================
   Minimal scoped fix for mobile dark-mode auto-restyling.
   This patch intentionally avoids layout changes.
*/
html{color-scheme:light;}
body{color-scheme:light;}

input:not([type]),
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select{
  background:#f3e7d6 !important;
  color:#7A1F27 !important;
  -webkit-text-fill-color:#000000 !important;
  caret-color:#000000;
  color-scheme:light;
}

input:not([type])::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder{
  color:#666666 !important;
  opacity:1;
  -webkit-text-fill-color:#666666;
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus{
  background:#ffffff !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

select option,
select optgroup{
  background:#ffffff;
  color:#000000;
}


/* ================= Tablet adjustments ================= */
@media (max-width:1024px){
  .wrap,.container{padding:20px 16px;}
  .lesson-body{max-width:860px;}
}

/* ================= Phone adjustments ================= */
@media (max-width:700px){
  .wrap,.container{padding:16px 12px;}
  .card,
  .dashboard-card,
  .ws-header{padding:16px;}
  .lesson-body img{
    max-width:100%;
    height:auto;
  }
  .box{
    width:94%;
    padding:10px 12px;
  }
}
/* Quiz review checked controls */
input[type="radio"]:checked,
input[type="checkbox"]:checked{
  accent-color:#7A1F27;
}
/* ================= Banner layout responsive ================= */

/* Phones */
@media (max-width:700px){

  .lesson-banner{
    display:block;
  }

  .btn-back-course{
    display:block;
    margin-top:10px;
  }

}

/* Tablets and PCs */
@media (min-width:701px){

  .lesson-banner{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .btn-back-course{
    margin-left:auto;
  }

}