/* ==========================================================================
   E-Portfolio UI kit (ui.css)
   One place for design tokens, light/dark themes and shared components.
   Link it FIRST in <head>, before a page's own <style>. Do not load it
   together with the legacy shared-responsive.css.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand */
  --navy:#0a1730; --navy-2:#122a56; --gold:#c99a3d; --gold-2:#f0d799; --teal:#0f7a6c; --blue:#1d3f8b;
  /* surfaces + text */
  --bg:#eef1f6; --surface:#fff; --surface-2:#f6f8fc; --ink:#101828; --muted:#5d6b85; --placeholder:#6b7890;
  --line:#e3e8f0; --line-strong:#c3cee2; --heading:var(--navy); --link:#1d3f8b; --focus:#1d4ed8;
  /* buttons */
  --btn-bg:linear-gradient(135deg,#0a1730,#122a56); --btn-fg:#fff;
  /* status colours: bg / border / text */
  --ok-bg:#eafaf5;   --ok-line:#cdeee2;   --ok-ink:#0b5d52;
  --warn-bg:#fff8ec; --warn-line:#f0dfb8; --warn-ink:#7a5610;
  --err-bg:#fdf1ee;  --err-line:#f6cfc4;  --err-ink:#9a2b1c;  --err:#c94a3a;
  --info-bg:#eef3ff; --info-line:#cfdcfb; --info-ink:#1d3f8b;
  /* shape, elevation, motion */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --tap:44px; --field-h:48px;
  --shadow-sm:0 4px 14px #10182810; --shadow-md:0 12px 34px #10182814; --shadow-lg:0 22px 60px #10182820;
  --ease:cubic-bezier(.2,.8,.2,1); --dur-1:150ms; --dur-2:250ms;
  color-scheme:light dark;
}
/* Dark theme: follows the device, unless the user chose a theme (data-theme) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1220; --surface:#121b2f; --surface-2:#0f1728; --ink:#e8edf7; --muted:#a3b1cc; --placeholder:#8393b0;
    --line:#26314a; --line-strong:#3d4e73; --heading:#f1f4fb; --link:#9db8ff; --focus:#9db8ff;
    --btn-bg:linear-gradient(135deg,#2f56b3,#1f3f8f);
    --ok-bg:#0f3733; --ok-line:#1c5a52; --ok-ink:#7fe0cc;
    --warn-bg:#33280f; --warn-line:#5b4818; --warn-ink:#f0d799;
    --err-bg:#3a1a17; --err-line:#6b2f28; --err-ink:#ffb4a8; --err:#ff8a78;
    --info-bg:#1a2a4d; --info-line:#2f4478; --info-ink:#b7ccff;
    --shadow-sm:0 4px 14px #00000040; --shadow-md:0 12px 34px #00000055; --shadow-lg:0 22px 60px #00000070;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1220; --surface:#121b2f; --surface-2:#0f1728; --ink:#e8edf7; --muted:#a3b1cc; --placeholder:#8393b0;
  --line:#26314a; --line-strong:#3d4e73; --heading:#f1f4fb; --link:#9db8ff; --focus:#9db8ff;
  --btn-bg:linear-gradient(135deg,#2f56b3,#1f3f8f);
  --ok-bg:#0f3733; --ok-line:#1c5a52; --ok-ink:#7fe0cc;
  --warn-bg:#33280f; --warn-line:#5b4818; --warn-ink:#f0d799;
  --err-bg:#3a1a17; --err-line:#6b2f28; --err-ink:#ffb4a8; --err:#ff8a78;
  --info-bg:#1a2a4d; --info-line:#2f4478; --info-ink:#b7ccff;
  --shadow-sm:0 4px 14px #00000040; --shadow-md:0 12px 34px #00000055; --shadow-lg:0 22px 60px #00000070;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font:16px/1.6 'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--heading);line-height:1.2;text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--link)}
img,svg{max-width:100%}
svg{display:block}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r-sm);z-index:100;text-decoration:none;font-weight:700}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------- 3. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;
  border-radius:var(--r-sm);border:1.5px solid transparent;font:inherit;font-size:15px;font-weight:700;line-height:1;
  cursor:pointer;text-decoration:none;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--shadow-sm)}
.btn-primary:hover{box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--surface);color:var(--heading);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-danger{background:var(--err);color:#fff}
.btn-lg{min-height:52px;font-size:16px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-busy="true"]{opacity:.7;cursor:not-allowed;transform:none}
.btn[aria-busy="true"]::before{content:'';width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-spin .7s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}

.icon-btn{display:inline-grid;place-items:center;min-width:var(--tap);min-height:var(--tap);padding:0;border-radius:var(--r-sm);
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;transition:background var(--dur-1) var(--ease)}
.icon-btn:hover{background:var(--surface-2)}
.ic-sun{display:none}
:root[data-theme="dark"] .ic-sun{display:block}
:root[data-theme="dark"] .ic-moon{display:none}

.link-btn{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 4px;border:0;background:none;color:var(--link);font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none}
.link-btn:hover{text-decoration:underline}

/* ---------- 4. Form fields ---------- */
.field{margin-top:18px}
.label{display:block;margin:0 0 6px;font-size:14px;font-weight:700;color:var(--heading)}
.control{position:relative}
.control-icon{position:absolute;left:14px;top:0;bottom:0;display:flex;align-items:center;color:var(--placeholder);pointer-events:none}
.input{display:block;width:100%;min-height:var(--field-h);padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.input::placeholder{color:var(--placeholder);opacity:1}
.input.has-icon{padding-left:44px}
.input.has-action{padding-right:84px}
.input:hover{border-color:var(--muted)}
.input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 22%,transparent)}
.input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 4px color-mix(in srgb,var(--err) 16%,transparent)}
.control-action{position:absolute;right:2px;top:50%;transform:translateY(-50%);min-height:44px;padding:0 14px;border:0;border-radius:8px;background:none;color:var(--link);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.control-action:hover{background:var(--surface-2)}
.hint{margin:6px 0 0;font-size:13px;color:var(--muted)}
.check{display:flex;align-items:center;gap:10px;min-height:var(--tap);font-size:14px;color:var(--muted);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--blue);flex-shrink:0}

