/* ============================================================
   PSSOU AI-LMS · Design System
   Academic navy + Indian-inspired accents. Light, accessible.
   ============================================================ */
:root{
  --navy-900:#0A1B45; --navy-800:#10275A; --navy-700:#173473; --navy-600:#22459A;
  --navy-500:#2F58BE; --navy-100:#E7EDFB; --navy-50:#F3F6FD;
  --saffron:#E07B39; --saffron-l:#FDF1E7; --saffron-d:#B75E22;
  --teal:#0F7B6C; --teal-l:#E4F4F1;
  --green:#1E7A52; --green-l:#E6F4EC;
  --amber:#B47B00; --amber-l:#FCF3DC;
  --red:#B3261E; --red-l:#FBE9E7;
  --purple:#5B3FA8; --purple-l:#EFEAFB;

  --ink:#111827; --ink-2:#374151; --ink-3:#6B7280; --ink-4:#9CA3AF;
  --line:#E3E8EF; --line-2:#EEF1F6;
  --bg:#F6F8FC; --surface:#FFFFFF; --surface-2:#FAFBFE;

  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;
  --sh-1:0 1px 2px rgba(16,39,90,.06),0 1px 3px rgba(16,39,90,.05);
  --sh-2:0 4px 12px rgba(16,39,90,.08);
  --sh-3:0 12px 32px rgba(16,39,90,.14);
  --nav-w:250px; --top-h:60px;
  --f:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
html[lang="hi"] body{font-family:'Noto Sans Devanagari','Inter',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--f);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--navy-100)}
:focus-visible{outline:2px solid var(--navy-500);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- typography ---------- */
h1,h2,h3,h4{line-height:1.25;color:var(--navy-900);font-weight:650;letter-spacing:-.01em}
h1{font-size:23px} h2{font-size:18px} h3{font-size:15px} h4{font-size:13px}
.muted{color:var(--ink-3)} .small{font-size:12.5px} .xs{font-size:11.5px}
.mono{font-family:var(--fm)}
.up{text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;font-weight:650;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--nav-w);flex:0 0 var(--nav-w);background:var(--navy-900);color:#fff;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60}
.brand{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand .crest{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--saffron),#C74B2E);display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto;box-shadow:inset 0 -2px 6px rgba(0,0,0,.2)}
.brand b{font-size:13.5px;display:block;letter-spacing:.02em}
.brand span{font-size:10.5px;color:#93A5CC;display:block}
.nav{flex:1;overflow-y:auto;padding:8px 10px 20px}
.nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-thumb{background:#2b3f6e;border-radius:3px}
.nav .grp{padding:14px 10px 5px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#7C8FBA;font-weight:650}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#C6D1E8;font-size:13px;font-weight:500;margin-bottom:1px}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.on{background:var(--navy-600);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--saffron)}
.nav a .ic{width:17px;text-align:center;font-size:14px;opacity:.9}
.nav a .cnt{margin-left:auto;background:var(--saffron);color:#fff;border-radius:20px;padding:0 6px;font-size:10.5px;font-weight:700;min-width:18px;text-align:center}
.nav a.on .cnt{background:#fff;color:var(--navy-800)}
.main{flex:1;min-width:0;margin-left:var(--nav-w);display:flex;flex-direction:column}
.topbar{height:var(--top-h);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:40}
.page{padding:20px 24px 56px;max-width:1480px;width:100%}
.hamb{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:34px;height:34px;cursor:pointer}
.scrim{display:none}

/* ---------- grid ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
.g21{grid-template-columns:2fr 1fr} .g12{grid-template-columns:1fr 2fr}
.g31{grid-template-columns:3fr 1.35fr}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}
.col{display:flex;flex-direction:column;gap:10px}
.spacer{flex:1}
.mt{margin-top:14px}.mt2{margin-top:22px}.mb{margin-bottom:12px}

/* ---------- card ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card.pad{padding:16px}
.card-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.card-h h3{flex:1;font-size:14.5px}
.card-b{padding:16px}
.card-f{padding:11px 16px;border-top:1px solid var(--line-2);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 15px;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.tile .lbl{font-size:11.5px;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:6px}
.tile .val{font-size:26px;font-weight:700;color:var(--navy-900);letter-spacing:-.02em;margin-top:5px;font-variant-numeric:tabular-nums}
.tile .sub{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.tile .spark{position:absolute;right:10px;bottom:8px;opacity:.85}
.tile.acc-b{border-top:3px solid var(--navy-600)} .tile.acc-g{border-top:3px solid var(--green)}
.tile.acc-a{border-top:3px solid var(--saffron)} .tile.acc-r{border-top:3px solid var(--red)}
.tile.acc-p{border-top:3px solid var(--purple)} .tile.acc-t{border-top:3px solid var(--teal)}
.hero{background:linear-gradient(120deg,var(--navy-800),var(--navy-600) 60%,#2E5BB8);color:#fff;border-radius:var(--r-lg);padding:20px 22px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-60px;top:-70px;width:230px;height:230px;border-radius:50%;background:rgba(224,123,57,.18)}
.hero h1,.hero h2{color:#fff}
.hero .muted{color:#C3D0EC}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:9px;border:1px solid transparent;background:var(--navy-700);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--navy-800);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:none}
.btn.sec{background:var(--surface);color:var(--navy-800);border-color:var(--line)}
.btn.sec:hover{background:var(--navy-50);border-color:var(--navy-100)}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:transparent}
.btn.ghost:hover{background:var(--line-2);box-shadow:none}
.btn.acc{background:var(--saffron)} .btn.acc:hover{background:var(--saffron-d)}
.btn.ok{background:var(--green)} .btn.danger{background:var(--red)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.lg{padding:11px 20px;font-size:14.5px;border-radius:11px}
.btn.block{width:100%}
.btn[disabled],.btn.dis{opacity:.5;pointer-events:none}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;position:relative;font-size:15px}
.iconbtn:hover{background:var(--navy-50)}
.iconbtn .dot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--saffron);border:2px solid #fff}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:20px;font-size:11.5px;font-weight:650;background:var(--line-2);color:var(--ink-2);white-space:nowrap}
.badge .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-blue{background:var(--navy-100);color:var(--navy-700)}
.b-green{background:var(--green-l);color:var(--green)}
.b-amber{background:var(--amber-l);color:var(--amber)}
.b-red{background:var(--red-l);color:var(--red)}
.b-purple{background:var(--purple-l);color:var(--purple)}
.b-teal{background:var(--teal-l);color:var(--teal)}
.b-saffron{background:var(--saffron-l);color:var(--saffron-d)}
.b-grey{background:#EEF1F6;color:var(--ink-3)}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:550;cursor:pointer;color:var(--ink-2)}
.chip:hover{border-color:var(--navy-500);color:var(--navy-700)}
.chip.on{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.pill-l0{background:var(--red-l);color:var(--red)}
/* Sized by its content, not fixed at 26px. It used to hold only "L3"; now it can
   hold "Not cleared", and a hard width made that text spill out of the table cell. */
.bl{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;
  padding:0 6px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;vertical-align:middle}
.bl0{background:var(--red-l);color:var(--red)} .bl1{background:#FDECE4;color:#B75E22}
.bl2{background:var(--amber-l);color:var(--amber)} .bl3{background:var(--teal-l);color:var(--teal)}
.bl4{background:var(--green-l);color:var(--green)} .bl5{background:var(--navy-100);color:var(--navy-700)}
.bl6{background:var(--purple-l);color:var(--purple)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label{font-size:12px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:11.5px;color:var(--ink-3)}
.inp,select.inp,textarea.inp{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:13.5px;transition:.15s}
.inp:focus{border-color:var(--navy-500);box-shadow:0 0 0 3px var(--navy-100);outline:none}
textarea.inp{resize:vertical;min-height:84px;line-height:1.6}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.search{position:relative;flex:1;max-width:380px}
.search .inp{padding-left:32px}
.search:before{content:"⌕";position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-4);font-size:16px}
.switch{width:38px;height:21px;border-radius:20px;background:#CFD6E2;position:relative;cursor:pointer;border:none;flex:0 0 auto;transition:.2s}
.switch:after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on{background:var(--green)} .switch.on:after{left:19.5px}
.seg{display:inline-flex;background:var(--line-2);border-radius:9px;padding:3px;gap:2px}
.seg button{border:none;background:none;padding:5px 11px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer}
.seg button.on{background:#fff;color:var(--navy-800);box-shadow:var(--sh-1)}

/* ---------- table ---------- */
.tw{overflow-x:auto;border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:650;white-space:nowrap}
tbody td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--navy-50)}
tbody tr.clickable{cursor:pointer}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pager{display:flex;align-items:center;gap:6px;padding:10px 14px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3)}
.pager button{border:1px solid var(--line);background:#fff;border-radius:7px;min-width:29px;height:29px;cursor:pointer;font-size:12.5px}
.pager button.on{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}

/* ---------- live pipeline console ---------- */
.stagerow{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-2)}
.stagerow:last-child{border-bottom:none}
.stagedot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  font-weight:700;flex:0 0 auto;background:var(--line-2);color:var(--ink-4)}
.stagerow.done .stagedot{background:var(--green-l);color:var(--green)}
.stagerow.running .stagedot{background:var(--navy-100);color:var(--navy-700);animation:pulse 1.4s infinite}
.stagerow.failed .stagedot{background:var(--red-l);color:var(--red)}
.taskgrid{display:flex;flex-wrap:wrap;gap:3px}
.taskgrid i{width:9px;height:9px;border-radius:2px;background:var(--line);display:block}
.taskgrid i.done{background:var(--green)} .taskgrid i.running{background:var(--saffron)}
.taskgrid i.failed{background:var(--red)}

/* ---------- purpose strip: tells you what a screen is for ---------- */
.purpose{display:flex;gap:11px;align-items:center;background:linear-gradient(90deg,var(--navy-50),#fff);
  border:1px solid var(--navy-100);border-left:3px solid var(--navy-600);border-radius:var(--r);
  padding:10px 13px;margin-bottom:16px;font-size:13px;color:var(--ink-2)}
.purpose .pi{font-size:16px;flex:0 0 auto;line-height:1}
.purpose>div{flex:1}
.purpose b{color:var(--navy-800)}
.purpose .muted{display:block;margin-top:2px;font-size:12px}
.flowlist{list-style:none;counter-reset:fl;margin:0;padding:0}
.flowlist li{counter-increment:fl;position:relative;padding:0 0 15px 33px}
.flowlist li:before{content:counter(fl);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;
  background:var(--navy-100);color:var(--navy-700);font-size:10.5px;font-weight:700;display:grid;place-items:center}
.flowlist li:after{content:"";position:absolute;left:10px;top:23px;bottom:2px;width:1.5px;background:var(--line)}
.flowlist li:last-child{padding-bottom:0}
.flowlist li:last-child:after{display:none}
.acctrow{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fff;cursor:pointer;transition:.14s}
.acctrow:hover{border-color:var(--navy-500);background:var(--navy-50)}
.navhelp{width:100%;margin-top:16px;background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.22);
  color:#B9C7E4;border-radius:9px;padding:9px;font-size:11.5px;font-weight:600;cursor:pointer;text-align:left}
.navhelp:hover{background:rgba(255,255,255,.13);color:#fff}
@media(max-width:900px){.purpose{font-size:12.5px;padding:9px 11px}.purpose .btn{display:none}}

/* ---------- misc components ---------- */
.pb{height:8px;background:var(--line-2);border-radius:20px;overflow:hidden}
.pb>i{display:block;height:100%;background:linear-gradient(90deg,var(--navy-600),var(--navy-500));border-radius:20px;transition:width .5s}
.pb.g>i{background:linear-gradient(90deg,var(--green),#37A96F)}
.pb.a>i{background:linear-gradient(90deg,var(--saffron),#EFA164)}
.pb.r>i{background:var(--red)}
.pb.thin{height:5px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);margin-bottom:10px;flex-wrap:wrap}
.crumbs a:hover{color:var(--navy-600);text-decoration:underline}
.crumbs span.sep{color:var(--ink-4)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:none;background:none;padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--navy-700)}
.tabs button.on{color:var(--navy-800);border-bottom-color:var(--navy-700)}
.alert{display:flex;gap:11px;padding:12px 14px;border-radius:var(--r);border:1px solid;align-items:flex-start;font-size:13px}
.alert .ai{font-size:16px;line-height:1.2}
.al-info{background:var(--navy-50);border-color:var(--navy-100);color:var(--navy-800)}
.al-warn{background:var(--amber-l);border-color:#F0DFB0;color:#6E4C00}
.al-err{background:var(--red-l);border-color:#F3CFCC;color:#7A1B15}
.al-ok{background:var(--green-l);border-color:#C7E6D5;color:#0F5334}
.empty{text-align:center;padding:44px 20px;color:var(--ink-3)}
.empty .ei{font-size:34px;opacity:.45;margin-bottom:8px}
.empty h3{margin-bottom:5px}
.sk{background:linear-gradient(90deg,#EDF0F6 25%,#F6F8FC 50%,#EDF0F6 75%);background-size:200% 100%;animation:sh 1.3s infinite;border-radius:6px;height:12px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spin{width:15px;height:15px;border:2px solid var(--navy-100);border-top-color:var(--navy-600);border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.tip{position:relative;cursor:help;border-bottom:1px dotted var(--ink-4)}
.tip:hover:after{content:attr(data-tip);position:absolute;bottom:135%;left:50%;transform:translateX(-50%);background:var(--navy-900);color:#fff;padding:6px 9px;border-radius:7px;font-size:11.5px;white-space:nowrap;z-index:99;box-shadow:var(--sh-2);font-weight:500}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--navy-100);color:var(--navy-700);display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 auto}
.avatar.lg{width:52px;height:52px;font-size:17px}
.avatar.sa{background:var(--saffron-l);color:var(--saffron-d)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:13px}
.kv dt{color:var(--ink-3);font-weight:550} .kv dd{font-weight:550;color:var(--ink)}
.list-row{display:flex;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:var(--surface-2)}

/* ---------- modal / drawer / toast ---------- */
.ov{position:fixed;inset:0;background:rgba(10,27,69,.5);backdrop-filter:blur(2px);z-index:200;display:grid;place-items:center;padding:16px;animation:fade .18s}
@keyframes fade{from{opacity:0}}
.modal{background:#fff;border-radius:16px;width:min(620px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--sh-3);animation:pop .2s}
.modal.wide{width:min(940px,100%)} .modal.narrow{width:min(430px,100%)}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}}
.modal-h{padding:15px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;flex:0 0 auto}
.modal-h h2{flex:1;font-size:16px}
/* min-height:0 is required — without it a flex child refuses to shrink below its
   content height, so overflow-y never engages and long panels cannot be scrolled. */
.modal-b{padding:18px;overflow-y:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal-f{padding:13px 18px;border-top:1px solid var(--line-2);display:flex;gap:9px;justify-content:flex-end;background:var(--surface-2);border-radius:0 0 16px 16px;flex:0 0 auto}
.x{width:30px;height:30px;border-radius:8px;border:none;background:var(--line-2);cursor:pointer;font-size:14px;color:var(--ink-3)}
.x:hover{background:#E2E7F0}
.drawer-ov{position:fixed;inset:0;background:rgba(10,27,69,.4);z-index:200;animation:fade .18s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(500px,94vw);height:100%;max-height:100%;
  background:#fff;box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:slide .22s;z-index:201}
.drawer .modal-b{flex:1 1 0;min-height:0;overflow-y:auto}
body.locked{overflow:hidden}
@keyframes slide{from{transform:translateX(100%)}}
.toast-root{position:fixed;bottom:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{background:var(--navy-900);color:#fff;padding:11px 15px;border-radius:11px;box-shadow:var(--sh-3);font-size:13px;display:flex;gap:9px;align-items:center;min-width:250px;animation:tin .22s;pointer-events:auto}
@keyframes tin{from{transform:translateX(24px);opacity:0}}
.toast.ok{background:var(--green)} .toast.err{background:var(--red)} .toast.warn{background:var(--amber)}

/* ---------- stepper (7-step) ---------- */
.stepper{display:flex;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;overflow-x:auto;box-shadow:var(--sh-1)}
.step{flex:1;min-width:112px;display:flex;flex-direction:column;gap:5px;padding:8px 9px;border-radius:10px;position:relative;cursor:default;border:1px solid transparent}
.step .n{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;background:var(--line-2);color:var(--ink-3)}
.step .t{font-size:11.5px;font-weight:650;color:var(--ink-3);line-height:1.3}
.step .s{font-size:10px;color:var(--ink-4);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.step.done .n{background:var(--green);color:#fff} .step.done .t{color:var(--green)}
.step.cur{background:var(--navy-50);border-color:var(--navy-100)}
.step.cur .n{background:var(--navy-700);color:#fff;box-shadow:0 0 0 4px var(--navy-100)}
.step.cur .t{color:var(--navy-800)}
.step.lock{opacity:.55} .step.lock .n:after{content:"🔒";font-size:9px}
.step.lock .n{background:transparent;border:1px dashed var(--ink-4)}
.step.avail{cursor:pointer} .step.avail:hover{background:var(--navy-50)}
.step+.step:before{content:"";position:absolute;left:-1px;top:19px;width:1px;height:22px;background:var(--line)}

/* ---------- lecture / reader ---------- */
.reader{background:#FFFDF8;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px;line-height:1.85;font-size:15px;color:#1F2937;max-width:760px;margin:0 auto}
.reader h2{font-size:19px;margin-bottom:12px}
.reader h3{font-size:15.5px;margin:20px 0 8px}
.reader p{margin-bottom:13px} .reader ul{margin:0 0 13px 20px} .reader li{margin-bottom:6px}
.reader .callout{background:var(--navy-50);border-left:3px solid var(--navy-600);padding:11px 14px;border-radius:0 8px 8px 0;margin:14px 0;font-size:14px}
.reader.serif{font-family:Georgia,'Noto Serif',serif}
.player{background:#0B1220;border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:16/9;display:grid;place-items:center;color:#fff}
.player .poster{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#1B3160,#0B1220);display:grid;place-items:center}
.player .cc{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);padding:6px 13px;border-radius:7px;font-size:13.5px;max-width:80%;text-align:center}
.pctl{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.85));padding:24px 13px 10px}
.pbar{height:5px;background:rgba(255,255,255,.25);border-radius:20px;cursor:pointer;position:relative;margin-bottom:9px}
.pbar>i{display:block;height:100%;background:var(--saffron);border-radius:20px;position:relative}
.pbar>i:after{content:"";position:absolute;right:-5px;top:-3px;width:11px;height:11px;border-radius:50%;background:#fff}
.pbar .bk{position:absolute;top:-3px;width:3px;height:11px;background:#FFD166;border-radius:2px}
.pctl .r{display:flex;align-items:center;gap:11px;color:#fff;font-size:12.5px}
.pctl button{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;opacity:.9}
.pctl button:hover{opacity:1}
.pctl select{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:6px;padding:3px 6px;font-size:11.5px}
.code-ed{background:#0D1117;border-radius:10px;overflow:hidden;border:1px solid #22304A}
.code-ed .bar{display:flex;align-items:center;gap:8px;padding:7px 11px;background:#161B26;border-bottom:1px solid #22304A;color:#9DA9BE;font-size:11.5px}
.code-ed textarea{width:100%;background:#0D1117;color:#D6E1F5;border:none;font-family:var(--fm);font-size:12.5px;line-height:1.65;padding:12px;min-height:190px;resize:vertical;outline:none;tab-size:2}
.console{background:#080B11;color:#B7C4DA;font-family:var(--fm);font-size:12px;padding:11px;min-height:80px;max-height:200px;overflow:auto;border-top:1px solid #22304A;white-space:pre-wrap}
.console .ok{color:#5FD39A} .console .er{color:#FF8A80} .console .dim{color:#5B6A85}
.opt{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;cursor:pointer;transition:.13s;background:#fff}
.opt:hover{border-color:var(--navy-500);background:var(--navy-50)}
.opt.sel{border-color:var(--navy-600);background:var(--navy-50);box-shadow:0 0 0 3px var(--navy-100)}
.opt.right{border-color:var(--green);background:var(--green-l)}
.opt.wrong{border-color:var(--red);background:var(--red-l)}
.opt .k{width:24px;height:24px;border-radius:7px;background:var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto;color:var(--ink-2)}
.opt.sel .k{background:var(--navy-700);color:#fff}
.opt.right .k{background:var(--green);color:#fff} .opt.wrong .k{background:var(--red);color:#fff}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ba .side{border:1px solid var(--line);border-radius:11px;padding:13px;background:var(--surface-2)}
.ba .side.after{border-color:#C7E6D5;background:var(--green-l)}
.ba .side .up{margin-bottom:7px}

/* ---------- pipeline (SLM) ---------- */
.pipe{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px}
.pnode{flex:1;min-width:118px;text-align:center;padding:11px 8px;border-radius:10px;position:relative}
.pnode .pc{width:30px;height:30px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font-size:13px;background:var(--line-2);color:var(--ink-3);border:2px solid transparent}
.pnode.done .pc{background:var(--green);color:#fff}
.pnode.run .pc{background:var(--navy-100);color:var(--navy-700);border-color:var(--navy-600);animation:pulse 1.4s infinite}
.pnode.fail .pc{background:var(--red);color:#fff}
@keyframes pulse{50%{box-shadow:0 0 0 6px var(--navy-100)}}
.pnode .pt{font-size:11px;font-weight:650;color:var(--ink-2)}
.pnode .ps{font-size:10px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.pnode+.pnode:before{content:"";position:absolute;left:-50%;top:26px;width:100%;height:2px;background:var(--line);z-index:0}
.pnode.done+.pnode:before,.pnode.done:before{background:var(--green)}
.drop{border:2px dashed var(--line);border-radius:var(--r-lg);padding:30px;text-align:center;background:var(--surface-2);cursor:pointer;transition:.15s}
.drop:hover{border-color:var(--navy-500);background:var(--navy-50)}

/* ---------- webinar / cert ---------- */
.wcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:15px;background:#fff;position:relative;overflow:hidden}
.wcard.lock{background:repeating-linear-gradient(135deg,#FAFBFE,#FAFBFE 9px,#F4F6FB 9px,#F4F6FB 18px);color:var(--ink-3)}
.wcard .slot{position:absolute;top:11px;right:13px;font-size:30px;font-weight:800;color:var(--navy-50);letter-spacing:-.04em}
.cert{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.cert .cimg{height:118px;background:linear-gradient(135deg,var(--navy-800),var(--navy-600));position:relative;display:grid;place-items:center;color:#fff;text-align:center}
.cert .cimg:before{content:"";position:absolute;inset:8px;border:1.5px solid rgba(255,255,255,.3);border-radius:8px}
.cert .cimg .seal{position:absolute;bottom:8px;right:10px;width:32px;height:32px;border-radius:50%;background:var(--saffron);display:grid;place-items:center;font-size:14px}

/* ---------- offline bar ---------- */
.offbar{background:var(--amber-l);border-bottom:1px solid #F0DFB0;color:#6E4C00;padding:6px 20px;font-size:12.5px;display:flex;gap:10px;align-items:center;font-weight:550}
.offbar.sync{background:var(--navy-50);border-color:var(--navy-100);color:var(--navy-800)}
.offbar.ok{background:var(--green-l);border-color:#C7E6D5;color:#0F5334}
.netdot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-l)}
.netdot.off{background:var(--amber);box-shadow:0 0 0 3px var(--amber-l)}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-art{background:linear-gradient(150deg,var(--navy-900),var(--navy-700) 55%,#22459A);color:#fff;padding:46px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-art:after{content:"";position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;border-radius:50%;background:rgba(224,123,57,.16)}
.auth-art:before{content:"";position:absolute;left:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.05)}
.auth-form{display:grid;place-items:center;padding:34px;background:var(--surface)}
.auth-box{width:min(400px,100%)}
.otpwrap{display:flex;gap:8px}
.otpwrap input{width:46px;height:52px;text-align:center;font-size:20px;font-weight:700;border:1.5px solid var(--line);border-radius:10px}
.otpwrap input:focus{border-color:var(--navy-600);box-shadow:0 0 0 3px var(--navy-100);outline:none}
.rolecard{border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;text-align:center;background:#fff;transition:.15s}
.rolecard:hover{border-color:var(--navy-500)}
.rolecard.on{border-color:var(--navy-700);background:var(--navy-50);box-shadow:0 0 0 3px var(--navy-100)}
.rolecard .ri{font-size:19px}
.rolecard b{display:block;font-size:12.5px;margin-top:3px}

/* ---------- responsive ---------- */
.mobonly{display:none}
@media(max-width:1180px){.g5,.g6{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}.g31,.g21,.g12{grid-template-columns:1fr}}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:.24s;box-shadow:var(--sh-3)}
  body.navopen .sidebar{transform:none}
  body.navopen .scrim{display:block;position:fixed;inset:0;background:rgba(10,27,69,.45);z-index:55}
  .main{margin-left:0}
  .hamb{display:grid;place-items:center}
  .page{padding:14px 13px 80px}
  .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}.auth-art{display:none}
  .kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:8px}
  .ba{grid-template-columns:1fr}
  h1{font-size:19px}
  .mobonly{display:block}
  .deskonly{display:none!important}
  .reader{padding:18px}
  .modal-f{flex-direction:column-reverse}.modal-f .btn{width:100%}
  .tabbar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:70;padding:5px 2px calc(5px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;text-align:center;padding:5px 0;font-size:9.5px;color:var(--ink-3);font-weight:600}
  .tabbar a .ic{display:block;font-size:17px;margin-bottom:1px}
  .tabbar a.on{color:var(--navy-700)}
}
@media(min-width:901px){.tabbar{display:none}}
@media print{.sidebar,.topbar,.tabbar{display:none}.main{margin:0}}

/* ============================================================
   SUBJECT CALENDAR
   A month grid that has to stay readable when a day holds three lectures
   and when it holds none. Cells are a fixed minimum height so the grid does
   not jump about as lectures are added.
   ============================================================ */
.calwrap{margin-top:4px}
.calbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.callegend{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);font-weight:600}
.callegend .lg{width:11px;height:11px;border-radius:3px;display:inline-block}
.lg.live,.lg.done{background:var(--green)}
.lg.ready,.lg.open{background:var(--navy-600)}
.lg.draft{background:var(--ink-4)}
.lg.locked{background:var(--line);border:1px solid var(--ink-4)}

.calgrid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.calgrid-head span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink-4);text-align:center;padding:2px 0}

.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calday{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  min-height:104px;padding:7px;display:flex;flex-direction:column;gap:5px;transition:border-color .15s}
.calday.out{background:var(--surface-2);opacity:.55}
.calday.today{border-color:var(--navy-500);box-shadow:0 0 0 2px var(--navy-100)}
.calday.has{background:#fff}
.calday:hover{border-color:var(--navy-500)}
.cd-head{display:flex;align-items:center;gap:5px}
.cd-num{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.cd-today{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--navy-600);background:var(--navy-50);padding:1px 5px;border-radius:4px}
.cd-add{margin-left:auto;width:20px;height:20px;border-radius:6px;border:1px dashed var(--line);
  background:transparent;color:var(--ink-4);cursor:pointer;font-size:14px;line-height:1;
  display:grid;place-items:center;opacity:0;transition:.15s}
.calday:hover .cd-add,.calday.has .cd-add{opacity:1}
.cd-add:hover{background:var(--navy-600);border-color:var(--navy-600);color:#fff}
.cd-body{display:flex;flex-direction:column;gap:4px}

.calcard{text-align:left;width:100%;border:1px solid var(--line);border-left-width:3px;
  border-radius:7px;background:#fff;padding:6px 7px;cursor:pointer;display:flex;
  flex-direction:column;gap:3px;transition:.15s}
.calcard:hover{box-shadow:var(--sh-1);transform:translateY(-1px)}
.calcard.live,.calcard.done{border-left-color:var(--green);background:var(--green-l)}
.calcard.ready,.calcard.open{border-left-color:var(--navy-600);background:var(--navy-50)}
.calcard.draft{border-left-color:var(--ink-4)}
.calcard.retry{border-left-color:var(--amber);background:var(--amber-l)}
.calcard.locked{border-left-color:var(--line);background:var(--surface-2);cursor:not-allowed;opacity:.7}
.cc-title{font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.cc-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  padding:1px 5px;border-radius:4px}
.cc-tag.ok{background:var(--green);color:#fff}
.cc-tag.go{background:var(--navy-600);color:#fff}
.cc-tag.draft{background:var(--line);color:var(--ink-3)}
.cc-tag.lock{background:var(--line-2);color:var(--ink-3)}
.cc-sub{font-size:9.5px;color:var(--ink-4);font-weight:600}
.cc-sub.warn{color:var(--red)}

@media(max-width:900px){
  .calgrid,.calgrid-head{grid-template-columns:repeat(7,minmax(96px,1fr));
    overflow-x:auto;padding-bottom:4px}
  .calday{min-height:88px}
  .cd-add{opacity:1}
}

/* ============================================================
   LECTURE BUILDER
   Four numbered steps down the page. The number column is what makes the
   order obvious without a wizard.
   ============================================================ */
.bstep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  margin-bottom:16px;overflow:hidden;box-shadow:var(--sh-1)}
.bstep-h{display:flex;align-items:center;gap:13px;padding:15px 18px;
  border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.bstep-h > div{flex:1;min-width:0}
.bstep-h b{font-size:15px}
.bnum{width:30px;height:30px;border-radius:50%;background:var(--navy-600);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0}
.bstep-b{padding:18px}

/* ============================================================
   DOUBT ASSISTANT
   ============================================================ */
.tutor-thread{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.tutor-empty{text-align:center;padding:26px 12px;color:var(--ink-3)}
.tutor-turn{display:flex;flex-direction:column;gap:4px}
.tt-who{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink-4)}
.tutor-turn.you .tt-body{background:var(--navy-600);color:#fff;align-self:flex-start;
  padding:9px 13px;border-radius:12px 12px 12px 3px;max-width:82%}
.tutor-turn.you{align-items:flex-start}
.tutor-turn.ai .tt-body{background:#fff;border:1px solid var(--line);padding:12px 14px;
  border-radius:12px 12px 3px 12px}
.tt-body.md p{margin:0 0 8px}
.tt-body.md h2,.tt-body.md h3{font-size:13.5px;margin:12px 0 5px}
.tt-body.md ul,.tt-body.md ol{margin:0 0 8px 18px}
.tt-body.md li{margin-bottom:3px}
.tt-body.md code{background:var(--line-2);padding:1px 5px;border-radius:4px;
  font-family:var(--fm);font-size:12px}
.tt-body.md pre{background:var(--navy-900);color:#E7EDFB;padding:11px 13px;border-radius:8px;
  overflow-x:auto;margin:0 0 8px}
.tt-body.md pre code{background:none;color:inherit;padding:0}
.tt-src{margin-top:9px;padding-top:8px;border-top:1px solid var(--line-2);
  font-size:10.5px;color:var(--ink-4);font-weight:600}
.tt-src span{color:var(--navy-600)}
.tt-src.warn{color:var(--amber)}
.tutor-ask{display:flex;gap:9px;align-items:flex-start}
.tutor-ask textarea{flex:1;resize:vertical}

/* ============================================================
   LECTURE SUBMIT BAR
   Sits at the end of the lecture. Deliberately quiet until it can
   actually be pressed, so it never invites a click that will fail.
   ============================================================ */
.submitbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:22px;padding:18px 22px;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px dashed var(--line)}
.submitbar.ready{background:var(--green-l);border:1px solid var(--green);border-style:solid}
.submitbar.done{background:var(--navy-50);border:1px solid var(--navy-100);border-style:solid}
.submitbar b{font-size:15px}

/* Generated study material is Markdown, so the reader needs real prose styles. */
.reader.md h1,.reader.md h2,.reader.md h3{margin:22px 0 9px;line-height:1.3}
.reader.md h1{font-size:22px}
.reader.md h2{font-size:18px}
.reader.md h3{font-size:15.5px}
.reader.md p{margin:0 0 13px}
.reader.md ul,.reader.md ol{margin:0 0 13px 22px}
.reader.md li{margin-bottom:5px}
.reader.md code{background:var(--line-2);padding:1.5px 6px;border-radius:4px;
  font-family:var(--fm);font-size:.88em}
.reader.md pre{background:var(--navy-900);color:#E7EDFB;padding:14px 16px;
  border-radius:10px;overflow-x:auto;margin:0 0 14px}
.reader.md pre code{background:none;color:inherit;padding:0}
.reader.md blockquote{border-left:3px solid var(--navy-500);padding:2px 0 2px 15px;
  margin:0 0 13px;color:var(--ink-2)}
.reader.md table{width:100%;border-collapse:collapse;margin:0 0 14px}
.reader.md th,.reader.md td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.reader.md th{background:var(--surface-2);font-weight:650}
.reader.md hr{border:0;border-top:1px solid var(--line);margin:20px 0}

/* "Not cleared" is a word, not a level, so it must not wear a level's chip. */
.bl.bl0{background:var(--amber-l);color:var(--amber);border:1px solid var(--amber);
  font-size:10px;padding:0 9px;letter-spacing:0;text-transform:none}

/* ------------------------------------------------------------------
   TABLE ROBUSTNESS
   Cells hold badges, progress bars and two-line labels. Without these,
   a long value stretches the row until content escapes the card.
   ------------------------------------------------------------------ */
tbody td{max-width:340px;overflow-wrap:anywhere}
tbody td .badge,tbody td .bl{max-width:100%}
/* Anything with its own inline min-width (progress bars) must still fit. */
tbody td .pb{min-width:60px}
/* Numeric and status columns should never wrap mid-value. */
td.num,th.num{white-space:nowrap}
/* A row of chips wraps onto a second line instead of pushing the row wider. */
tbody td .row{flex-wrap:wrap}

/* ============================================================
   ASSESSMENT LADDER
   Which level the learner is on, and what is still above them. The old
   unlabelled strip left people unsure where they were mid-assessment.
   ============================================================ */
.ladder{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  background:var(--surface-2);margin-bottom:6px}
.ladder-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap;margin-bottom:10px}
.ladder-rungs{display:flex;gap:6px}
.rung{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;
  border-radius:8px;background:#fff;border:1.5px solid var(--line);transition:.15s}
.rung .rn{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:var(--line-2);color:var(--ink-3)}
.rung .rl{font-size:9.5px;font-weight:600;color:var(--ink-4);text-align:center;line-height:1.2}
.rung.done{background:var(--green-l);border-color:var(--green)}
.rung.done .rn{background:var(--green);color:#fff}
.rung.done .rl{color:var(--green)}
.rung.now{background:var(--navy-50);border-color:var(--navy-600);
  box-shadow:0 0 0 3px var(--navy-100)}
.rung.now .rn{background:var(--navy-600);color:#fff}
.rung.now .rl{color:var(--navy-700)}
@media(max-width:640px){ .rung .rl{display:none} }

/* ==================================================================
   LIVE SESSIONS
   The same month grid as the teaching calendar, carrying sessions
   instead of lectures. A session card leads with its time, because on
   a day with three of them the time is what you are scanning for.
   ================================================================== */
.calcard.ses{gap:2px}
.cc-when{font-size:10.5px;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums;letter-spacing:.2px}
.cc-when .dash{color:var(--ink-4);margin:0 1px}
.calcard.ses.open{border-left-color:var(--navy-600);background:var(--navy-50)}
.calcard.ses.now{border-left-color:var(--green);background:var(--green-l);
  box-shadow:0 0 0 2px rgba(30,122,82,.16)}
.calcard.ses.now .cc-when{color:var(--green)}
.calcard.ses.done{border-left-color:var(--teal);background:var(--teal-l)}
.calcard.ses.draft{border-left-color:var(--ink-4);background:var(--surface-2)}
.calcard.ses.cancelled{border-left-color:var(--line);background:var(--surface-2);opacity:.65}
.calcard.ses.cancelled .cc-title{text-decoration:line-through;color:var(--ink-4)}
/* Someone else's session: shown so a busy hour is visibly busy, not to be opened. */
.calcard.ses.busy{border-left-color:var(--ink-4);background:repeating-linear-gradient(
  135deg,var(--surface-2),var(--surface-2) 5px,#fff 5px,#fff 10px);opacity:.85}
.calcard.ses.busy .cc-title{color:var(--ink-3);font-weight:500}
.cc-tag.live{background:var(--green);color:#fff}
.cc-tag.busy{background:var(--ink-4);color:#fff}
.lg.ses-open{background:var(--navy-600)}
.lg.ses-now{background:var(--green)}
.lg.ses-done{background:var(--teal)}
.lg.ses-draft{background:var(--ink-4)}
.lg.ses-cancelled{background:var(--line);border:1px solid var(--ink-4)}
.lg.ses-busy{background:repeating-linear-gradient(135deg,var(--ink-4),var(--ink-4) 2px,
  #fff 2px,#fff 4px)}

/* The next session, above the grid — the one thing most people came for. */
.nextses{display:flex;align-items:center;gap:14px;padding:12px 15px;margin-bottom:14px;
  border:1px solid var(--navy-100);background:var(--navy-50);border-radius:12px}
.nextses.live{border-color:#BFE3D0;background:var(--green-l)}
.ns-when{display:flex;flex-direction:column;min-width:112px;line-height:1.35}
.ns-when b{font-size:13px}
.ns-when span{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Subject picker — the control that decides who is in the session. */
.subjpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px;
  max-height:220px;overflow:auto;padding:2px}
.subjopt{display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:#fff;transition:.15s}
.subjopt:hover{border-color:var(--navy-100);background:var(--navy-50)}
.subjopt.on{border-color:var(--navy-600);background:var(--navy-50);
  box-shadow:0 0 0 2px var(--navy-100)}

/* Availability — busy blocks and the free slots you can click. */
.availbox{border:1px solid var(--line);border-radius:11px;padding:12px 13px;
  background:var(--surface-2)}
.busyrow{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--amber)}
.slotwrap{display:flex;flex-wrap:wrap;gap:6px}
.slotchip{font-size:11.5px;font-weight:650;padding:5px 10px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  font-variant-numeric:tabular-nums;transition:.12s}
.slotchip:hover{border-color:var(--navy-600);color:var(--navy-700)}
.slotchip.on{background:var(--navy-600);border-color:var(--navy-600);color:#fff}

.rosterbox{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px}

/* ==================================================================
   PREREQUISITE CHECK (step 1)
   Three plain questions with three plain answers. The buttons are
   deliberately large and worded, not a 1-5 scale: "partly" is a real
   answer and people give it honestly.
   ================================================================== */
.prereq-q{border:1px solid var(--line);border-radius:11px;padding:13px 14px;background:#fff}
.prereq-q .conf{display:flex;gap:7px;flex-wrap:wrap}
.confbtn{font-size:12px;font-weight:650;padding:6px 13px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);transition:.14s}
.confbtn:hover:not(:disabled){border-color:var(--navy-600);color:var(--navy-700)}
.confbtn:disabled{cursor:default;opacity:.75}
.confbtn.yes.on{background:var(--green);border-color:var(--green);color:#fff}
.confbtn.partly.on{background:var(--amber);border-color:var(--amber);color:#fff}
.confbtn.no.on{background:var(--red);border-color:var(--red);color:#fff}

/* ==================================================================
   PRINT
   The PDF button is the browser's own print pipeline, so the page has
   to become a document: no shell, no navigation, no controls, and
   nothing that only makes sense when you can click it.
   ================================================================== */
@media print{
  @page{ margin:14mm }
  body{background:#fff!important}
  .sidebar,.topbar,.mobtabs,.scrim,.drawer,.toast,.modal-backdrop,
  .submitbar,.demobar,.offlinebar,.purpose,.helpbtn{display:none!important}
  .shell,.main,.page{display:block!important;margin:0!important;padding:0!important;
    width:auto!important;max-width:none!important}
  .card{break-inside:avoid;box-shadow:none!important;border:1px solid #ccc!important}
  .btn,.iconbtn,.chip,.seg,.search,.cd-add,.pager{display:none!important}
  /* Tables must not be cut mid-row, and the header repeats on every page. */
  table{page-break-inside:auto} tr{break-inside:avoid} thead{display:table-header-group}
  a[href]::after{content:''}          /* no URL noise after every link */
  .grid{display:block!important}
  .grid>*{margin-bottom:10px}
  .calgrid{display:grid!important}
}
/* While printing, hide the interactive bits that are not in the print sheet. */
body.printing .tutorfab,body.printing .netdot{display:none}

/* A booked slot is shown in place rather than left out, so the gaps in the
   day have a visible reason. It is not clickable and says whose session it is. */
.slotchip.taken{background:var(--red-l);border-color:#F0C9C5;color:#9A3228;
  cursor:not-allowed;text-decoration:line-through;opacity:.9}
.slotchip.taken:hover{border-color:#F0C9C5;color:#9A3228}
.lg.slot-free{background:#fff;border:1px solid var(--line)}
.lg.slot-taken{background:var(--red-l);border:1px solid #F0C9C5}

/* A field whose value is already decided by where you are (the programme on
   the course form). Shown, not editable, and not a disabled input — a disabled
   dropdown reads as broken. */
.lockedfield{display:flex;flex-direction:column;gap:2px;padding:9px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}

/* An elective sitting in "Open for enrolment". One that was put in front of
   this learner by name is marked out from one that is merely open to them —
   the difference decides whether they are being asked or just permitted. */
.card.elective{border-style:dashed}
.card.elective.offered{border-style:solid;border-color:var(--amber);
  background:linear-gradient(180deg,var(--amber-l),#fff 42%)}

/* Delete, on a lecture card in the teaching calendar. Hidden until the card is
   hovered so a month view is not a wall of bins, and it stops the click from
   reaching the card underneath. */
.calcard{position:relative}
.cc-del{position:absolute;top:4px;right:4px;border:none;background:transparent;
  cursor:pointer;font-size:11px;line-height:1;padding:3px;border-radius:5px;
  opacity:0;transition:.12s}
.calcard:hover .cc-del,.calcard:focus-within .cc-del{opacity:.55}
.cc-del:hover{opacity:1;background:var(--red-l)}
.cc-title{padding-right:16px}