/* The sign-in and account pages, in the viewer's look (tokens as in static/style.css: the UROP design). */
:root { color-scheme: light;
  --page:#f7f5f1; --surface:#ffffff; --surface-2:#f2eee8; --text:#1e1a16; --text-2:#5b5249; --muted:#857b70;
  --border:#e4ded4; --border-strong:#cdc4b6; --brand:#782f40; --brand-hover:#5e2331; --brand-soft:#f5e9ec;
  --brand-text:#782f40; --on-brand:#fff; --gold-soft:#f7f1e2;
  --good:#1f6b45; --good-soft:#e2f1e8; --bad:#b3261e; --bad-soft:#fbe9e7;
  --shadow:0 1px 2px rgba(30,26,22,.05), 0 3px 10px rgba(30,26,22,.04); --radius:14px; --radius-sm:9px; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark;
  --page:#141210; --surface:#1d1a17; --surface-2:#27231f; --text:#f1ece5; --text-2:#c9c0b4; --muted:#a69d91;
  --border:#35302a; --border-strong:#4b443b; --brand:#b04f66; --brand-hover:#c25f77; --brand-soft:#3a2027;
  --brand-text:#eaa2b3; --gold-soft:#2c2619;
  --good:#7fd3a2; --good-soft:#193022; --bad:#f3968d; --bad-soft:#3c1d1a; --shadow:0 1px 2px rgba(0,0,0,.3); } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--page); color:var(--text); -webkit-font-smoothing: antialiased;
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
a { color: var(--brand-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }

/* top bar (signed in) */
.topbar { background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.topbar-inner { max-width:1080px; margin:0 auto; padding:8px 20px; display:flex; align-items:center; flex-wrap:wrap;
  gap:8px 28px; min-height:64px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--text); text-decoration:none; font-weight:700; font-size:16px; }
.brand-mark { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  background:var(--brand); color:var(--on-brand); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.brand-mark svg { width:24px; height:24px; display:block; }
.brand-mark-lg { width:56px; height:56px; border-radius:16px; }
.brand-mark-lg svg { width:36px; height:36px; }
.nav { display:flex; gap:2px; flex:1; flex-wrap:wrap; }
.nav a { padding:8px 12px; border-radius:9px; color:var(--muted); font-weight:600; font-size:15px; text-decoration:none; }
.nav a:hover { background:var(--surface-2); color:var(--text); }
.nav a[aria-current="page"] { background:var(--brand-soft); color:var(--brand-text); }
.who { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:14px; font-weight:600; }
.avatar { width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; background:var(--brand);
  color:var(--on-brand); font-size:11.5px; font-weight:700; letter-spacing:.02em; }
@media (max-width: 640px) { .who-text { display:none; } .nav { order:3; flex-basis:100%; } }

/* page bodies */
.page { max-width:640px; margin:0 auto; padding:32px 20px 56px; }
.page.wide { max-width:1080px; }
.auth { max-width:420px; margin:0 auto; padding:9vh 20px 56px; }
.auth-mark { display:flex; justify-content:center; margin:0 0 16px; }
.auth > h1, .auth > .lead { text-align:center; }
h1 { font-size:clamp(25px, 4vw, 30px); letter-spacing:-0.015em; line-height:1.25; margin:0 0 8px; }
.lead { color:var(--muted); margin:0 0 24px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  margin:0 0 20px; box-shadow:var(--shadow); min-width:0; }
.card h2 { font-size:18px; margin:0 0 14px; }
.field { margin:0 0 18px; }
.field label { display:block; font-weight:650; margin:0 0 6px; }
.field .hint { display:block; font-size:14px; color:var(--muted); margin:6px 0 0; }
input[type=text], input[type=password] { width:100%; font:inherit; line-height:1.45; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 12px; }
input:focus { outline:none; border-color:var(--brand-text); box-shadow:0 0 0 3px var(--brand-soft); }
input::placeholder { color:var(--muted); opacity:.75; }
button { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:15px; font-weight:600;
  line-height:1.3; border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:9px 16px; background:var(--surface);
  color:var(--text); cursor:pointer; transition: background .12s, border-color .12s; }
button:hover { background:var(--surface-2); }
button.primary { background:var(--brand); border-color:var(--brand); color:var(--on-brand); width:100%; margin-top:4px; }
button.primary:hover { background:var(--brand-hover); border-color:var(--brand-hover); }
button.small { padding:5px 11px; font-size:14px; border-radius:8px; }
.flash { border-radius:11px; padding:12px 16px; margin:0 0 18px; font-weight:500; }
.flash-error { background:var(--bad-soft); color:var(--bad); }
.flash-success { background:var(--good-soft); color:var(--good); }
.muted { color:var(--muted); font-size:15px; }
.auth > .muted { text-align:center; }
.link-box { display:flex; gap:8px; }
.link-box input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; background:var(--gold-soft); }
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { text-align:left; padding:10px 14px; border-top:1px solid var(--border); vertical-align:middle; }
thead th { border-top:0; background:var(--surface-2); font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
form.inline { display:inline; margin-left:6px; }