:root{--bg:#f6f7f6;--card:#fff;--ink:#17191c;--dim:#636a72;--line:#dfe3e1;
--ok:#1f7a4d;--no:#a52222;--wait:#8a6100;--accent:#2f4858;--focus:#2f6fb0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--bg:#121416;--card:#1b1e21;--ink:#eceef0;--dim:#98a0a8;--line:#2b3035;
--ok:#4ec98a;--no:#ff6b6b;--wait:#e0b050;--accent:#9dc3d8;--focus:#7fb2e5}}
:root[data-theme="dark"]{--bg:#121416;--card:#1b1e21;--ink:#eceef0;--dim:#98a0a8;
--line:#2b3035;--ok:#4ec98a;--no:#ff6b6b;--wait:#e0b050;--accent:#9dc3d8;--focus:#7fb2e5}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;padding:24px 16px}
.wrap{max-width:980px;margin:0 auto}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
h1{font-size:20px;margin:0 0 4px}
.sub{color:var(--dim);font-size:13px}
.me{display:flex;gap:10px;align-items:center;color:var(--dim);font-size:12.5px}
.grp{margin:26px 0 10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
padding:14px 16px;margin-bottom:10px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.card h3{margin:0 0 4px;font-size:15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.meta{color:var(--dim);font-size:13px;flex:1;min-width:240px}
.meta span{margin-right:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill{font-size:11px;padding:2px 9px;border-radius:999px;border:1px solid currentColor;
font-weight:600;letter-spacing:.03em}
.p-pending{color:var(--wait)}.p-approved{color:var(--ok)}.p-denied{color:var(--no)}
.p-unregistered{color:var(--dim)}
.acts{display:flex;gap:8px;flex-wrap:wrap}
button{font:inherit;font-size:13px;padding:6px 13px;border-radius:7px;cursor:pointer;
border:1px solid var(--line);background:transparent;color:var(--ink)}
button:hover{border-color:var(--accent)}
button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.apps{display:flex;gap:6px}
.apps a{font-size:13px;padding:6px 13px;border-radius:7px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.apps a:hover{border-color:var(--accent)}
.apps a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button.ok{color:var(--ok)}button.no{color:var(--no)}
button:disabled{opacity:.4;cursor:not-allowed}
.hist{width:100%;border-top:1px solid var(--line);margin-top:4px;padding-top:8px;
font-size:12.5px;color:var(--dim);overflow-x:auto}
.hist table{border-collapse:collapse;width:100%}
.hist td{padding:2px 12px 2px 0;white-space:nowrap;font-variant-numeric:tabular-nums}
.empty{color:var(--dim);font-size:14px;padding:10px 2px}
.more{color:var(--dim);font-size:12.5px;padding:4px 2px}
.err{color:var(--no);font-size:13px;padding:10px 0;min-height:1em}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 0;border-bottom:1px solid var(--line);padding-bottom:10px}
.tabs button{border-radius:999px}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.tabs span{font-variant-numeric:tabular-nums;opacity:.8}
.card{flex-direction:column;gap:10px}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;width:100%}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 18px;margin:0;width:100%;font-size:13px}
.facts dt{color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.facts dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.facts code{font-size:12px}
.dim{color:var(--dim)}
.hist h4{margin:10px 0 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.hist th{text-align:left;font-weight:600;padding:2px 12px 2px 0;white-space:nowrap}
.hist p{margin:4px 0}
.more-btn{padding:6px 0 16px}
h2.grp{font-weight:600}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* /register */
.wrap.narrow{max-width:640px}
.notice{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:16px 0}
.notice p{margin:0 0 8px}.notice p:last-child{margin-bottom:0}
.notice ol{margin:6px 0 0;padding-left:20px}
.notice:focus{outline:none}
#main .card{margin-top:12px}

/* Nothing shows until sign-in is settled, so the page never flashes before the
   redirect to Microsoft. The JS removes .authing once signed in (or to show an
   error); the delayed animation is a fallback so a script failure can't leave
   the page blank forever. */
html.authing body{visibility:hidden;animation:authing-reveal 0s 8s forwards}
@keyframes authing-reveal{to{visibility:visible}}

/* search + filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.filters input,.filters select{font:inherit;font-size:13px;padding:6px 10px;border-radius:7px;
border:1px solid var(--line);background:var(--card);color:var(--ink)}
.filters input{flex:1 1 260px;min-width:0}
.filters input:focus-visible,.filters select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.status{color:var(--ok);font-size:13px;min-height:1em;margin-top:-4px}
/* a decision in flight */
.card.working{opacity:.85}
button.busy,button.busy:disabled{opacity:1;cursor:progress;border-color:currentColor}
button.busy::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:7px;
vertical-align:-.08em;border:2px solid currentColor;border-right-color:transparent;
border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button.busy::before{animation-duration:2.4s}}

/* register: set up a new device */
.p-new{color:var(--accent)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.setup .tabs{margin:10px 0 4px}
.setup a{color:var(--accent)}