@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/Lato-400i.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Lato-700.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/Lato-900.woff2) format('woff2')}
@font-face{font-family:'Hubot Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/HubotSans-700.woff2) format('woff2')}
@font-face{font-family:'Hubot Sans';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/HubotSans-800.woff2) format('woff2')}

/* Canvas brand variables, themed with the 2026 UAB (Universitat Autònoma de Barcelona) palette */
:root{
  --brand:#008037; --brand-d5:#00732f; --brand-d15:#004d21; --brand-l10:#1a8f4a; --brand-viu:#00cc58; --brand-neo:#52ff9d;
  --nav-bg:#004d21; --nav-icon:#ffffff; --nav-active:#008037; --nav-logo-bg:#003d1a;
  --badge:#52ff9d; --badge-text:#004d21;
  --text:#2a3037; --text-l:#6B7780; --text-l2:#47535C;
  --border:#C7CDD1; --border-l:#E8EAEC; --bg-l:#F5F5F5; --white:#fff;
  --danger:#E0061F; --success:#0B874B; --info:#0374B5; --warning:#FC5E13;
  --st-late:#E5F3FC; --st-missing:#FFE8E5; --st-excused:#FEF7E5; --st-extended:#E5F7F6; --st-none:#fff;
  --gold:#FDB913; --dragon:#033319; --evergreen:#17B045; --campus:#90D408; --teal:#007580;
  --nav-w:84px;
  font-family:'Lato','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff;color:var(--text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
button{font-family:inherit}
h1,h2,h3,h4{font-weight:400;line-height:1.25;margin:0 0 .75rem}
h1{font-size:2rem}
h2{font-size:1.625rem}
h3{font-size:1.375rem}
h4{font-size:1.125rem}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--text-l)}
.small{font-size:.875rem}
.xs{font-size:.75rem}
.bold{font-weight:700}
.nowrap{white-space:nowrap}
svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.125em}

/* ---------- Global navigation ---------- */
#gnav{position:fixed;top:0;left:0;bottom:0;width:var(--nav-w);background:var(--nav-bg);z-index:50;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
#gnav .logo{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--nav-logo-bg);height:85px;flex:none;text-decoration:none}
.uab-mark{font-family:'Hubot Sans',Arial,sans-serif;font-weight:800;color:#fff;font-size:30px;letter-spacing:.5px;line-height:1;display:flex;align-items:center}
.uab-mark .clock{display:inline-block;width:.78em;height:.78em;margin:0 1px;position:relative;top:-.02em}
.uab-sub{font-size:8.5px;font-weight:900;letter-spacing:.7px;color:var(--brand-neo);margin-top:4px;text-transform:uppercase}
#gnav ul{list-style:none;margin:0;padding:0}
#gnav li a,#gnav li button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:.5rem 0 .55rem;color:var(--nav-icon);background:none;border:0;cursor:pointer;text-decoration:none;font-size:.75rem;line-height:1.2;position:relative;transition:background .2s}
#gnav li a:hover,#gnav li button:hover{background:rgba(255,255,255,.12);text-decoration:none}
#gnav li .ic{width:26px;height:26px;margin-bottom:.3rem;stroke-width:1.5}
#gnav li.active a,#gnav li.active button{background:#fff;color:var(--nav-active)}
#gnav .avatar{width:38px;height:38px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;margin-bottom:.3rem;background:transparent;color:#fff}
#gnav li.active .avatar{border-color:var(--nav-active);color:var(--nav-active)}
#gnav .nbadge{position:absolute;top:4px;right:16px;background:var(--badge);color:var(--badge-text);border-radius:10px;font-size:.7rem;font-weight:700;min-width:20px;height:20px;line-height:20px;padding:0 5px;text-align:center}
#gnav .spacer{flex:1}
#gnav .collapse{display:flex;justify-content:center;padding:14px 0;color:var(--nav-icon);opacity:.9;font-size:.65rem;text-align:center;line-height:1.3}

/* ---------- Trays (Account / Courses / Help) ---------- */
#tray{position:fixed;top:0;bottom:0;left:var(--nav-w);width:340px;background:#fff;z-index:49;box-shadow:0 0 12px rgba(0,0,0,.25);transform:translateX(-120%);transition:transform .25s ease;overflow-y:auto;padding:1.5rem}
#tray.open{transform:none}
#tray .close{position:absolute;right:12px;top:12px}
#tray h2{font-size:1.375rem;margin:.25rem 0 1rem}
#tray hr{border:0;border-top:1px solid var(--border);margin:1rem 0}
#tray ul{list-style:none;padding:0;margin:0}
#tray li{padding:.55rem 0;border-bottom:1px solid var(--border-l)}
#tray li .sub{display:block;color:var(--text-l);font-size:.8rem}
.tray-avatar{width:72px;height:72px;border-radius:50%;background:#EEF7F1;border:2px solid var(--brand-d15);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;color:var(--brand-d15);margin:0 auto .5rem}
#veil{position:fixed;inset:0;z-index:48;display:none}
#veil.on{display:block}

/* ---------- Layout ---------- */
#wrapper{margin-left:var(--nav-w);min-height:100vh;display:flex;flex-direction:column}
.crumbs-bar{display:flex;align-items:center;min-height:72px;margin:0 1.5rem;border-bottom:1px solid var(--border);gap:.75rem}
.hamburger{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--brand);cursor:pointer;border-radius:4px;padding:0;flex:none}
.hamburger:hover{background:var(--bg-l)}
.hamburger .ic{width:24px;height:24px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:1rem;margin:0;padding:0;list-style:none}
.crumbs li{display:flex;align-items:center;gap:.4rem}
.crumbs li+li::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--text-l);border-top:1.5px solid var(--text-l);transform:rotate(45deg);margin:0 .45rem 0 .15rem}
.crumbs .cur{color:var(--text)}
.crumbs-right{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.main-row{display:flex;flex:1;min-width:0}
#cnav{width:170px;flex:none;padding:1.5rem 0 1.5rem 1.5rem}
#cnav .term{font-size:.75rem;color:var(--text-l);margin:0 0 .5rem 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cnav ul{list-style:none;margin:0;padding:0}
#cnav a{display:block;padding:6px 6px 6px 8px;font-size:.875rem;line-height:1.35;border-left:3px solid transparent;margin-bottom:2px}
#cnav a.active{color:var(--text);border-left-color:var(--text);font-weight:400}
#cnav a.hidden-item{color:var(--text-l)}
#cnav.collapsed{display:none}
#content{flex:1;min-width:0;padding:1.5rem}
#right{width:300px;flex:none;padding:1.5rem 1.5rem 1.5rem 0}
.footer{margin:2rem 1.5rem 0;padding:1rem 0 1.5rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--text-l);display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center}
.footer .canvas-word{font-weight:900;letter-spacing:.5px;color:var(--text-l2)}

