/* Family Tree's palette and card shapes, so the two sites feel like one thing.
   Kept as its own file rather than imported across projects: these are separate
   deployments, and a shared stylesheet would be a runtime dependency between
   them for the sake of a few dozen lines. */
:root {
  color-scheme: dark;
  --bg: #0f1420;
  --bg2: #161d2e;
  --card: #1e2739;
  --card-hover: #263650;
  --text: #e8ecf4;
  --muted: #93a0b4;
  --line: #3d4a63;
  --accent: #38bdf8;
  --danger: #f87171;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px;
}
a { color: inherit; }

/* ------------------------------------------------------------------ login */
.centred { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 24px; width: 100%; max-width: 380px;
}
.card h1 { margin: 0 0 6px; font-size: 20px; }
.sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.err { color: var(--danger); font-size: 12.5px; margin-top: 12px; min-height: 1em; }
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f2937; text-decoration: none; font-weight: 600;
  border-radius: 9px; padding: 11px;
}
.gbtn svg { width: 18px; height: 18px; }

/* -------------------------------------------------------------------- hub */
.page-inner { max-width: 980px; margin: 0 auto; padding: 28px 24px 60px; }
.page-inner h1 { font-size: 24px; margin: 0 0 20px; }
.page-inner h2 {
  font-size: 15px; margin: 28px 0 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}

.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.topbar h1 { margin: 0; }
.spacer { flex: 1; }
.who { color: var(--muted); font-size: 12px; white-space: nowrap; }
button {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); cursor: pointer; font-size: 13px;
}
button:hover { border-color: var(--accent); }

.lede { color: var(--muted); font-size: 13px; margin: 0 0 22px; }

.sites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sites a {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; text-decoration: none;
}
.sites a:hover { border-color: var(--accent); background: var(--card-hover); }
.glyph {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--bg2); font-size: 21px; line-height: 1;
}
.body { min-width: 0; flex: 1; }
.line { display: flex; align-items: center; gap: 8px; }
.name { font-size: 15px; font-weight: 600; }
.tag {
  flex: none; border-radius: 999px; padding: 1px 8px;
  font-size: 10.5px; font-weight: 600; border: 1px solid var(--line); color: var(--muted);
}
.tag.open { border-color: var(--accent); color: var(--accent); }
.blurb { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.host { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sites svg { flex: none; width: 18px; height: 18px; color: var(--muted); }

.note {
  margin-top: 22px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; color: var(--muted);
  font-size: 12.5px; line-height: 1.6;
}

@media (max-width: 560px) {
  .page-inner { padding: 22px 16px 48px; }
  .sites a { padding: 14px; }
}