/* The pages around the board.
 *
 * The board itself brings `corkboard.css` in slice 2; nothing here may collide
 * with it, so every class is `cb-` prefixed and none of them is one that
 * stylesheet uses. No @import and no web font: the CSP allows `'self'` only,
 * and a stylesheet that silently fails to fetch something is a page that
 * silently looks wrong. */

:root {
  color-scheme: dark light;
  --cb-ink: #e8e4da;
  --cb-ground: #1c1a17;
  --cb-sunk: #12110f;
  --cb-raised: #2a2620;
  --cb-line: #3a352e;
  --cb-warn: #d9694a;
  --cb-good: #8fbf7f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cb-ground);
  color: var(--cb-ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem; }
.cb-narrow { max-width: 24rem; }
h1 { font-weight: 600; letter-spacing: 0.01em; }
a { color: inherit; }

.cb-bar {
  display: flex; gap: 1rem; align-items: center;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--cb-line);
}
.cb-bar .cb-who { font-weight: 600; margin-right: auto; }

label { display: block; margin: 0.75rem 0; }
input {
  display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem;
  background: var(--cb-sunk); color: inherit;
  border: 1px solid var(--cb-line); border-radius: 4px;
}
button {
  padding: 0.5rem 1rem; background: var(--cb-raised); color: inherit;
  border: 1px solid var(--cb-line); border-radius: 4px; cursor: pointer;
}
button:hover { background: #352f27; }

.cb-error { color: var(--cb-warn); }
.cb-message { color: var(--cb-good); }
.cb-empty { opacity: 0.7; }

.cb-people { width: 100%; border-collapse: collapse; }
.cb-people th, .cb-people td {
  text-align: left; padding: 0.5rem;
  border-bottom: 1px solid var(--cb-line); vertical-align: top;
}
.cb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: start; }
.cb-actions input { width: auto; margin: 0; }
.cb-add { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.cb-add label { margin: 0; }
.cb-boards { list-style: none; padding: 0; margin: 0 0 2rem; }
.cb-boards li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--cb-line);
}
.cb-board-link { flex: 1 1 auto; font-weight: 600; text-decoration: none; }
.cb-board-link:hover { text-decoration: underline; }
/* Read but not reached for: the date is context, the name is the target. */
.cb-board-when { flex: 0 0 auto; opacity: 0.6; font-size: 0.85em; }
.cb-board-delete { flex: 0 0 auto; margin: 0; }
.cb-board-delete button { padding: 0.25rem 0.6rem; font-size: 0.85em; }