:root {
  color-scheme: light dark;
  --page: #f2f5f3;
  --surface: #ffffff;
  --ink: #16211d;
  --muted: #5a6964;
  --line: #d6ded9;
  --canopy: #1b3a31;
  --canopy-ink: #e6efe9;
  --canopy-muted: #abc1b7;
  --canopy-lift: #2c5547;
  --canopy-line: #34574b;
  --canopy-focus: #9cc8ea;
  --leaf: #1b3a31;
  --river: #2b6390;
  --on-fill: #ffffff;
  --active: #2c7a4b;
  --active-bg: #e2f1e6;
  --disabled: #a23d2a;
  --disabled-bg: #f7e3de;
  --unvouched: #83600a;
  --unvouched-bg: #f5ebd0;
  --river-bg: #e4eef7;
  --font: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #111815;
    --surface: #182220;
    --ink: #e1e9e4;
    --muted: #97a6a0;
    --line: #2a3632;
    --canopy: #0c1a16;
    --canopy-ink: #e6efe9;
    --canopy-muted: #93aba0;
    --canopy-lift: #1c362e;
    --canopy-line: #22392f;
    --canopy-focus: #7fb2dc;
    --leaf: #8fc4ae;
    --river: #7fb2dc;
    --on-fill: #0f1a16;
    --active: #86d3a3;
    --active-bg: #173826;
    --disabled: #f0a28e;
    --disabled-bg: #42211a;
    --unvouched: #e4c46e;
    --unvouched-bg: #382e12;
    --river-bg: #16293a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 var(--font);
  color: var(--ink);
  background: var(--page);
}

h1, h2 { margin: 0; font-weight: 700; line-height: 1.2; }
h1 { font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 17px; }
p { margin: 0 0 12px; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--river); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; }

.num, time { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


.shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 232px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "brand title account"
    "side main main";
}

.shell::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / -1;
  background: var(--canopy);
}

.wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.shell .wordmark {
  grid-area: brand;
  align-self: end;
  padding: 32px 24px 22px;
  color: var(--canopy-ink);
}

.shell .wordmark:focus-visible,
.side a:focus-visible { outline-color: var(--canopy-focus); }

.side { grid-area: side; padding: 4px 12px 32px; }
.side a {
  display: block;
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--canopy-muted);
  text-decoration: none;
}
.side a:hover { color: var(--canopy-ink); background: rgb(255 255 255 / 0.05); }
.side a[aria-current='page'] { color: var(--canopy-ink); background: var(--canopy-lift); font-weight: 600; }
.side ul + ul { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--canopy-line); }

.title { grid-area: title; align-self: end; padding: 28px 32px 18px; }

.account {
  grid-area: account;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  column-gap: 16px;
  padding: 28px 32px 22px 16px;
  font-size: 13px;
}
.account .who { color: var(--muted); }

main { grid-area: main; min-width: 0; max-width: 1100px; padding: 6px 32px 64px; }

@media (max-width: 899.98px) {
  .shell {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "brand account"
      "side side"
      "title title"
      "main main";
  }
  .shell::before { grid-column: 1 / -1; grid-row: 1 / 3; }
  .shell .wordmark { align-self: center; padding: 14px 16px 10px; white-space: nowrap; }
  .account { align-self: center; padding: 14px 16px 10px 0; column-gap: 12px; row-gap: 0; }
  .account .who { color: var(--canopy-muted); overflow-wrap: anywhere; text-align: right; }
  .account a { color: var(--canopy-ink); }
  .account a:focus-visible { outline-color: var(--canopy-focus); }
  .side { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 12px; }
  .side ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .side ul + ul { margin: 0; padding: 0; border: 0; }
  .side a { padding: 5px 12px; }
  .title { padding: 22px 16px 14px; }
  h1.title { font-size: 21px; }
  main { padding: 0 16px 48px; }
  :is(.shell, .lone) .card { padding: 18px 20px; }
}


.lone { padding: 12vh 16px 48px; }
.lone-wrap { width: min(100%, 420px); margin: 0 auto; }
.lone .wordmark { display: block; margin: 0 0 16px 4px; color: var(--leaf); }
.lone h1 { font-size: 21px; margin-bottom: 16px; }
.lone form:not(:last-child) { margin-bottom: 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 28px;
}
.card > :last-child { margin-bottom: 0; }
.card-signin { box-shadow: 0 1px 2px rgb(22 33 29 / 0.06), 0 10px 28px rgb(22 33 29 / 0.07); }
.card-signin button { width: 100%; margin-top: 4px; }

.msg, #status {
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--disabled-bg);
  color: var(--ink);
}
#status { margin: 20px 0 0; }
#status:empty { display: none; }
.lone #status { width: min(100%, 420px); margin: 16px auto 0; }


label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }

input, select {
  min-width: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 38px;
  padding: 0 10px;
}
input:hover, select:hover { border-color: var(--muted); }

button {
  font: inherit;
  font-weight: 600;
  min-height: 38px;
  padding: 6px 16px;
  border: 1px solid var(--leaf);
  border-radius: 6px;
  background: var(--leaf);
  color: var(--on-fill);
  cursor: pointer;
}
button:hover { filter: brightness(1.12); }
button.quiet { min-height: 28px; padding: 2px 10px; font-size: 13px; background: transparent; color: var(--ink); border-color: var(--line); }
button.quiet:hover { filter: none; border-color: var(--disabled); color: var(--disabled); }
button.danger { background: var(--disabled); border-color: var(--disabled); }

.bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 20px; }
.bar label { flex: 0 1 15rem; }
.bar label.wide { flex: 1 1 18rem; max-width: 22rem; }
.bar > a { align-self: center; padding: 8px 4px 0; }
.hint { margin: -12px 0 20px; font-size: 13px; color: var(--muted); }

@media (max-width: 899.98px) {
  .bar label, .bar label.wide { flex: 1 1 100%; max-width: none; }
}


.listhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; }
.listhead p { margin: 0 0 8px; }

/* Between the phone layout and a wide screen the columns can outgrow
   main: the table scrolls, the page does not. */
.table-scroll { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.table th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td.email, .table td.num, .table td .none { white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table td.email { font-weight: 600; }

.empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 10px;
}

@media (max-width: 899.98px) {
  .table, .table tbody, .table tr, .table td { display: block; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 3px 0; border: 0; overflow-wrap: anywhere; }
  .table td > * { justify-self: start; }
  .table td.email { display: block; padding: 0 0 6px; font-size: 17px; white-space: normal; }
  .table td.email::before { content: none; }
  .summary .badge { font-size: 13px; padding: 2px 12px 2px 10px; }
  .table td::before { content: attr(data-label); font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 1px; }
}


.badge {
  display: inline-block;
  padding: 1px 10px 1px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.badge-active { color: var(--active); background: var(--active-bg); }
.badge-disabled { color: var(--disabled); background: var(--disabled-bg); }
.badge-unvouched { color: var(--unvouched); background: var(--unvouched-bg); }

.summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.summary .badge { font-size: 15px; padding: 4px 14px 4px 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
}
a.chip:hover { text-decoration: underline; }
.chip-owner { background: var(--leaf); border-color: var(--leaf); color: var(--on-fill); }
.chip-contributor { border-color: var(--leaf); color: var(--leaf); }
.chip-operator { background: var(--river); border-color: var(--river); color: var(--on-fill); }
.chip-member { border-color: var(--muted); color: var(--muted); }

.acts { display: flex; flex-wrap: wrap; gap: 4px; }
.acts li { white-space: nowrap; padding: 0 6px; border-radius: 4px; font-size: 13px; background: var(--page); }
.none { color: var(--muted); }


.intro { margin-bottom: 24px; max-width: 40rem; }
.group { margin: 0 0 32px; }
.group h2 { margin: 0 0 10px; }
.matrix th:not(:first-child), .matrix td { text-align: center; width: 8.5rem; }
.matrix tbody th { color: var(--ink); font-size: 15px; font-weight: 400; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.dot-yes { background: var(--leaf); }
.role-operator .dot-yes { background: var(--river); }
.dot-no { border: 1.5px solid color-mix(in srgb, var(--muted) 55%, transparent); }

@media (max-width: 899.98px) {
  .matrix tbody tr { display: flex; flex-wrap: wrap; gap: 6px; }
  .matrix tbody th { flex: 1 1 100%; padding: 0 0 2px; border: 0; font-weight: 600; }
  .matrix td { display: block; width: auto; padding: 0; }
  .matrix td.is-no, .matrix .dot { display: none; }
  .matrix td::before {
    display: inline-block;
    padding: 0 10px;
    border: 1px solid var(--leaf);
    border-radius: 999px;
    line-height: 22px;
    color: var(--leaf);
  }
  .matrix td.role-owner::before { background: var(--leaf); color: var(--on-fill); }
  .matrix td.role-operator::before { background: var(--river); border-color: var(--river); color: var(--on-fill); }
  .matrix td.role-member::before { border-color: var(--muted); color: var(--muted); }
}


.verdict { margin: 28px 0 0; padding: 24px 28px; border-radius: 10px; }
.verdict-yes { background: var(--active-bg); }
.verdict-no { background: var(--disabled-bg); }
.verdict-word { margin: 0 0 14px; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.verdict-word strong { font-weight: inherit; }
.verdict-yes .verdict-word { color: var(--active); }
.verdict-no .verdict-word { color: var(--disabled); }
.verdict-say { font-size: 17px; margin: 0 0 6px; overflow-wrap: anywhere; }
.verdict-needs { margin: 0; color: var(--muted); }


.narrow { max-width: 40rem; }
.stack > * + * { margin-top: 32px; }
.stack h2 { margin-bottom: 10px; }
.card .lead { font-size: 17px; overflow-wrap: anywhere; }

.pages { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.pages li + li { border-top: 1px solid var(--line); }
.pages a { display: block; padding: 11px 16px; text-decoration: none; }
.pages a:hover span:first-child { text-decoration: underline; }
.pages span { display: block; }
.pages span:first-child { font-weight: 600; }
.pages .muted { font-size: 13px; }

.roster + p { margin-top: 24px; }
.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 24px 32px; }
.roster h2 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.roster h2 .num { font-size: 13px; font-weight: 600; color: var(--muted); }
.plist { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.plist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 14px; }
.plist li + li { border-top: 1px solid var(--line); }
.plist .email { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.plist .none { padding: 12px 14px; }
.prompt { background: var(--river-bg); border-color: var(--river); }
.prompt h2 { margin-bottom: 6px; }
.prompt p { margin: 0 0 14px; max-width: 60ch; }
.linkrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.linkrow p { flex: 1 1 16rem; margin: 0; overflow-wrap: anywhere; }

.addrow { display: flex; flex-wrap: wrap; gap: 8px; }
.addrow input { flex: 1 1 14rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}