:root {
  --bg: #16161a;
  --fg: #d3d1c7;
  --dim: #888780;
  --green: #5dcaa5;
  --blue: #85b7eb;
  --amber: #ef9f27;
  --font: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.7 var(--font);
}

.term {
  max-width: 82ch;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

p { margin: 0 0 4px; white-space: pre-wrap; }
p + .cmd, ul + .cmd, .ls + form { margin-top: 14px; }
.ps1 { color: var(--green); white-space: nowrap; }
#prompt .ps1 { margin-right: 1ch; }

a { color: var(--blue); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.ls { list-style: none; margin: 0; padding: 0; }
.ls li { display: flex; flex-wrap: wrap; column-gap: 2ch; }
.perm.public { color: var(--green); }
.perm.private { color: var(--amber); }
.name { color: var(--fg); }
.note { color: var(--dim); }
.err { color: var(--amber); }

#prompt { display: flex; align-items: baseline; }
#cmd {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--fg);
  font: inherit;
  caret-color: var(--fg);
  caret-shape: block;
}

.hint { color: var(--dim); font-size: 13px; margin-top: 24px; }
kbd { font: inherit; color: var(--fg); }

/* --- admin and sign-up --- */
.term.wide { max-width: 120ch; }
h2 { font: inherit; color: var(--fg); margin: 28px 0 8px; }
b { font-weight: 600; color: var(--fg); }
.ok { color: var(--green); }
.secret { display: flex; gap: 1ch; margin: 8px 0; }
.secret input { flex: 1; color: var(--amber); }
table { border-collapse: collapse; width: 100%; margin: 4px 0 12px; font-size: 14px; }
th { text-align: left; color: var(--dim); font-weight: normal; border-bottom: 1px solid #2c2c32; }
th, td { padding: 4px 1.5ch 4px 0; vertical-align: top; }
tr.dim td { color: var(--dim); }
td.private { color: var(--amber); }
td.public { color: var(--green); }
.fields { display: grid; gap: 6px; margin: 8px 0 16px; max-width: 70ch; }
.fields label, .groups { display: flex; gap: 1ch; align-items: baseline; white-space: pre; color: var(--dim); }
.groups { flex-wrap: wrap; }
.fields .check, .groups .check { white-space: normal; color: var(--fg); }
input, select {
  font: inherit; color: var(--fg); background: transparent; min-width: 0;
  border: 0; border-bottom: 1px solid #3a3a42; padding: 2px 0; border-radius: 0;
}
.fields input:not([type=checkbox]), .fields select { flex: 1; }
input:focus, select:focus { outline: 0; border-bottom-color: var(--green); }
select option { background: var(--bg); }
input[type=checkbox] { accent-color: var(--green); }
button { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; }
button:hover, button:focus-visible { text-decoration: underline; outline: 0; }
form.inline { display: inline; }
.tag { display: inline-flex; gap: 0.5ch; border: 1px solid #3a3a42; padding: 0 0.6ch; margin: 1px 0; }
.tag button { color: var(--dim); }
.tag button:hover { color: var(--amber); }
@media (max-width: 700px) {
  table, tr, td, th { display: block; }
  tr { border-bottom: 1px solid #2c2c32; padding: 6px 0; }
  th { display: none; }
  td { padding: 0; }
}