:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --black:#111;
  --red:#b91c1c;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--ink)}
.topbar{padding:18px 20px;background:transparent; display:flex; justify-content:flex-start; align-items:flex-start; gap:14px}

.brandCol{width:240px; flex:0 0 240px}
.welcomeCard{flex:1 1 auto; margin:0; align-self:flex-start}

@media (max-width: 900px){
  .topbar{flex-direction:column;}
  .brandCol{width:auto; flex:0 0 auto;}
}
.title{font-weight:800;font-size:22px;letter-spacing:.2px}
.brandLogo{width:192px; max-width:48vw; height:auto; display:block; margin:0 0 6px 0}
.subtitle{color:var(--muted);font-size:13px;margin-top:2px}
.tinyCaps{font-size:11px; letter-spacing:.4px; text-transform:uppercase; margin-top:2px}
#appVersion{font-size:13px; margin-top:2px; color:#9ca3af}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px 28px}

/* Hybrid layout: keep form panels readable, let wide panels use available screen space */
.breakout{
  width:min(calc(100vw - 32px), 1600px);
  margin-left:50%;
  transform:translateX(-50%);
}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px; box-shadow:0 1px 0 rgba(0,0,0,.02)}
.panelHead{font-weight:800;margin-bottom:10px;background:#eef2f7;border:1px solid var(--line);padding:10px 12px;border-radius:12px}
.req{color:var(--red);font-weight:700}
label{display:block;font-size:13px;color:var(--muted)}
input,textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:10px 10px;font-size:14px;color:var(--ink);background:#fff}
textarea{height:180px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;gap:8px;align-items:center}
.rowBetween{display:flex;justify-content:space-between;gap:12px;align-items:center}
.btn{border:1px solid #e6c08f;background:#f8d9b0;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;color:#5a3b12}
.btn:hover{background:#f4cf9c}
.btnGhost{border:1px solid #e6c08f;background:#f8d9b0;color:#5a3b12}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.note{margin-top:10px;font-size:12px;color:var(--muted)}
.center{text-align:center}

.instructors{margin-top:10px}
.instructorRow{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;padding-right:28px}

.instRemove{position:absolute;top:6px;right:6px;width:22px;height:22px;line-height:20px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#7b1d1d;font-weight:700;cursor:pointer}
.instRemove:hover{background:#f7f7f7}

.gridCD{display:grid;grid-template-columns:1.08fr .92fr;gap:12px;align-items:stretch;margin-top:12px}
@media (max-width: 980px){.grid2{grid-template-columns:1fr}.gridCD{grid-template-columns:1fr}}

/* Panel B layout */
.panelBRow{display:flex;gap:14px;align-items:stretch}
.panelBLeft{flex:1.25}
.panelBRight{flex:.75;min-width:260px}
.panelBOr{align-self:center;font-weight:900;font-size:22px;color:#111827;min-width:56px;display:flex;align-items:center;justify-content:center}
.panelBTip{margin-top:10px;padding:10px 12px;border-radius:12px;background:#eef2ff;color:#111827;font-weight:700;line-height:1.3}
.panelBTip strong{font-weight:900}

.cutoffs{border:none;border-radius:14px;padding:12px;margin-bottom:12px;background:#fbfbfe}
.cutoffTitle{font-weight:800;margin-bottom:8px}
.cutoffInput{background:var(--red)!important;color:#fff!important;border-color:rgba(0,0,0,.15)!important;font-weight:800}
.cutoffInput::placeholder{color:rgba(255,255,255,.75)}

.tableWrap{overflow:auto;border-radius:14px;border:1px solid var(--line)}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:var(--black);color:#fff;font-size:12px;text-align:left;padding:7px 8px;white-space:nowrap}
tbody td{padding:7px 8px;border-top:1px solid var(--line);font-size:12.5px;vertical-align:middle}

.gradeA{background:rgba(34,197,94,.10)}
.gradeB{background:rgba(59,130,246,.08)}
.gradeC{background:rgba(245,158,11,.10)}
.gradeD{background:rgba(245,158,11,.16)}
.gradeNP{background:rgba(239,68,68,.12)}

/* Class interval controls */
.adjustTxt{font-size:11px;color:var(--muted);margin-top:2px}
.ciWrap{display:inline-flex;align-items:center;gap:8px}
.ciBtn{width:28px;height:28px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:900;line-height:26px;text-align:center}
.ciBtn:active{transform:translateY(1px)}
.ciInput{width:78px;height:28px;line-height:28px;padding:0 10px;box-sizing:border-box}

/* Ensure native number steppers stay visible on desktop */
input[type="number"]{appearance:auto;-moz-appearance:auto;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{opacity:1;}

/* Cutoffs header helpers */
.cutoffMetaRow{display:none}
.cutoffHeaderRow{display:grid;grid-template-columns:1fr 1fr;align-items:end; margin:0 0 6px}
.cutoffHeaderRow .dataMinMax{justify-self:end}

/* Panel E container moved into belowChartsGrid */

.dataBarCell{position:relative;overflow:hidden;border-radius:10px}
.dataBarFill{position:absolute;left:0;top:0;bottom:0;border-radius:10px;opacity:.6}
.dataBarText{position:relative;z-index:1}

/* Panel C: two-column layout (cutoffs left, notes right) */
.cutoffsGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width: 980px){.cutoffsGrid{grid-template-columns:1fr}}

.chartTitle{font-weight:900;font-size:18px;margin:6px 0 2px;text-align:center}
.chartSubTitle{color:var(--muted);font-size:13px;margin:0 0 8px; text-align:center}
.chartBox{position:relative;border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff}

#panelD .chartBox{flex:1;min-height:340px;}
#panelD canvas{width:100% !important;height:100% !important;}

.meanBox{position:absolute;left:12px;top:12px;z-index:5;pointer-events:none;background:rgba(156,163,175,.35);padding:10px 12px;border-radius:10px;font-size:13px;color:#111}

.densityToggle{margin-top:8px;display:inline-block;padding:10px 12px;border-radius:12px;background:#dbeafe;color:#1e3a8a;border:1px solid #93c5fd;font-weight:800}
.densityToggle:hover{filter:brightness(.98)}
.densityWrap{position:relative;margin-top:10px;border:2px solid #93c5fd;background:#eff6ff;border-radius:16px;padding:10px 12px 44px 12px;height:420px;max-height:420px;overflow:visible}
/* give the x-axis title room inside the canvas */
#density{width:100% !important;height:calc(420px - 82px) !important;}

.xLabelBlock{display:flex;justify-content:space-between;gap:6px;padding:0 4px 0;margin-top:-10px}

/* Align Panel E width with Panel D left column, so Panel E ends exactly below rubric table */
.belowChartsGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:start;margin-top:14px;}
.panelEInner{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;}
.panelEInner .panelHead{margin:-12px -12px 10px;background:#eef2f7;border:1px solid var(--line);padding:10px 12px;border-radius:12px}
.sdsHeaderGrid{display:grid;grid-template-columns:1fr auto 1fr auto;gap:10px;padding:6px 8px 8px;border-bottom:1px solid #e5e7eb;margin-bottom:6px;color:var(--muted);font-size:12px}
.sdsHeaderGrid .right{text-align:right}
.sdsGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sds{width:100%;border-collapse:collapse;}
.sds td,.sds th{padding:10px 8px;border-bottom:1px solid #e5e7eb;}
.sds td:last-child,.sds th:last-child{text-align:right;font-weight:700;color:#0f172a;}
.densityTitle{color:#2b6cb0;}

@media (max-width: 980px){
  .belowChartsGrid{grid-template-columns:1fr;}
  .densityWrap{height:320px;max-height:320px;padding-bottom:24px;}
  #density{height:calc(320px - 78px) !important;}
}
.xLabel{flex:1;text-align:center;min-width:60px}
.xGrade{font-weight:800}
.xRange,.xGpa{font-size:12px;color:var(--muted)}

/* legacy SDS table rules removed (now handled by .sdsGrid + .sds) */
.sds td:first-child{font-size:12px;color:var(--muted);text-transform:capitalize}
.sds td:last-child{text-align:right;font-weight:700}

th.sortable{cursor:pointer}
th.sortable:after{content:"  ↕";font-weight:700;color:rgba(255,255,255,.65)}


/* v5e additions */
.card.info{border:1px solid #d1d5db;background:#f8fafc}
.infoTitle{font-weight:600}
.alert{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fee2e2;color:#b91c1c;font-weight:600}


.smallNote{margin-top:6px; font-size:13px; color:var(--muted)}




/* Cutoffs instruction list: bold + normal size */
.cutoffs ol{font-size:13px;color:var(--muted);}
.cutoffs ol li{font-weight:700;margin-bottom:4px;}

/* File input button styling */
input[type="file"]::file-selector-button{border:1px solid #e6c08f;background:#f8d9b0;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;color:#5a3b12;margin-right:10px;}
input[type="file"]::file-selector-button:hover{background:#f4cf9c;}

.densityStats{position:absolute;left:14px;top:14px;background:rgba(156,163,175,0.35);border-radius:14px;padding:10px 14px;font-weight:700;white-space:pre-line;}


/* Panel A + Panel B side-by-side (desktop) */
.gridAB{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-top:12px}
@media (max-width: 1100px){.gridAB{grid-template-columns:1fr}}

/* Panel D: table + chart side-by-side */
.panelDGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:12px;align-items:stretch}
@media (max-width: 1100px){.panelDGrid{grid-template-columns:1fr}}
.panelSubHead{font-weight:800;font-size:14px;color:#14532d;margin:2px 0 8px} /* dark green */
.panelANote{margin-top:10px}

/* Compact status chip below input area */
.statusRow{margin-top:10px;display:flex;align-items:center;justify-content:flex-start}
.statusChip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:800;font-size:13px;line-height:1.1;background:#fee2e2;color:#b91c1c;border:1px solid rgba(185,28,28,.25)}


/* Panel E box */
.panelEInner .panelSubHead{margin-top:0}

.dataMinMax{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:2px 0 8px;font-size:12px;color:var(--muted)}
.dataMinMax b{color:var(--ink)}


.dataMinMax .minmaxLine{white-space:nowrap;}


/* Panel A course code split */
.codeRow{display:flex; gap:8px; align-items:center;}
.codeAlpha{width:90px; text-transform:uppercase; letter-spacing:1px;}
.codeNum{width:90px;}
.sectionMode{margin-top:10px;}
.modeRow{display:flex; gap:18px; margin:6px 0 10px 0;}
.chk{display:flex; gap:8px; align-items:center; font-size:14px; color:var(--ink);}
.chk input{transform:translateY(1px);}
.coordBlock{margin-top:10px; padding-top:8px; border-top:1px solid var(--line);}

/* Cutoff captions */
.cutoffTopRow{align-items:start;}
.cutoffTopLine{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; gap:10px;}
.cutoffTopLeft{color:var(--muted); font-size:14px;}
.cutoffTopRight{color:var(--muted); font-size:14px; white-space:nowrap;}
.cutoffLabel{display:block;}
.cutoffNotes{margin-top:10px; padding-left:22px;}
/* Mean box styling */
.meanBox{position:absolute; background:rgba(156,163,175,.65); border:1px solid rgba(107,114,128,.9); border-radius:14px; padding:10px 14px; line-height:1.25;}
.meanGpaLine{font-weight:800; color:var(--red); font-size:16px;}
.meanOtherLine{font-weight:400; color:#111; font-size:14px;}
/* N label */
.nLabel{position:absolute; right:12px; top:10px; font-size:16px; color:#111827; background:rgba(255,255,255,.65); padding:4px 8px; border-radius:10px; border:1px solid rgba(107,114,128,.35);}
.nLabel.densityN{color:#2b6cb0; background:rgba(255,255,255,.65);}
/* Density stats pill */
.densityStats{position:absolute; left:12px; top:10px; padding:10px 14px; border-radius:14px; background:rgba(66,153,225,.18); color:#2b6cb0; font-weight:700; white-space:pre-line; border:1px solid rgba(43,108,176,.25);}
.densityTitle{margin-top:16px;}

/* Cutoff pill with percentile tag + +/- steppers */
.cutoffPillWrap{position:relative; display:flex; align-items:center; gap:6px;}
.cutoffPillWrap .cutoffInput{flex:1; width:auto; padding-left:18px;}
.spinBtn{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.18);
  color:#ffffff;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.spinBtn:hover{background:rgba(255,255,255,.26);}
.spinBtn:active{transform:translateY(1px);}
.pcileTag{
  position:absolute;
  left:78px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.70);
  font-weight:700;
  font-size:13px;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}
.cutoffPillWrap{position:relative;}
.cutoffInput{position:relative; z-index:1; padding-right:56px;}


/* Panel C notes subtitle */
.cutoffNotesTitle{
  font-weight:800;
  font-size:14px;
  color:#4b5563; /* dark grey */
  margin:0 0 6px 0;
}
@media (max-width: 520px){
  .pcileTag{
  position:absolute;
  left:78px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.70);
  font-weight:700;
  font-size:13px;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}
.cutoffPillWrap{position:relative;}
.cutoffInput{position:relative; z-index:1; padding-right:56px;}

}

/* Panels F + G side-by-side (match Panel D breakout width) */
/* Align Panel F width with Panel E (same left-column fraction) */
.fgRow{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:start;}
#panelF{padding:14px;}
#panelG{padding:14px;}

/* Panel F: compact headers, no scroll */
#panelF .tableWrap{overflow:visible;}
#panelF table{table-layout:fixed; width:100%;}
#panelF th, #panelF td{padding:6px 8px; font-size:12.5px;}
#panelF th{font-size:12px;}
@media (max-width: 1000px){
  .fgRow{grid-template-columns:1fr;gap:14px;}
}


/* --- FIX: Cutoff +/- buttons visibility + Pctile tag placement --- */
.cutoffPillWrap{gap:10px; align-items:center;}
.cutoffPillWrap .spinBtn{
  border:1px solid rgba(0,0,0,.18) !important;
  background:rgba(255,255,255,.88) !important;
  color:#1f2937 !important;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.cutoffPillWrap .spinBtn:active{transform:translateY(1px);}
.pcileTag{
  position:absolute;
  left:78px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.70);
  font-weight:700;
  font-size:13px;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}
.cutoffPillWrap{position:relative;}
.cutoffInput{position:relative; z-index:1; padding-right:56px;}



/* Feedback link under welcome */
.welcomeFooter{display:flex;justify-content:flex-end;margin-top:8px;}
.feedbackLink{font-size:0.9rem;color:#2b6cb0;text-decoration:underline;}
.feedbackLink:hover{opacity:0.85;}