/* Intelligenix Context: sign-in and people pages. Tokens from prototype/src/head.html; light default, dark via
   data-theme (the prototype's ixctx.theme choice). */
:root{
  color-scheme:light;
  --bg:#f3f5fa; --surface:#ffffff; --surface-2:#f1f4f9; --surface-3:#e3e8f1;
  --line:rgba(15,23,42,.09); --line-2:rgba(15,23,42,.17);
  --text:#0c1424; --text-2:#3a465c; --muted:#6b7890; --faint:#9aa5b8;
  --accent:#078a70; --accent-2:#00b894; --accent-ink:#ffffff; --accent-soft:rgba(7,138,112,.10); --accent-line:rgba(7,138,112,.38);
  --good:#15803d; --warn:#b45309; --crit:#dc2626; --crit-line:rgba(220,38,38,.45);
  --shadow:0 30px 80px -30px rgba(15,23,42,.35);
  --mark-bg:linear-gradient(135deg,rgba(7,138,112,.18),rgba(37,99,235,.14));
  --display:"Syne",system-ui,sans-serif; --body:"Plus Jakarta Sans",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#06080f; --surface:#0d1220; --surface-2:#121a2c; --surface-3:#182238;
  --line:rgba(148,163,184,.13); --line-2:rgba(148,163,184,.24);
  --text:#e7edf7; --text-2:#aab6c8; --muted:#74829a; --faint:#4b566b;
  --accent:#00d4a8; --accent-2:#5ff0cf; --accent-ink:#052b23; --accent-soft:rgba(0,212,168,.12); --accent-line:rgba(0,212,168,.35);
  --good:#4ade80; --warn:#f59e0b; --crit:#ff6b6b; --crit-line:rgba(255,107,107,.5);
  --shadow:0 40px 90px -30px rgba(0,0,0,.85);
  --mark-bg:linear-gradient(135deg,rgba(0,212,168,.25),rgba(37,99,235,.2));
}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 var(--body);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}
.mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--mark-bg);border:1px solid var(--accent-line);font:800 13px var(--display);color:var(--accent)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand b{font:700 15px var(--display);display:block;line-height:1.1}
.brand small{font:11px var(--mono);color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.eyebrow{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{font:700 26px/1.15 var(--display);letter-spacing:-.01em}
h2{font:700 17px var(--display)}
.lede{color:var(--text-2)}
label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--text-2)}
input,select{width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface-2);font-size:15px}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[readonly]{color:var(--muted)}
.hint{font-size:12px;color:var(--muted);font-weight:400}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);font-weight:600;cursor:pointer;text-decoration:none;color:var(--text)}
.btn:hover{border-color:var(--accent-line)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn.small{padding:6px 10px;font-size:13px}
.btn.danger{color:var(--crit);border-color:var(--crit-line)}
.alert{padding:10px 12px;border-radius:9px;font-size:14px;border:1px solid var(--crit-line);color:var(--crit);background:color-mix(in oklab,var(--crit) 8%,transparent)}
.alert.ok{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.mono{font-family:var(--mono);font-size:12px}

/* sign-in */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.auth .panel{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(16px,6vw,88px);gap:28px}
.auth form{display:grid;gap:16px;max-width:400px;width:100%}
.auth .foot{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);max-width:400px}
.auth .art{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 80% 10%,var(--accent-soft),transparent 60%),var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:48px}
.auth .art .line{font:700 clamp(28px,3.4vw,44px)/1.08 var(--display);letter-spacing:-.02em;max-width:14ch}
.auth .art .line em{font-style:normal;color:var(--accent)}
.auth .art p{margin-top:14px;color:var(--text-2);max-width:44ch}
.auth .bars{position:absolute;inset:48px 48px auto 48px;display:grid;gap:10px;opacity:.9}
.auth .bars div{display:grid;grid-template-columns:92px 1fr 34px;gap:10px;align-items:center;font:11px var(--mono);color:var(--muted)}
.auth .bars i{height:6px;border-radius:3px;background:var(--surface-3);position:relative;overflow:hidden}
.auth .bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:3px}
@media (max-width:860px){.auth{grid-template-columns:1fr}.auth .art{display:none}}

/* people */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(16px,2vw,28px);border-bottom:1px solid var(--line);background:var(--surface)}
.top nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
main.page{max-width:980px;margin:0 auto;padding:28px clamp(16px,2vw,28px) 64px;display:grid;gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:14px}
.invite-form{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:10px;align-items:end}
@media (max-width:640px){.invite-form{grid-template-columns:1fr}}
.linkbox{display:flex;gap:8px;align-items:center}
.linkbox input{font:12px var(--mono)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table td:last-child,.table th:last-child{text-align:right}
.scroll{overflow-x:auto}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--text-2)}
.pill.active,.pill.pending{color:var(--accent);border-color:var(--accent-line)}
.pill.disabled,.pill.revoked,.pill.expired{color:var(--muted)}
.empty{color:var(--muted);font-size:14px;padding:6px 0}