/* ---------- Mobile header ---------- */
#mhead{display:none}

/* ---------- Buttons & forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--bg-l);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:.5rem .875rem;font-size:1rem;line-height:1.25;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s}
.btn:hover{background:#E6E6E6;text-decoration:none}
.btn:focus-visible,.icon-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.btn-primary{background:var(--brand);border-color:var(--brand-d15);color:#fff}
.btn-primary:hover{background:var(--brand-d15)}
.btn-danger{background:var(--danger);border-color:#B00519;color:#fff}
.btn-danger:hover{background:#B00519}
.btn-sm{font-size:.875rem;padding:.3rem .65rem}
.btn-block{width:100%;justify-content:flex-start}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.icon-btn{background:none;border:0;padding:.35rem;border-radius:4px;cursor:pointer;color:var(--text);display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--bg-l)}
.icon-btn .ic{width:20px;height:20px}
.lbl{display:block;font-weight:700;font-size:.875rem;margin:0 0 .35rem}
.field{margin-bottom:1rem}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=search],select,textarea{font:inherit;font-size:1rem;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:4px;padding:.45rem .6rem;width:100%;min-height:38px}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--info);outline:none;box-shadow:0 0 0 1px var(--info)}
.radio-list label{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;cursor:pointer;font-size:.95rem}
.radio-list input{width:18px;height:18px;accent-color:var(--brand);margin:0}
.inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.inline input[type=number]{width:90px}
.hint{font-size:.8rem;color:var(--text-l);margin-top:.3rem}

/* ---------- Pills, alerts, misc ---------- */
.pill{display:inline-flex;align-items:center;height:1.4rem;padding:0 .5rem;border:1px solid currentColor;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;line-height:1;white-space:nowrap}
.pill.late,.pill.missing{color:var(--danger)}
.pill.excused{color:#8A6100}
.pill.extended{color:var(--teal)}
.pill.ontime{color:var(--success)}
.alert{display:flex;border:2px solid var(--info);border-radius:4px;background:#fff;margin-bottom:1.5rem;overflow:hidden}
.alert .a-ic{background:var(--info);color:#fff;display:flex;align-items:flex-start;justify-content:center;padding:1rem .75rem;flex:none}
.alert .a-ic .ic{width:22px;height:22px}
.alert .a-body{padding:.75rem 1rem;flex:1;font-size:.9rem}
.alert .a-body h4{font-weight:700;margin:0 0 .25rem;font-size:1rem}
.alert.warn{border-color:var(--warning)} .alert.warn .a-ic{background:var(--warning)}
.alert.ok{border-color:var(--success)} .alert.ok .a-ic{background:var(--success)}
.page-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem}
.page-head h1,.page-head h2{margin:0}
.page-head .spacer{flex:1}
.card-box{border:1px solid var(--border);border-radius:4px;padding:1rem 1.25rem;margin-bottom:1.25rem}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--text-l)}
.empty svg.big{width:120px;height:120px;stroke-width:.8;color:var(--border);margin-bottom:.75rem}

