:root { color-scheme: dark; --bg:#0f1115; --fg:#e5e8ec; --muted:#8b93a1; --card:#171b22; --line:#2a303a; --hover:#20252e; --accent:#2dd4bf; --accent-fg:#06302b; --danger:#f87171; --ok:#4ade80; --accent-bg:rgba(45,212,191,.12); --danger-bg:rgba(248,113,113,.12); --danger-border:rgba(248,113,113,.35); --ok-bg:rgba(74,222,128,.12); --pad:24px; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--fg); -webkit-text-size-adjust:100%; -webkit-tap-highlight-color: rgba(45,212,191,.15); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
header.top { display:flex; align-items:center; gap:24px; padding:10px var(--pad); background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:18px; color:var(--fg); white-space:nowrap; } .brand span { color:var(--muted); font-weight:400; }
header nav { display:flex; gap:4px; flex:1; }
header nav a { padding:6px 10px; border-radius:6px; color:var(--fg); white-space:nowrap; }
header nav a.active, header nav a:hover { background:var(--hover); text-decoration:none; }
.me { display:flex; align-items:center; gap:4px; min-width:0; color: var(--muted); }
.me-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
main { max-width: 1320px; margin: 0 auto; padding: 20px var(--pad) 60px; }
/* the column is wide for the tables; keep running text at a readable measure */
main > p, .card > p { max-width: 78ch; }
footer { text-align:center; color:var(--muted); font-size:12px; padding: 20px; }
h1 { font-size: 24px; margin: 8px 0 16px; } h2 { font-size: 16px; margin: 20px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:18px; }
.cols { display:grid; grid-template-columns: 1fr 1fr; gap:18px; } @media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }
form.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px 16px; align-items:end; }
form.grid label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
form.grid label.check { flex-direction:row; align-items:center; color:var(--fg); }
input, select { font: inherit; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); max-width:100%; }
input.wide { width:100%; }
button { font: inherit; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; }
button:hover { background:var(--hover); }
button.primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
button.danger { color:var(--danger); border-color:var(--danger-border); } button.danger:hover { background:var(--danger-bg); }
button.link { border:0; background:none; color:var(--accent); padding:0 4px; }
form.inline { display:inline-flex; gap:4px; } .inline-row { display:flex; gap:8px; align-items:end; margin: 10px 0 0; }
form.row-form { display:none; }
/* a dense row must scroll inside its own box, never push the page sideways */
.table-wrap { overflow-x: auto; }
table { width:100%; border-collapse: collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align: middle; }
th { font-size:12px; text-transform: uppercase; letter-spacing:.04em; color:var(--muted); background:var(--hover); }
tr:last-child td { border-bottom:0; } tr.disabled td { opacity:.55; }
td.actions, th.actions { text-align:right; white-space: nowrap; }
td.actions button { margin-left: 4px; }
.tag { display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:var(--hover); color:var(--muted); }
.tag.ok { background:var(--ok-bg); color:var(--ok); } .tag.err { background:var(--danger-bg); color:var(--danger); } .tag.admin { background:var(--accent-bg); color:var(--accent); }
.muted { color: var(--muted); } code { font-size: 13px; background: var(--hover); padding: 1px 5px; border-radius: 4px; overflow-wrap:anywhere; }
#flash { position: sticky; top: 0; z-index: 5; } .flash { margin: 0; padding: 10px var(--pad); cursor: pointer; }
.flash.ok { background:#12291c; color:var(--ok); } .flash.err { background:#301619; color:var(--danger); }
.stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; display:flex; flex-direction:column; }
.stat b { font-size: 28px; } .stat span { color: var(--muted); font-size: 13px; }
ul.events, ul.tx { list-style:none; padding:0; margin:0; background:var(--card); border:1px solid var(--line); border-radius:10px; }
ul.events li, ul.tx li { padding:8px 12px; border-bottom:1px solid var(--line); } ul.events li:last-child, ul.tx li:last-child { border-bottom:0; }
ul.events time { color:var(--muted); font-variant-numeric: tabular-nums; margin-right: 8px; }
.invite-result { display:flex; gap:18px; align-items:flex-start; margin-top: 12px; padding-top: 12px; border-top:1px solid var(--line); }
.invite-result .qr img { width: 200px; height: 200px; image-rendering: pixelated; background:#fff; padding:8px; border:1px solid var(--line); border-radius: 8px; }
.copy-row { display:flex; gap:8px; align-items:center; }
.login { max-width: 380px; margin: 60px auto; } .login form { display:flex; flex-direction:column; gap:12px; }
.login label { display:flex; flex-direction:column; gap:4px; font-size: 13px; color: var(--muted); }

input.w5 { width: 5em; } input.w7 { width: 7em; }

/* member picker: tick users to add them to a group in one go */
.picklist { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:2px 10px; max-height:266px; overflow-y:auto; margin-top:10px; padding:6px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.picklist label.pick { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; cursor:pointer; }
.picklist label.pick:hover { background:var(--hover); }
.picklist label.pick[hidden] { display:none; }
.picklist input[type=checkbox] { flex:0 0 auto; }
label.pill { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); white-space:nowrap; }

/* group membership tags on the users page */
#users-table td:first-child { white-space:nowrap; }
td.groups { min-width:210px; }
td.groups .grouptags { display:inline-flex; flex-wrap:wrap; gap:4px; }
td.groups form.inline { margin-top:4px; }
.tag a { color:inherit; }
.tag .x { padding:0 0 0 5px; border:0; background:none; color:inherit; opacity:.55; font-size:14px; line-height:1; cursor:pointer; }
.tag .x:hover { opacity:1; color:var(--danger); background:none; }

/* the users row carries the most controls, so its actions wrap onto a second
   line rather than stretch the table past the page (phones stack them anyway) */
@media (min-width: 721px) {
  #users-table td.actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px 4px; white-space:normal; }
  #users-table td.actions button { margin-left:0; }
  #users-table td form.inline { min-width:0; max-width:100%; }
}

/* ---------------- phones & narrow windows ---------------- */
@media (max-width: 720px) {
  :root { --pad: 14px; }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

  /* header: brand + account on one line, nav as a scrollable strip below */
  header.top { flex-wrap:wrap; gap:8px 12px; padding:8px var(--pad) 0; padding-top: max(8px, env(safe-area-inset-top)); }
  .brand { font-size:17px; }
  .me { order:2; margin-left:auto; max-width:60%; }
  .me .link { padding:8px 4px; }
  /* the tabs do not fit on a phone, so the strip scrolls; the fade hints that there is more */
  header nav { order:3; flex-basis:100%; gap:2px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; margin:0 calc(var(--pad) * -1); padding:2px var(--pad) 6px; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  header nav::-webkit-scrollbar { display:none; }
  header nav a { padding:8px 10px; }

  main { padding: 14px var(--pad) 48px; }
  h1 { font-size:21px; margin:4px 0 14px; } h2 { margin:18px 0 8px; }
  .card { padding:14px; border-radius:12px; }

  /* 16px keeps iOS Safari from zooming in on focus; 44px is a comfortable tap target */
  input, select, button { font-size:16px; min-height:44px; }
  input, select { padding:9px 11px; }
  button { padding:10px 14px; }
  button.link { min-height:0; font-size:15px; }
  input[type=checkbox] { min-height:0; width:22px; height:22px; }
  input.w5, input.w7 { width:auto; }

  form.grid { grid-template-columns: 1fr; gap:12px; }
  form.inline { display:flex; }
  .inline-row { flex-wrap:wrap; }
  .inline-row > * { flex:1 1 auto; } .inline-row button { flex-basis:100%; }

  /* tables become stacked cards: the header row is dropped and each cell labels itself */
  table { border:0; background:none; border-radius:0; overflow:visible; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%); }
  tr { display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; padding:2px 14px; }
  tbody tr:last-child { margin-bottom:0; }
  td { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; justify-content:space-between; padding:9px 0; }
  tr td:last-child { border-bottom:0; }
  td[data-label]::before { content: attr(data-label); flex:0 0 auto; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
  td:first-child { padding-top:12px; font-size:16px; justify-content:flex-start; } td:first-child::before { display:none; }
  td.actions { text-align:left; white-space:normal; justify-content:flex-start; gap:8px; }
  td.actions button { margin-left:0; flex:1 1 auto; }
  td form.inline { flex:1 1 100%; } td form.inline input { flex:1 1 0; min-width:0; }
  td select, td input[type=number] { flex:1 1 auto; min-width:0; }
  td[colspan] { justify-content:flex-start; }

  .picklist { grid-template-columns:1fr; max-height:50vh; }
  .inline-row label.pill { flex:1 1 140px; }
  .inline-row label.pill select, .inline-row label.pill input { flex:1 1 auto; min-width:0; }
  td.groups { min-width:0; align-items:flex-start; }
  td.groups .grouptags { justify-content:flex-end; }
  td.groups form.inline { flex-basis:100%; }
  /* a chip holds two tap targets (open the group, drop the membership) — give both room */
  td.groups .tag { display:inline-flex; align-items:center; padding:4px 4px 4px 10px; font-size:13px; }
  .tag .x { min-height:0; font-size:17px; padding:4px 8px; }
  main > p a, td:first-child a { display:inline-block; padding:5px 0; }

  .stat b { font-size:24px; }
  .invite-result { flex-direction:column; align-items:center; text-align:center; }
  .invite-result .qr img { width:min(240px, 70vw); height:auto; }
  .copy-row { flex-wrap:wrap; } .copy-row button { flex:1 1 100%; }
  .login { margin:24px auto; }
}

/* /i/{token} landing page: the one page here served to end users, not admins */
.landing { max-width: 460px; margin: 60px auto; text-align: center; }
.landing .lead { font-size: 17px; margin: 4px 0 22px; }
a.cta { display:inline-block; background:var(--accent); color:var(--accent-fg); font-weight:600; padding:12px 26px; border-radius:8px; }
a.cta:hover { text-decoration:none; filter: brightness(1.08); }
a.cta.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); margin-top:14px; }
.landing .small { font-size: 13px; }
@media (max-width: 720px) { .landing { margin:24px auto; } a.cta { display:block; padding:14px 26px; } }