/* ============================================================
   UMS Demo — Base: reset, typography, app shell, layout grid
   Mobile-first. Sidebar collapses under 960px.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-2);line-height:var(--lh);color:var(--ink);background:var(--shell);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0 0 var(--s-2);line-height:1.25;font-weight:650;letter-spacing:-.01em}
h1{font-size:var(--fs-6)} h2{font-size:var(--fs-5)} h3{font-size:var(--fs-4)} h4{font-size:var(--fs-3)}
p{margin:0 0 var(--s-3)}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{max-width:100%;display:block}
table{border-collapse:collapse;width:100%}
code,.mono{font-family:var(--mono);font-size:.92em}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--ink-3)} .small{font-size:var(--fs-0)} .strong{font-weight:650}
.right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.flex{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap} .flex.between{justify-content:space-between} .flex.end{justify-content:flex-end}
.grow{flex:1 1 auto} .stack>*+*{margin-top:var(--s-3)}
.grid{display:grid;gap:var(--s-3)} .grid.g2{grid-template-columns:repeat(2,1fr)} .grid.g3{grid-template-columns:repeat(3,1fr)} .grid.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.g4{grid-template-columns:repeat(2,1fr)} .grid.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}}
.mt-1{margin-top:var(--s-1)} .mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)}
.mb-2{margin-bottom:var(--s-2)} .mb-3{margin-bottom:var(--s-3)} .mb-4{margin-bottom:var(--s-4)}
.w-100{width:100%}

/* ---------- App shell ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;height:var(--top-h);background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-4);box-shadow:var(--sh-2)}
.topbar .brand{display:flex;align-items:center;gap:var(--s-3);min-width:0;flex:0 1 auto;overflow:hidden}
.topbar .brand .logo{width:34px;height:34px;border-radius:var(--r-2);background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.02em;flex:none}
.topbar .brand .name{font-weight:650;font-size:var(--fs-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .brand .sub{font-size:var(--fs-0);opacity:.8;white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .tb-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:inherit;border-radius:var(--r-2);padding:6px 10px;font-size:var(--fs-1);display:inline-flex;align-items:center;gap:6px;min-height:34px;white-space:nowrap}
.topbar .tb-btn:hover{background:rgba(255,255,255,.2)}
.topbar .tb-btn.icon{padding:6px 8px}
.topbar .user{display:flex;align-items:center;gap:8px;font-size:var(--fs-1)}
.topbar .user .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-weight:700;font-size:12px}
.topbar .role-chip{font-size:11px;background:rgba(0,0,0,.18);padding:2px 8px;border-radius:var(--r-pill)}
.hamburger{display:none}
.body{display:flex;flex:1;min-height:0}
.sidebar{width:var(--side-w);flex:none;background:var(--paper);border-right:1px solid var(--line);position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));overflow:auto;padding:var(--s-3) 0}
.sidebar .sec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:var(--s-4) var(--s-4) var(--s-1);font-weight:650}
.sidebar a.nav{display:flex;align-items:center;gap:10px;padding:9px var(--s-4);color:var(--ink-2);border-left:3px solid transparent;font-size:var(--fs-2);min-height:40px}
.sidebar a.nav:hover{background:var(--paper-2);text-decoration:none}
.sidebar a.nav.active{background:var(--brand-soft);color:var(--brand);border-left-color:var(--brand);font-weight:650}
.sidebar a.nav .ic{width:20px;text-align:center;font-size:15px;opacity:.85}
.sidebar a.nav .cnt{margin-left:auto;font-size:11px;background:var(--paper-3);border-radius:var(--r-pill);padding:1px 7px;color:var(--ink-3)}
.sidebar a.nav.active .cnt{background:var(--brand);color:#fff}
.sidebar .foot{padding:var(--s-4);font-size:11px;color:var(--ink-4);border-top:1px solid var(--line-2);margin-top:var(--s-4)}
main.content{flex:1;min-width:0;padding:var(--s-5) var(--s-6) var(--s-9)}
main.content>.inner{max-width:var(--content-max);margin:0 auto}
.page-head{display:flex;align-items:flex-start;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-5)}
.page-head h1{margin:0;font-size:var(--fs-6)}
.page-head .sub{color:var(--ink-3);font-size:var(--fs-2);margin-top:2px}
.page-head .actions{margin-left:auto;display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.page-head .actions .input{width:auto;min-width:160px}
.scr-id{font-family:var(--mono);font-size:10px;letter-spacing:.06em;background:var(--ink);color:#fff;padding:2px 7px;border-radius:var(--r-1);vertical-align:middle;margin-left:8px}
body:not(.show-scr) .scr-id{display:none}
.crumbs{font-size:var(--fs-1);color:var(--ink-3);margin-bottom:var(--s-2)} .crumbs a{color:var(--ink-3)} .crumbs b{color:var(--ink);font-weight:600}
.demo-foot{text-align:center;font-size:11px;color:var(--ink-4);padding:var(--s-4);border-top:1px solid var(--line-2);background:var(--paper)}
.demo-foot b{color:var(--ink-3)}
.overlay-dim{position:fixed;inset:0;background:rgba(16,24,40,.35);z-index:35;display:none}

@media (max-width:960px){
  .hamburger{display:inline-flex}
  .sidebar{position:fixed;left:0;top:var(--top-h);height:calc(100vh - var(--top-h));z-index:36;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--sh-3)}
  body.side-open .sidebar{transform:none}
  body.side-open .overlay-dim{display:block}
  main.content{padding:var(--s-4) var(--s-4) var(--s-9)}
  .topbar .brand .sub,.topbar .user .nm{display:none}
}
@media (max-width:600px){
  .topbar .tb-btn.aux{display:none}
  .topbar .user .av{display:none}
  .topbar .brand .name{font-size:var(--fs-2)}
  main.content{padding:var(--s-3) var(--s-3) var(--s-9)}
  .page-head h1{font-size:var(--fs-5)}
  .topbar{padding:0 var(--s-3);gap:var(--s-2)}
  .topbar .tb-btn .lbl{display:none}
}

/* ---------- Public (applicant) shell — no sidebar, centered ---------- */
.public{max-width:920px;margin:0 auto;padding:var(--s-5) var(--s-4) var(--s-9)}
.public.narrow{max-width:640px}
@media (max-width:600px){.public{padding:var(--s-3) var(--s-3) var(--s-9)}}

/* ---------- Phone frame ---------- */
body.phone-mode .body{justify-content:center;background:radial-gradient(circle at 50% 30%,#e7ebf1,#cfd6df)}
body.phone-mode .sidebar{display:none}
body.phone-mode main.content{flex:none;width:390px;min-height:760px;max-height:calc(100vh - 100px);overflow:auto;background:var(--shell);border:12px solid #1c2129;border-radius:44px;margin:var(--s-5) auto;padding:var(--s-3) var(--s-3) var(--s-8);box-shadow:var(--sh-3)}
body.phone-mode main.content>.inner{max-width:none}
body.phone-mode .demo-foot{display:none}
body.phone-mode .grid.g2,body.phone-mode .grid.g3,body.phone-mode .grid.g4{grid-template-columns:1fr}
body.phone-mode .page-head h1{font-size:var(--fs-5)}
body.phone-mode .table-wrap{overflow-x:auto}