/* ---------- Flash ---------- */
#flash{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:min(560px,calc(100vw - 32px));pointer-events:none}
.flash{display:flex;background:#fff;border:2px solid var(--success);border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.18);overflow:hidden;pointer-events:auto;animation:fin .25s ease}
.flash .f-ic{background:var(--success);color:#fff;padding:.7rem;display:flex;align-items:center}
.flash .f-ic .ic{width:20px;height:20px}
.flash .f-b{padding:.6rem .9rem;font-size:.9rem;flex:1}
.flash.err{border-color:var(--danger)} .flash.err .f-ic{background:var(--danger)}
.flash.info{border-color:var(--info)} .flash.info .f-ic{background:var(--info)}
@keyframes fin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(45,59,69,.6);z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto}
.modal{background:#fff;border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.3);width:min(620px,100%);display:flex;flex-direction:column}
.modal-h{display:flex;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.modal-h h2{margin:0;font-size:1.375rem;flex:1}
.modal-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 1.25rem}
.modal-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:.7rem .9rem;font-size:.95rem;cursor:pointer;color:var(--brand)}
.modal-tabs button.on{border-bottom-color:var(--brand);color:var(--text);font-weight:700}
.modal-b{padding:1.25rem}
.modal-f{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem;background:var(--bg-l);border-top:1px solid var(--border);border-radius:0 0 4px 4px}
.policy-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 .25rem 1.75rem}
.policy-row input[type=number]{width:84px}
.policy-row select{width:auto}
.chk{display:flex;gap:.6rem;align-items:center;font-weight:700;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--brand);margin:0}
.policy-sec{border-bottom:1px solid var(--border-l);padding:0 0 1rem;margin-bottom:1rem}
.policy-sec:last-child{border-bottom:0;margin-bottom:0}

