/* The course panel's content: the app's side panel (index.html) and the static
   course pages (build-pages.js). Colours come from each page's :root. */

/* Entry meter, shared with the results table. */
/* Compact six-step entry meter. Filled segments run from broad-entry green
   through to the highest-entry pink. The tooltip carries the written label. */
.entry-meter{display:inline-flex;align-items:center;gap:3px;height:16px;
  vertical-align:middle}
.entry-meter i{display:block;width:5px;height:14px;border-radius:1px;
  background:#2e3036;opacity:.55}
.entry-meter i.on{opacity:1}
.entry-meter i.s1.on{background:#2f8a6e}
.entry-meter i.s2.on{background:#3f94a2}
.entry-meter i.s3.on{background:#4f8fc9}
.entry-meter i.s4.on{background:#777fd8}
.entry-meter i.s5.on{background:#a66ecf}
.entry-meter i.s6.on{background:#d35f9b}

.pbox .ehead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pbox .eband{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:600;white-space:nowrap}
.eband.b1{color:#7fb8a6} .eband.b2{color:#84bcc8} .eband.b3{color:#92b6dc}
.eband.b4{color:#a7abe4} .eband.b5{color:#c4a3e0} .eband.b6{color:#e49bc0}
/* Label/value grid — reads as a spec sheet rather than a paragraph. */
/* Spec-sheet grid. Rows get a hairline so the eye can track across the gap
   from label to value. */
.kv{display:grid;grid-template-columns:84px 1fr;gap:0 12px;font-size:12.5px}
.kv dt{color:var(--dim);padding:5px 0;border-top:1px solid var(--line2)}
.kv dd{margin:0;color:var(--text);padding:5px 0;border-top:1px solid var(--line2)}
.kv dt:first-child,.kv dt:first-child+dd{border-top:0}
.big{font-size:23px;font-weight:650;color:var(--accent2);line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.big.prev{color:#7fa8c9;font-weight:600}
.biglab{color:var(--dim);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:5px;font-weight:600}
.pbox{background:var(--panel2);border:1px solid var(--line);border-radius:0;
  padding:12px 14px;margin-bottom:16px}
.pbox .sub{margin-top:6px;line-height:1.5}
/* A borrowed entry figure is the one thing in the box that may be wrong for
   this cycle, so it gets the warning colour rather than another dim line. */
.pbox .stale{margin-top:10px;padding:7px 10px;border-left:3px solid var(--warn);
  background:rgba(255,176,32,.09);color:#f3dcae;font-size:12.5px;line-height:1.45}
.pbox .stale b{color:var(--warn);font-weight:650}
.pbox .stale a{color:var(--warn);text-decoration:underline;text-underline-offset:2px}
.psec{color:var(--dim);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.6px;margin:18px 0 6px;font-weight:600}
.psec:first-child{margin-top:0}

/* ---- Discover Uni figures in the panel ------------------------------
   Most figures are pooled beyond the course, so every block says what it
   covers: a chip for the level, then students and year underneath. Green
   is this course alone, amber the subject at this university. */
.hsub{display:flex;align-items:center;gap:8px;margin:16px 0 7px;font-size:12.5px;color:var(--text)}
.hsub:first-child{margin-top:0}
.hsub .scopechip{margin-left:auto}
.scopechip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
  padding:1px 6px;border:1px solid;letter-spacing:.2px;white-space:nowrap;cursor:help}
.scopechip::before{content:"";width:6px;height:6px;background:currentColor}
.scopechip.course{color:#2bd4a4;border-color:#1f5a4b;background:#12302a}
.scopechip.subj{color:#ffb020;border-color:#5c4513;background:#33280f}
.scope{font-size:11px;color:#7d8899;margin-top:7px;line-height:1.45}
.hl{font-size:13px;line-height:1.45;margin:8px 0 0}
.hl b{font-weight:650}
.hlegend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--dim);margin-top:5px}
.hlegend i{display:inline-block;vertical-align:middle;margin-right:5px}
.hempty{border:1px dashed var(--line);padding:10px 12px;font-size:12.5px;color:var(--dim);
  line-height:1.5;margin-bottom:4px}
.hload{font-size:12px;color:var(--dim);padding:4px 0}
.meters{display:grid;grid-template-columns:minmax(0,1fr) 36px 40px;gap:6px 10px;
  align-items:center;font-size:12.5px}
.meters .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.meters .cmp{text-align:right;font-variant-numeric:tabular-nums;color:#7d8899;font-size:11px}
.meters .colhead{font-size:10px;color:#7d8899;text-transform:uppercase;letter-spacing:.5px;text-align:right}
.track{grid-column:1 / -1;height:5px;background:var(--line2);position:relative;margin:-3px 0 4px}
.track .fill{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.track .tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--dim)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.stat{background:var(--panel2);padding:9px 10px}
.stat .n{font-size:19px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.stat .l{font-size:11px;color:var(--dim);line-height:1.3;margin-top:2px}
.stat .c{font-size:10.5px;color:#7d8899;margin-top:4px;font-variant-numeric:tabular-nums}
.sal{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;gap:4px 10px;align-items:center;font-size:12px}
.sal .when{color:var(--dim)}
.sal .med{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.salbar{position:relative;height:18px}
.salbar .axis{position:absolute;left:0;right:0;top:8px;height:1px;background:var(--line)}
.salbar .iqr{position:absolute;top:4px;height:9px;background:#2f4f7a}
.salbar .dot{position:absolute;top:2px;width:3px;height:13px;background:var(--accent);margin-left:-1px}
.salbar .sec{position:absolute;top:0;width:2px;height:17px;background:var(--dim);margin-left:-1px}
.salaxis{grid-column:2;display:flex;justify-content:space-between;font-size:10px;color:#7d8899;
  font-variant-numeric:tabular-nums}
.stack{display:flex;height:9px;margin:4px 0 6px;background:var(--line2)}
.stack span{display:block}
.jobs{list-style:none;margin:10px 0 0;padding:0;font-size:12.5px}
.jobs li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px solid var(--line2)}
.jobs li:first-child{border-top:0}
.jobs b{font-variant-numeric:tabular-nums;font-weight:600}
.acc{font-size:12.5px;line-height:1.45;margin-top:9px;color:var(--text)}
.acc + .acc{margin-top:6px}

.cextra{color:#7d8696;font-size:12px}
.psubj{line-height:1.9}
.big.none{color:var(--dim);font-size:18px;font-weight:600}