/* Kings Polytechnic student portal. 360 px first; system fonts; WCAG 2.2 AA contrast; 44 px targets. */
:root{--bg:#F7F8FA;--surface:#fff;--line:#E3E6EB;--text:#14181F;--muted:#5B6472;--navy:#142747;--gold:#B8862B;--ok:#1E7B4B;--warn:#B26A00;--bad:#B3261E;--info:#1D4E89;--r:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--info);text-underline-offset:2px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 16px;z-index:10}
.skip:focus{left:8px}
h1{font-size:28px;line-height:1.2;margin:24px 0 8px}
h2{font-size:18px;margin:0 0 16px}
.muted,.sub,.hint{color:var(--muted)}
.sub{display:block;font-size:13px}
.hint{font-size:13px;margin:4px 0 16px}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;letter-spacing:.01em}
.top{background:var(--navy);color:#fff;border-bottom:3px solid var(--gold)}
.bar{max-width:1040px;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700;min-height:44px;margin-right:auto}
.brand small{display:block;font-weight:500;font-size:13px;color:#E8D3A4}
.nav{display:flex;gap:4px;overflow-x:auto;order:3;width:100%}
.nav a{color:#fff;text-decoration:none;padding:10px 12px;min-height:44px;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center}
.nav a[aria-current=page]{background:rgba(255,255,255,.14);box-shadow:inset 0 -3px 0 var(--gold)}
.signout{margin:0}
button,.button{font:inherit;min-height:44px;padding:10px 20px;border-radius:10px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.primary{background:var(--navy);color:#fff}
.primary:hover{background:#0c1a31;color:#fff}
.link{background:none;border:0;color:#fff;text-decoration:underline;padding:10px 4px}
main{display:block;min-height:60vh}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px 32px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:16px 0}
.hero{height:200px;background:linear-gradient(180deg,rgba(20,39,71,.82),rgba(20,39,71,.55) 55%,var(--bg)),url(/assets/campus.jpg) center/cover,var(--navy);color:#fff}
.hero-in{max-width:1040px;margin:0 auto;padding:24px 16px}
.hero h1{margin:4px 0 0;color:#fff}
.eyebrow{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#E8D3A4}
.strip{display:flex;gap:16px;align-items:center;margin-top:-56px;position:relative}
.avatar{flex:0 0 56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;border:3px solid var(--gold)}
.name{font-size:18px;font-weight:700;margin:0}
.meta{margin:2px 0 0;color:var(--muted)}
.tag{display:inline-block;font-size:13px;font-weight:600;padding:1px 8px;border-radius:999px;margin-left:4px}
.tag-ok{background:#E3F2EA;color:var(--ok)}.tag-warn{background:#FBEFD9;color:#8A5200}.tag-bad{background:#F9E3E1;color:var(--bad)}.tag-info{background:#E1EAF6;color:var(--info)}.tag-muted{background:#ECEEF1;color:var(--muted)}
.alert{border-radius:10px;padding:12px 16px;margin:16px 0;border:1px solid}
.alert-error{background:#FCEDEC;border-color:#F0BDB8;color:#7E1A14}
.alert-ok{background:#EAF5EF;border-color:#B6DBC6;color:#14532F}
.alert-warn{background:#FDF4E3;border-color:#EBCB91;color:#6B4100}
.alert-info{background:#EAF0F8;border-color:#BCCDE3;color:#163B67}
.grid{display:grid;gap:0 16px}
.list{list-style:none;margin:0;padding:0}
.list li{padding:12px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0;padding-top:0}
.list a{font-weight:600;display:inline-block;min-height:24px}
.late{color:var(--bad)}
.count{font-size:13px;font-weight:600;background:#ECEEF1;color:var(--muted);border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:middle}
.cta{margin:8px 0 0}
.signin{max-width:440px;margin:0 auto;padding:24px 16px 32px}
.signin h1{margin-top:0}
label{display:block;font-weight:600;margin:16px 0 4px}
input[type=text],input[type=password],input[type=tel]{width:100%;font:inherit;font-size:16px;min-height:48px;padding:10px 12px;border:1px solid #9AA3AF;border-radius:10px;background:#fff;color:var(--text)}
form button[type=submit].primary{width:100%;margin-top:8px}
.links{margin:16px 0 0;text-align:center}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:8px 8px 8px 0;border-top:1px solid var(--line);vertical-align:top}
.tbl th{font-size:13px;color:var(--muted);border-top:0}
.dl dt{font-weight:600}.dl dd{margin:0 0 16px}
.foot{max-width:1040px;margin:0 auto;padding:24px 16px 40px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.foot p{margin:4px 0}
@media (min-width:720px){
 .hero{height:280px}.hero-in{padding:48px 16px}
 .nav{order:0;width:auto}
 .grid{grid-template-columns:1fr 1fr}
 .card{padding:24px}
 form.phone button[type=submit].primary{width:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}