/* ---------- Dashboard ---------- */
.dash-head{display:flex;align-items:center;min-height:72px;margin:0 1.5rem;border-bottom:1px solid var(--border)}
.dash-head h1{margin:0;font-size:2rem;font-weight:400}
.dash-head .spacer{flex:1}
.cards{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:.5rem}
.dcard{width:262px;box-shadow:0 2px 5px rgba(0,0,0,.3);border-radius:4px;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.dcard-hero{height:146px;position:relative;display:block;overflow:hidden}
.dcard-hero .pattern{position:absolute;inset:0;opacity:.18}
.dcard-hero .kebab{position:absolute;right:6px;top:6px;color:#fff}
.dcard-hero .kebab:hover{background:rgba(255,255,255,.15)}
.dcard-hero .grade{position:absolute;left:10px;top:10px;background:#fff;color:var(--text);font-weight:700;font-size:.8rem;border-radius:3px;padding:.15rem .5rem;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.dcard-hero .unpub{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.45);color:#fff;font-size:.7rem;font-weight:700;border-radius:3px;padding:.15rem .5rem;letter-spacing:.5px;text-transform:uppercase}
.dcard-body{padding:.75rem 1.1rem .5rem;flex:1}
.dcard-body a.title{font-weight:700;font-size:1rem;line-height:1.3;display:block;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dcard-body .code{color:var(--text-l);font-size:.875rem;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard-body .term{color:var(--text-l);font-size:.75rem}
.dcard-acts{display:flex;gap:1.6rem;padding:.4rem 1.1rem .8rem;color:var(--text-l)}
.dcard-acts a{color:var(--text-l);position:relative}
.dcard-acts .ic{width:22px;height:22px}
.dcard-acts .cbadge{position:absolute;top:-8px;right:-12px;border-radius:10px;font-size:.65rem;font-weight:700;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 4px;color:#fff}
.side h2{font-size:1.125rem;font-weight:700;margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.side ul{list-style:none;padding:0;margin:0 0 1.5rem}
.side li{display:flex;gap:.6rem;padding:.55rem 0;font-size:.875rem;border-bottom:1px solid var(--border-l)}
.side li .ic{width:20px;height:20px;color:var(--text-l);margin-top:2px}
.side li .t{font-weight:700}
.side li .meta{color:var(--text-l);font-size:.78rem}
.side .btn-block{margin-bottom:.5rem}

/* ---------- Course home ---------- */
.hero-banner{background:var(--brand);color:#fff;border-radius:4px;padding:1.5rem 1.5rem 1.25rem;position:relative;overflow:hidden;margin-bottom:1.5rem}
.hero-banner h1{font-family:'Hubot Sans',Arial,sans-serif;font-weight:800;font-size:2.1rem;margin:0 0 .35rem;line-height:1.1}
.hero-banner p{margin:.25rem 0;max-width:620px;opacity:.95}
.hero-banner .gold{color:var(--brand-neo)}
.hero-banner svg.deco{position:absolute;right:-30px;top:-30px;width:220px;height:220px;opacity:.12;stroke:#fff;stroke-width:1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat{border:1px solid var(--border);border-radius:4px;padding:.9rem 1rem;border-top:4px solid var(--brand)}
.stat .v{font-size:1.75rem;font-weight:700;line-height:1.1}
.stat .l{font-size:.8rem;color:var(--text-l)}
.quick{border:1px solid var(--border);border-radius:4px;margin-bottom:1.5rem}
.quick-h{background:var(--bg-l);border-bottom:1px solid var(--border);padding:.7rem 1rem;display:flex;align-items:center;gap:.5rem}
.quick-h h2{margin:0;font-size:1.125rem;font-weight:700}
.quick-b{padding:1rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.seg{display:flex;flex-wrap:wrap;gap:.4rem}
.seg label{position:relative;display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border);border-radius:4px;padding:.4rem .75rem;cursor:pointer;font-size:.9rem;background:#fff;user-select:none}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){border-color:var(--brand);background:#EEF5F0;box-shadow:inset 0 0 0 1px var(--brand);font-weight:700}
.seg .dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.stream{list-style:none;padding:0;margin:0}
.stream li{display:flex;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--border-l);align-items:flex-start}
.stream .who{font-weight:700}
.stream .when{color:var(--text-l);font-size:.8rem}
.stream .sic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.stream .sic .ic{width:18px;height:18px}

/* ---------- Gradebook ---------- */
.gb-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.75rem}
.gb-toolbar .spacer{flex:1}
.gb-toolbar .menu-btn{font-weight:700;font-size:1.125rem;background:none;border:0;padding:.25rem .25rem;display:inline-flex;align-items:center;gap:.35rem;color:var(--text);cursor:pointer}
.gb-filters{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-bottom:1rem}
.gb-filters .f{min-width:200px}
.gb-filters .f.search{flex:1;max-width:320px}
.dropdown{position:relative;display:inline-block}
.dd-menu{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--border);border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.15);min-width:240px;z-index:60;padding:.35rem 0;display:none}
.dd-menu.open{display:block}
.dd-menu .dd-h{font-size:.75rem;font-weight:700;color:var(--text-l);padding:.4rem .9rem .2rem;text-transform:uppercase;letter-spacing:.4px}
.dd-menu button,.dd-menu a{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:none;border:0;padding:.45rem .9rem;font-size:.9rem;color:var(--text);cursor:pointer}
.dd-menu button:hover,.dd-menu a:hover{background:var(--brand);color:#fff;text-decoration:none}
.dd-menu .chkm{width:14px;display:inline-block}
.dd-menu .sw{width:16px;height:16px;border:1px solid var(--border);border-radius:2px;flex:none}
.dd-sep{border-top:1px solid var(--border-l);margin:.3rem 0}
.gb-wrap{border:1px solid var(--border);overflow:auto;max-height:calc(100vh - 260px);min-height:240px;position:relative}
table.gb{border-collapse:separate;border-spacing:0;font-size:.875rem;min-width:100%}
table.gb th,table.gb td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:0;height:36px;background:#fff}
table.gb thead th{position:sticky;top:0;z-index:3;background:#fff;height:62px;text-align:left;vertical-align:top;padding:.45rem .6rem;font-weight:400;min-width:118px;max-width:150px}
table.gb thead th .an{font-weight:700;color:var(--brand);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.gb thead th .oo{font-size:.75rem;color:var(--text-l)}
table.gb thead th.today{box-shadow:inset 0 -3px 0 var(--brand-viu)}
table.gb .stu{position:sticky;left:0;z-index:2;width:220px;min-width:220px;max-width:220px;padding:0 .6rem}
table.gb thead .stu{z-index:4}
table.gb .tot{position:sticky;left:220px;z-index:2;min-width:96px;text-align:center;font-weight:700;background:#FAFAFA;box-shadow:inset -2px 0 0 var(--border)}
table.gb thead .tot{z-index:4;text-align:left;background:#fff}
table.gb td.stu a{display:flex;align-items:center;gap:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.gb td.stu .sec{font-size:.72rem;color:var(--text-l);display:block;line-height:1}
.mini-av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff}
table.gb td.cell{text-align:center;cursor:pointer;position:relative;min-width:118px}
table.gb td.cell:hover{box-shadow:inset 0 0 0 2px var(--info)}
table.gb td.cell.sel{box-shadow:inset 0 0 0 2px var(--brand)}
table.gb td.cell.late{background:var(--st-late)}
table.gb td.cell.missing{background:var(--st-missing)}
table.gb td.cell.excused{background:var(--st-excused)}
table.gb td.cell.extended{background:var(--st-extended)}
table.gb td.cell .dash{color:var(--text-l)}
table.gb td.cell .cm{position:absolute;top:0;right:0;width:0;height:0;border-top:7px solid var(--text-l);border-left:7px solid transparent}
table.gb tbody tr:hover td.stu,table.gb tbody tr:hover td.tot{background:#F2F7F4}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.8rem;color:var(--text-l2);margin-top:.6rem}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.legend i{width:14px;height:14px;border:1px solid var(--border);display:inline-block}

/* ---------- Grade detail tray ---------- */
#gtray{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;background:#fff;z-index:90;box-shadow:-2px 0 14px rgba(0,0,0,.22);transform:translateX(110%);transition:transform .25s ease;overflow-y:auto;display:flex;flex-direction:column}
#gtray.open{transform:none}
.gt-h{display:flex;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.gt-who{display:flex;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid var(--border-l)}
.gt-who .mini-av{width:48px;height:48px;font-size:1rem}
.gt-who .nm{font-size:1.15rem;font-weight:700}
.gt-nav{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid var(--border-l);gap:.5rem}
.gt-nav .lbl2{text-align:center;flex:1;font-weight:700;font-size:.95rem}
.gt-nav .lbl2 .sub{display:block;font-weight:400;font-size:.8rem;color:var(--text-l)}
.gt-sec{padding:1rem;border-bottom:1px solid var(--border-l)}
.gt-sec h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--text-l2);margin:0 0 .6rem}
.calc{display:grid;grid-template-columns:1fr auto;gap:.35rem .75rem;font-size:.95rem}
.calc .neg{color:var(--danger);font-weight:700}
.calc .fin{font-weight:900;font-size:1.15rem}
.gt-f{padding:1rem;display:flex;gap:.5rem;justify-content:flex-end;margin-top:auto;border-top:1px solid var(--border);background:var(--bg-l);position:sticky;bottom:0}
.commentbox{background:var(--bg-l);border-radius:4px;padding:.6rem .75rem;font-size:.875rem;margin-bottom:.6rem}
.commentbox .by{font-weight:700}

/* ---------- Student grades page ---------- */
.grades-layout{display:flex;gap:1.5rem;align-items:flex-start}
.grades-layout .gl-main{flex:1;min-width:0}
.grades-layout .gl-side{width:270px;flex:none}
table.grades{width:100%;border-collapse:collapse;font-size:.9rem}
table.grades th{text-align:left;font-weight:700;border-bottom:2px solid var(--border);padding:.6rem .5rem;font-size:.85rem}
table.grades td{border-bottom:1px solid var(--border-l);padding:.7rem .5rem;vertical-align:top}
table.grades td .sub{display:block;font-size:.78rem;color:var(--text-l)}
table.grades tr.ex td{color:var(--text-l)}
table.grades .score{white-space:nowrap;text-align:right;font-weight:700}
table.grades tr.group td{background:var(--bg-l);font-weight:700}
.tot-box{border:1px solid var(--border);border-radius:4px;padding:1rem;margin-bottom:1rem}
.tot-box .big{font-size:1.75rem;font-weight:900}
.tot-box .lg{display:inline-block;margin-left:.4rem;font-size:1.1rem;font-weight:700;color:var(--text-l2)}

/* ---------- People ---------- */
table.people{width:100%;border-collapse:collapse;font-size:.9rem}
table.people th{text-align:left;border-bottom:2px solid var(--border);padding:.55rem .5rem;font-size:.85rem}
table.people td{border-bottom:1px solid var(--border-l);padding:.6rem .5rem;vertical-align:middle}
table.people .nm{display:flex;align-items:center;gap:.6rem}

/* ---------- Analytics ---------- */
.bars{list-style:none;padding:0;margin:0}
.bars li{display:grid;grid-template-columns:200px 1fr 70px;gap:.75rem;align-items:center;padding:.4rem 0;font-size:.9rem}
.bars .track{height:18px;background:var(--bg-l);border-radius:2px;overflow:hidden}
.bars .fill{height:100%;background:var(--brand);border-radius:0 2px 2px 0}
.bars li:first-child .fill{background:var(--danger)}
.bars .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.bars .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Announcements / syllabus ---------- */
.ann{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--border-l)}
.ann .av{width:44px;height:44px;border-radius:50%;background:#EEF7F1;display:flex;align-items:center;justify-content:center;flex:none;color:var(--brand-d15);font-weight:700}
.ann h3{font-size:1.1rem;font-weight:700;margin:0 0 .2rem}
.ann .meta{font-size:.8rem;color:var(--text-l);margin-bottom:.4rem}
.ann p{margin:.3rem 0;font-size:.95rem}
.prose{max-width:760px}
.prose h2{font-size:1.375rem;margin-top:1.5rem}
.prose table{border-collapse:collapse;font-size:.9rem;margin:.5rem 0 1rem}
.prose td,.prose th{border:1px solid var(--border);padding:.4rem .7rem;text-align:left}
.prose th{background:var(--bg-l)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  #right{display:none}
  .grades-layout{flex-direction:column}
  .grades-layout .gl-side{width:100%}
}
@media (max-width:767px){
  :root{--nav-w:0px}
  #gnav{transform:translateX(-100%);width:84px;transition:transform .25s ease;z-index:110}
  body.mnav #gnav{transform:none}
  body.mnav #veil{display:block;background:rgba(0,0,0,.35);z-index:105}
  #tray{left:0;width:100%;z-index:115}
  #mhead{display:flex;align-items:center;gap:.5rem;position:sticky;top:0;z-index:40;background:var(--nav-bg);color:var(--nav-icon);height:56px;padding:0 .5rem}
  #mhead .t{flex:1;text-align:center;font-weight:700;font-size:1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #mhead .icon-btn{color:var(--nav-icon)}
  #mhead .icon-btn .ic{width:24px;height:24px}
  .crumbs-bar,.dash-head{display:none}
  #cnav{display:none;position:fixed;inset:56px 0 0 0;width:auto;background:#fff;z-index:45;padding:1rem 16px;overflow-y:auto}
  body.mcnav #cnav{display:block}
  #cnav a{font-size:1rem;padding:10px 8px}
  #content{padding:1rem 16px}
  .footer{margin:1.5rem 16px 0}
  .cards{justify-content:center}
  .dcard{width:100%}
  .grid2{grid-template-columns:1fr}
  .bars li{grid-template-columns:1fr 60px}
  .bars .track{grid-column:1/-1;grid-row:2}
  #gtray{width:100%}
  .gb-filters .f,.gb-filters .f.search{min-width:0;max-width:none;flex:1 1 100%}
  table.gb .stu{width:150px;min-width:150px;max-width:150px}
  table.gb .tot{left:150px;min-width:70px}
  table.people .hide-m{display:none}
  table.grades .hide-m{display:none}
  .hero-banner h1{font-size:1.6rem}
}

@media print{
  #gnav,#mhead,#cnav,#right,.crumbs-bar,.dash-head,#gtray,#tray,#veil,#flash,.footer,.gb-toolbar,.gb-filters,.gl-side .btn{display:none!important}
  #wrapper{margin:0}
  .gb-wrap{max-height:none;overflow:visible}
}

/* ---------- Parkrastination (animation overlay) ---------- */
.pk-trigger{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;background:#fff;border:2px solid var(--brand);border-radius:6px;padding:.6rem .75rem;cursor:pointer;color:var(--text);font:inherit;margin-bottom:1rem;box-shadow:0 2px 0 var(--brand-d15);transition:transform .1s,box-shadow .1s}
.pk-trigger:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--brand-d15)}
.pk-trigger:active{transform:translateY(1px);box-shadow:none}
.pk-trigger strong{display:block;font-family:'Hubot Sans','Lato',sans-serif;font-weight:800;font-size:1.1rem;color:var(--brand);line-height:1.15}
.pk-trigger small{display:block;font-size:.8rem;color:var(--text-l)}
.pk-p{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;background:#1E5BB8;color:#fff;border:2px solid #fff;outline:2px solid #1E5BB8;border-radius:5px;font-family:'Hubot Sans',Arial,sans-serif;font-weight:800;font-size:1.4rem;line-height:1}
.pk-p.big{width:64px;height:64px;font-size:2.6rem;border-width:3px;outline-width:3px}
.hero-banner .pk-trigger{width:auto;display:inline-flex;margin:.9rem 0 0;border-color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.25)}
body.pk-open{overflow:hidden}
.pk-back{position:fixed;inset:0;z-index:300;background:rgba(10,20,15,.82);display:flex;align-items:center;justify-content:center;padding:12px}
.pk{background:#fff;border-radius:8px;width:min(1240px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.pk-top{display:flex;align-items:center;gap:1rem;padding:.55rem .9rem;border-bottom:1px solid var(--border);background:var(--brand-d15);color:#fff}
.pk-title{display:flex;align-items:center;gap:.7rem;flex:1;min-width:0}
.pk-title .pk-p{width:30px;height:30px;font-size:1.15rem;outline-color:#fff}
.pk-title strong{display:block;font-family:'Hubot Sans',Arial,sans-serif;font-weight:800;font-size:1.15rem;line-height:1.1}
.pk-title span:not(.pk-p){display:block;font-size:.75rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-ctrl{display:flex;gap:.35rem}
.pk-b{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:4px;width:38px;height:34px;cursor:pointer;font-size:1rem}
.pk-b:hover{background:rgba(255,255,255,.25)}
.pk-b:focus-visible{outline:2px solid var(--badge);outline-offset:2px}
.pk-stage{position:relative;display:flex;gap:10px;padding:10px;background:#E9E5DD;justify-content:center;min-height:0}
.pk-panel{margin:0;position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.pk-panel svg{display:block;width:100%;height:auto;max-height:calc(100vh - 210px);aspect-ratio:600/660;background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.pk-panel figcaption{font-size:.75rem;color:var(--text-l2);margin-top:.3rem;text-align:center}
.pk-hud{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:3px;pointer-events:none}
.pk-hud span{background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:3px;padding:1px 7px;font-size:.78rem;font-weight:700;color:var(--text)}
.pk-hud #pk-lap{background:var(--brand);color:#fff;border-color:var(--brand)}
.pk-cap{display:flex;align-items:center;gap:.75rem;padding:.55rem .9rem;border-top:1px solid var(--border);min-height:54px}
.pk-time{font-family:'Hubot Sans',Arial,sans-serif;font-weight:800;font-size:1.25rem;color:#fff;background:var(--danger);border-radius:4px;padding:.15rem .5rem;font-variant-numeric:tabular-nums;flex:none}
#pk-text{font-size:.98rem;line-height:1.3}
.pk-prog{height:4px;background:var(--border-l)}
.pk-prog i{display:block;height:100%;width:0;background:var(--brand)}
.pk-end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,40,18,.55);padding:16px;animation:fin .4s ease}
.pk-end[hidden]{display:none}
.pk-end-card{background:#fff;border-radius:8px;max-width:520px;width:100%;padding:1.5rem 1.5rem 1.25rem;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.pk-end-card h2{font-family:'Hubot Sans',Arial,sans-serif;font-weight:800;font-size:2.2rem;color:var(--brand);margin:.6rem 0 .3rem}
.pk-def{font-size:1rem;margin:0 0 1rem}
.pk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.1rem}
.pk-stats div{border:1px solid var(--border);border-radius:4px;padding:.5rem .3rem}
.pk-stats b{display:block;font-size:1.6rem;font-family:'Hubot Sans',Arial,sans-serif;font-weight:800;color:var(--danger);line-height:1.1}
.pk-stats span{font-size:.75rem;color:var(--text-l)}
.pk-end-btns{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
/* svg text + map styles */
.pk-ban1{font:800 20px 'Hubot Sans',Arial,sans-serif;fill:#fff}
.pk-ban2{font:600 12.5px 'Lato',Arial,sans-serif;fill:#d8f3e3}
.pk-exit{font:900 11px 'Lato',Arial,sans-serif;fill:#fff;text-anchor:middle;letter-spacing:.8px}
.pk-late{font:900 12px 'Lato',Arial,sans-serif;fill:#E0061F;text-anchor:middle}
.pk-z{font:900 15px 'Lato',Arial,sans-serif;fill:#4F7CAC}
.pk-btxt{font-family:'Lato',Arial,sans-serif;font-weight:700;fill:#2a3037}
.pk-toast1{font:900 14px 'Lato',Arial,sans-serif;fill:#2a3037}
.pk-toast2{font:400 11.5px 'Lato',Arial,sans-serif;fill:#47535C}
.pm-park{fill:#CFE6C2}
.pm-hosp{fill:#F3DFD0}
.pm-bld{fill:#D9895B;stroke:#B9683D;stroke-width:.6}
.pm-cas{fill:none;stroke:#D7CFC1;stroke-linecap:round;stroke-linejoin:round}
.pm-road{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.pm-major-c{stroke-width:10.5}.pm-major{stroke-width:8.6;stroke:#FFFDF5}
.pm-minor-c{stroke-width:9.4}.pm-minor{stroke-width:7.6}
.pm-lane-c{stroke-width:4.6}.pm-lane{stroke-width:3.2}
.pm-ped-c{stroke-width:6.5;stroke:#E4DCCB}.pm-ped{stroke-width:5;stroke:#F7F3EA}
.pm-sf{fill:#C9AE7C;stroke:#9E8556;stroke-width:.8}
.pm-uab{fill:#008037;stroke:#004d21;stroke-width:.8}
.pm-saba{fill:#BFD3EE;stroke:#1E5BB8;stroke-width:.6}
.pm-lbl{font:700 6.6px 'Lato',Arial,sans-serif;fill:#7A7062;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:2px;stroke-linejoin:round}
.pm-gaudi{font-size:7.5px;fill:#8A6D3B}
.pm-big{font:800 11px 'Hubot Sans',Arial,sans-serif;fill:#8E4A23;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.pm-uab-lbl{font:800 9px 'Hubot Sans',Arial,sans-serif;fill:#004d21;paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round}
.pm-attr{font-family:'Lato',Arial,sans-serif;fill:#6B7780;text-anchor:end;paint-order:stroke;stroke:#fff;stroke-width:2px}
.pk-route{fill:none;stroke:#00A651;stroke-width:3;stroke-dasharray:5 4;stroke-linejoin:round}
.pk-free rect{fill:rgba(11,135,75,.25);stroke:#0B874B;stroke-width:1;stroke-dasharray:2 1.5}
.pk-verda rect{fill:rgba(46,158,68,.28);stroke:#2E9E44;stroke-width:.8}
.pk-cd rect{fill:rgba(242,194,0,.45);stroke:#C9A000;stroke-width:.8}
.pk-moto rect{fill:rgba(30,91,184,.25);stroke:#1E5BB8;stroke-width:.8}
.pk-ptxt{font:800 11px 'Hubot Sans',Arial,sans-serif;fill:#fff;text-anchor:middle}
.pk-complet{font:900 8px 'Lato',Arial,sans-serif;fill:#fff;text-anchor:middle;letter-spacing:.4px}
.pk-sign{font:900 7.4px 'Lato',Arial,sans-serif;text-anchor:middle}
.pk-sign2{font:700 6.4px 'Lato',Arial,sans-serif;text-anchor:middle}
.pk-gtxt{font:900 7px 'Lato',Arial,sans-serif;fill:#F2C200;text-anchor:middle;letter-spacing:.4px}
.pk-ctxt{font:900 7.4px 'Lato',Arial,sans-serif;fill:#004d21;text-anchor:middle}
@media (max-width:760px){
  .pk-back{padding:0}
  .pk{border-radius:0;height:100%}
  .pk-stage{flex-direction:column;align-items:center;padding:6px;gap:6px;flex:1}
  .pk-panel{flex:1 1 0;width:100%;min-height:0}
  .pk-panel svg{width:auto;height:100%;max-height:none;max-width:100%}
  .pk-panel figcaption{display:none}
  .pk-hud{left:50%;transform:translateX(-50%);flex-direction:row;top:4px}
  .pk-hud span{font-size:.7rem}
  .pk-title span:not(.pk-p){display:none}
  .pk-cap{min-height:64px;padding:.45rem .6rem}
  #pk-text{font-size:.88rem}
  .pk-stats b{font-size:1.25rem}
  .pk-end-card h2{font-size:1.7rem}
}

/* ---------- Big "Mark your professor late" button, how-to, FAB ---------- */
.late-cta{display:flex;align-items:center;gap:1.1rem;width:100%;margin:0 0 .75rem;padding:1.15rem 1.5rem;border:0;border-radius:10px;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-d15) 100%);color:#fff;cursor:pointer;text-align:left;font:inherit;box-shadow:0 5px 0 #00331a,0 10px 22px rgba(0,77,33,.25);transition:transform .1s,box-shadow .1s}
.late-cta:hover{transform:translateY(-2px);box-shadow:0 7px 0 #00331a,0 14px 26px rgba(0,77,33,.3)}
.late-cta:active{transform:translateY(3px);box-shadow:0 2px 0 #00331a}
.late-cta:focus-visible{outline:3px solid var(--brand-neo);outline-offset:3px}
.late-cta-ic{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:none}
.late-cta-ic .ic{width:38px;height:38px;stroke-width:2;color:var(--brand-neo)}
.late-cta-txt{flex:1;min-width:0}
.late-cta strong{display:block;font-family:'Hubot Sans',Arial,sans-serif;font-weight:800;font-size:clamp(1.4rem,3.2vw,2.15rem);line-height:1.08}
.late-cta small{display:block;font-size:.98rem;opacity:.92;margin-top:.3rem}
.late-cta .late-cta-pill{background:#fff;color:var(--danger);border:2px solid var(--danger);height:2.1rem;font-size:1rem;padding:0 1rem;transform:rotate(-7deg);flex:none}
@media (prefers-reduced-motion:no-preference){
  .late-cta-ic .ic{animation:wobble 2.4s ease-in-out infinite}
  @keyframes wobble{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-14deg)}85%{transform:rotate(12deg)}92%{transform:rotate(-6deg)}}
}
.howto{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0 0 1.5rem;padding:.6rem .9rem;background:#EEF7F1;border:1px solid #CFE9D8;border-radius:6px;font-size:.88rem}
.howto li{display:flex;align-items:center;gap:.45rem}
.howto b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:.78rem;flex:none}
#gnav li.nav-cta button{background:rgba(82,255,157,.14);color:var(--brand-neo);font-weight:700}
#gnav li.nav-cta button:hover{background:rgba(82,255,157,.26)}
.mobile-only{display:none}
.fab{display:none}
@media (max-width:1100px){.pk-trigger.mobile-only{display:flex}}
@media (max-width:767px){
  .late-cta{padding:.95rem 1rem;gap:.8rem}
  .late-cta-ic{width:48px;height:48px}.late-cta-ic .ic{width:28px;height:28px}
  .late-cta .late-cta-pill{display:none}
  .howto{flex-direction:column}
  .fab{display:flex;position:fixed;right:16px;bottom:16px;z-index:60;align-items:center;gap:.5rem;background:var(--danger);color:#fff;border:0;border-radius:999px;padding:.85rem 1.15rem;font:800 1rem 'Hubot Sans',Arial,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer}
  .fab .ic{width:22px;height:22px;stroke-width:2}
  .footer{padding-bottom:84px}
}

/* ---------- Late Ranking ---------- */
.rank-box h2{font-size:1.25rem;font-weight:700;margin:0;display:flex;align-items:center;gap:.45rem}
.rank-box h2 .ic{color:var(--brand)}
.rank-f{display:flex;gap:.3rem;flex-wrap:wrap}
table.rank{width:100%;border-collapse:collapse;font-size:.92rem}
table.rank th{text-align:left;font-size:.8rem;color:var(--text-l2);border-bottom:2px solid var(--border);padding:.45rem .5rem}
table.rank td{border-bottom:1px solid var(--border-l);padding:.55rem .5rem;vertical-align:middle}
table.rank .rk{width:44px;text-align:center}
table.rank .nm{display:flex;align-items:center;gap:.6rem;min-width:0}
table.rank .pn{display:block;font-weight:700}
table.rank .sub{display:block;font-size:.76rem;color:var(--text-l)}
table.rank td.cnt{min-width:150px}
table.rank td.cnt b{font-size:1.05rem;color:var(--danger);margin-left:.5rem}
.rbar{display:inline-block;width:90px;height:10px;background:var(--bg-l);border-radius:5px;overflow:hidden;vertical-align:middle}
.rbar i{display:block;height:100%;background:var(--danger);border-radius:5px}
.rkb{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--bg-l);border:1px solid var(--border);font-weight:900;font-size:.85rem}
.rkb.rk1{background:#F5C518;border-color:#C99A00;color:#3a2c00}
.rkb.rk2{background:#D5DAE0;border-color:#A9B1BC;color:#2a3037}
.rkb.rk3{background:#D9955A;border-color:#A9662F;color:#fff}
@media (max-width:767px){ .rbar{width:50px} table.rank td.cnt{min-width:0} }