/* ---------- 5. Alerts, badges, cards ---------- */
.alert{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid;font-size:14px;line-height:1.5}
.alert-danger{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
.alert-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.alert-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.alert-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok-ink);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}

.help{margin-top:6px;font-size:14px;color:var(--muted)}
.help summary{display:inline-flex;align-items:center;min-height:var(--tap);cursor:pointer;color:var(--link);font-weight:700;list-style:none}
.help summary::-webkit-details-marker{display:none}
.help[open] summary{text-decoration:underline}
.help p{margin:0 0 8px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}

/* ---------- 6. Auth layout (staff + student login) ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-side{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:48px;
  background:radial-gradient(650px 480px at 15% 0%,rgba(240,215,153,.15),transparent 60%),radial-gradient(700px 600px at 100% 100%,rgba(15,122,108,.28),transparent 60%),linear-gradient(160deg,#081228 0%,#0a1730 45%,#122a56 100%)}
.auth-side::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(circle at 30% 20%,#000,transparent 70%);mask-image:radial-gradient(circle at 30% 20%,#000,transparent 70%)}
.auth-side>*{position:relative;z-index:1}
.auth-brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;color:#fff;text-decoration:none}
.auth-mark{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--gold-2)}
.kicker{display:inline-block;margin-bottom:20px;padding:6px 12px;border-radius:999px;border:1px solid rgba(240,215,153,.4);color:var(--gold-2);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.auth-pitch h2{margin:0 0 14px;color:#fff;font-size:clamp(26px,2.8vw,34px);font-weight:700}
.auth-pitch p{margin:0;max-width:420px;color:#c3cfea;font-size:16px}
.perks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.perks li{display:flex;align-items:center;gap:10px;font-size:15px;color:#dbe4f7}
.perks svg{color:var(--gold-2);flex-shrink:0}
.auth-foot{color:#98a8cb;font-size:13px}
.auth-main{position:relative;display:flex;align-items:center;justify-content:center;padding:32px 24px}
.auth-card{width:min(460px,100%);padding:40px 38px}
.auth-tools{position:absolute;top:16px;right:16px}
.auth-back{display:flex;width:fit-content;align-items:center;gap:6px;min-height:var(--tap);margin:-8px 0 8px -4px;padding:0 4px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none}
.auth-back:hover{color:var(--heading)}
.auth-card h1{margin:12px 0 6px;font-size:28px;font-weight:800;letter-spacing:-.01em}
.auth-lead{margin:0 0 20px;color:var(--muted)}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px}
.auth-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:var(--muted);font-size:13px;text-align:center}
.auth-links a{display:inline-flex;align-items:center;min-height:var(--tap)}
.auth-links{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center;font-size:14px;color:var(--muted);line-height:1.6}

@media (max-width:980px){.auth-card{padding:34px 28px}}
@media (max-width:820px){
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-main{padding:64px 16px 32px}
}
@media (max-width:480px){.auth-card{padding:26px 20px;border-radius:var(--r-md)}.auth-card h1{font-size:25px}}

/* ---------- 7. Accessibility + motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media (prefers-contrast:more){:root{--muted:#3d4a63;--line-strong:#6f7f9f}}
@media (forced-colors:active){.card,.input,.btn,.alert,.icon-btn{border:1px solid CanvasText}}