:root {
  --color-bg:#ffffff; --color-ink:#111111; --color-muted:#6b6b6b; --color-faint:#9a9a9a;
  --color-hairline:#e5e5e5; --color-surface:#ffffff; --color-accent:#2727ff; --color-accent-ink:#ffffff;
  /* promoted */
  --color-hover:#f4f4f5; --color-panel:#fafafa; --color-error:#c0392b; --color-ink-strong:#000000;
  --color-accent-tint:color-mix(in srgb, var(--color-accent) 5%, transparent);
  --color-accent-tint-strong:color-mix(in srgb, var(--color-accent) 6%, transparent);
  --shadow-panel:0 8px 28px rgba(0,0,0,0.08); --shadow-dock:0 8px 30px rgba(0,0,0,0.12);
  --radius:2px; --radius-pill:999px; --border-emphasis:2px;
  --font-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-heading:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.25rem;
  --leading-tight:1.2; --leading-normal:1.55;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --container:920px;
}
/* Named breakpoints (documented; @media cannot read custom props): --bp-sm 520 / --bp-md 600 / --bp-lg 720 */
/* shorthand composite — not a design token, defined here for component use */
:root {
  --hairline: 1px solid var(--color-hairline);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin: 0;
  color: var(--color-ink);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Headings — Onest, flush-left, tight leading */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); max-width: 68ch; }

a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent); }

/* ---- Layout / container ---- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  /* generous bottom padding so the floating dock never covers content */
  padding: var(--space-6) var(--space-5) 7rem;
}

/* ---- Top header ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--hairline);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
}
.topbar .brand { justify-self: start; }
.topbar .usermenu { justify-self: end; }

/* Centered at-a-glance stats */
.topbar__stats {
  justify-self: center;
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-2);
}
.stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-ink);
}
a.stat:hover { background: var(--color-hover); color: var(--color-ink); }
.stat__num { font-size: var(--text-base); font-weight: 500; }
.stat__label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-faint); }
.stat--live .stat__num { color: var(--color-accent); }
.stat--live .stat__label { color: var(--color-accent); }
.brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
}
.brand:hover { color: var(--color-ink); }

/* Profile dropdown — native <details>, no JS */
.usermenu { position: relative; }
.usermenu__trigger {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-pill);
}
.usermenu__trigger::-webkit-details-marker { display: none; }
.usermenu__trigger::after { content: "▾"; color: var(--color-faint); font-size: 0.7em; }
.usermenu[open] .usermenu__trigger { border-color: var(--color-ink); }
.usermenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  background: var(--color-bg);
  border: var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  z-index: 50;
}
.usermenu__item {
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  white-space: nowrap;
}
.usermenu__item:hover { background: var(--color-hover); color: var(--color-ink); }

/* Floating bottom dock — primary section switcher */
.dock {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: 45;
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-bg);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-dock);
}
.dock__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
}
.dock__link:hover { color: var(--color-ink); }
.dock__link--active { background: var(--color-ink); color: var(--color-accent-ink); }
.dock__link--active:hover { color: var(--color-accent-ink); }

/* ---- Graph (Cytoscape canvas) ---- */
.cy-graph {
  height: 62vh;
  min-height: 420px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--color-panel);
}

/* ---- Profile ---- */
.profile-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.profile-head h1 { margin: 0; }

/* Tab bar — per-profile sub-navigation sitting under the header.
   Hairline underline spans the row; current tab gets the accent border. */
.tabs {
  display: flex;
  gap: var(--space-5);
  margin: var(--space-5) 0 var(--space-6);
  border-bottom: var(--hairline);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-muted);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: var(--border-emphasis) solid transparent;   /* reserve space so active doesn't shift */
}
.tab:hover { color: var(--color-ink); }
.tab--active {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}
.tab--active:hover { color: var(--color-ink); }

/* Lineage — the featured "who invited you / who you brought in" card */
.lineage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.lineage__col { min-width: 0; }
.lineage__name { font-family: var(--font-heading); font-size: var(--text-lg); margin: 0; }
@media (max-width: 520px) { .lineage { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---- Type helpers ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
}
.muted { color: var(--color-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- Surfaces ---- */
.section { margin: 0 0 var(--space-7); }
.section > :last-child { margin-bottom: 0; }

.card {
  background: var(--color-surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.card + .card { margin-top: var(--space-4); }

/* .grid and .divider removed — dead CSS */

/* ---- API token reveal ---- */
.token-reveal {
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}
.token-reveal__code {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--hairline);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}

/* ---- Controls ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  color: var(--color-ink);
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover { color: var(--color-ink); }
.btn--primary {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-accent-ink);
}
.btn--primary:hover { background: var(--color-ink-strong); border-color: var(--color-ink-strong); color: var(--color-accent-ink); }
.btn--ghost {
  background: transparent;
  border-color: var(--color-hairline);
  color: var(--color-ink);
}
.btn--ghost:hover { border-color: var(--color-ink); }

/* ---- Debt badge — distinguished monochrome, never red/green ---- */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.badge--owes {        /* solid ink — strongest emphasis */
  background: var(--color-ink);
  color: var(--color-accent-ink);
  border-color: var(--color-ink);
}
.badge--credit {      /* outline — held, not solid */
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.badge--even {        /* muted — quiet, settled */
  background: transparent;
  color: var(--color-muted);
  border-color: var(--color-hairline);
}
.badge--collab {      /* "Open to collaborate" — outline, distinct from debt */
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
  text-transform: none;
}
.collab { margin: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }

/* Read-view social links — a compact row of chips below the bio/collab block */
.social-links { margin: var(--space-3) 0 0; }

/* ---- Forms ---- */
label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}
input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-3);
  width: 100%;
  line-height: 1.4;
}
textarea { min-height: 6rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-faint); }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-accent);
}

/* ---- Simple stacked lists (interactions) ---- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.list > li:last-child { border-bottom: 0; }

/* ---- Docs (/docs) ---- */
/* Horizontal section nav above the article */
.docsnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline);
}
.docsnav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
}
.docsnav__link:hover { color: var(--color-ink); }
.docsnav__link--active { background: var(--color-ink); color: var(--color-accent-ink); }
.docsnav__link--active:hover { color: var(--color-accent-ink); }

/* Article prose rendered from markdown — element selectors (no per-tag classes) */
.docs h2 { margin-top: var(--space-7); }
.docs h3 { margin-top: var(--space-6); }
.docs > :first-child { margin-top: 0; }
.docs ul, .docs ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); max-width: 68ch; }
.docs li { margin: var(--space-1) 0; }
.docs blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: var(--border-emphasis) solid var(--color-ink);
  color: var(--color-muted);
  max-width: 68ch;
}
.docs blockquote p { margin: 0; }
.docs code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-hover);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}
.docs pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-panel);
  border: var(--hairline);
  border-radius: var(--radius);
  overflow-x: auto;
  max-width: 100%;
}
.docs pre code { background: none; padding: 0; font-size: var(--text-sm); }
.docs table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
}
.docs th, .docs td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--hairline);
}
.docs th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
}
.docs td code { white-space: nowrap; }
@media (max-width: 600px) { .docs table { display: block; overflow-x: auto; } }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  :root { --text-3xl: 1.875rem; --text-2xl: 1.5rem; }
  .container { padding: var(--space-5) var(--space-4) 6rem; }
  .topbar { padding: var(--space-3) var(--space-4); }
  .dock { bottom: var(--space-4); }
}

/* ---- Main bento ---- */
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.tile {
  background: var(--color-surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-5);
  min-width: 0;
}
.tile--notify { grid-column: 1 / -1; }
/* Embedded in a half-width bento cell, the graph needs a fixed, contained
   height — the shared .cy-graph 62vh is for the full-page /graph view. */
.tile--graph .cy-graph { height: 360px; min-height: 360px; }
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
}

/* ---- Notification center (Main top tile) ---- */
.notify { display: flex; flex-direction: column; gap: var(--space-6); }
.notify__zone { display: flex; flex-direction: column; gap: var(--space-3); }
.notify__item { display: flex; flex-direction: column; gap: var(--space-2); }
.notify__item p { margin: 0; }
.notify__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.notify__actions form { margin: 0; }

/* ---- Ticker (global activity feed tile) ---- */
.ticker__head { margin-bottom: var(--space-3); }
.ticker__item { font-size: var(--text-sm); color: var(--color-ink); }
.ticker__text { min-width: 0; }
.ticker__time { flex: none; font-size: var(--text-xs); white-space: nowrap; }

/* ---- Directory table ---- */
.dirtable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dirtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.dirtable th,
.dirtable td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: middle;
}
.dirtable thead th {
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}
.dirtable tbody tr:last-child td { border-bottom: none; }
.dirtable__standing { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- ISO — In Search Of board ---- */
.iso-post { margin: 0; }
.iso-post .field { margin-bottom: var(--space-3); }
.iso-hint { font-size: var(--text-xs); }
.iso-error {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}

.iso-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.iso-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.iso-search { display: flex; gap: var(--space-2); }
.iso-search input { width: auto; min-width: 12rem; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.chips--filter { margin: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-surface);
}
.chip__label { color: inherit; text-decoration: none; }
.chip__label:hover { text-decoration: underline; }
.chip--followed { border-color: var(--color-ink); }
.chip--filter:hover { border-color: var(--color-ink); }
.chip--active {
  background: var(--color-ink);
  color: var(--color-accent-ink);
  border-color: var(--color-ink);
}
.chip__follow { display: inline; margin: 0; }
.chip__btn {
  width: auto;
  padding: 0 0.3em;
  line-height: 1;
  font-size: var(--text-xs);
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.chip__btn:hover { color: var(--color-ink); }

.iso-list { display: flex; flex-direction: column; gap: var(--space-3); }
.iso-card { display: block; }
.iso-card__body {
  display: block;
  font-size: var(--text-base);
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: var(--space-1);
}
.iso-card__body:hover { text-decoration: underline; }
.iso-card__meta { font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.iso-card__meta a { color: inherit; }
.dot { color: var(--color-faint); }

/* Gigs & bounties board cards */
.gig-card { display: block; }
.gig-card__title {
  display: block;
  font-size: var(--text-base);
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: var(--space-1);
}
.gig-card__title:hover { text-decoration: underline; }
.gig-card__badge { margin-right: var(--space-2); }
.gig-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
.gig-fact__k { color: var(--color-faint); }
.gig-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0;
}
.gig-detail__fact dt { color: var(--color-faint); font-size: var(--text-sm); margin: 0; }
.gig-detail__fact dd { margin: 0; }
.gig-detail__description { white-space: pre-wrap; margin: var(--space-2) 0; }

.iso-detail__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.iso-detail__body { margin: var(--space-2) 0; }
.iso-detail__meta { font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.iso-followperson, .iso-close { display: inline; margin: 0; }
.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }

.iso-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.iso-reply { border: var(--hairline); border-radius: var(--radius); padding: var(--space-4); background: var(--color-surface); }
.iso-reply__body { margin: 0 0 var(--space-2); white-space: pre-wrap; }
.iso-reply__meta { font-size: var(--text-sm); margin: 0; }
.iso-pick { margin-left: var(--space-2); font-size: var(--text-xs); }
.iso-pick input { width: auto; }

.iso-reply-form, .iso-close { margin: 0 0 var(--space-3); }
.iso-helpful-note { margin-top: var(--space-2); }

/* ---- Posts / feed / composer (Updates & Chat) ---- */
/* A calm, hairline-separated stream. One shared primitive for the per-member
   Updates feed and the single global Chat room. */
.feed { display: flex; flex-direction: column; }
.post {
  padding: var(--space-4) 0;
  border-bottom: var(--hairline);
}
.post:last-child { border-bottom: 0; }
.post__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.post__author { font-weight: 500; text-decoration: none; }
.post__author:hover { text-decoration: underline; }
/* Handle + timestamp recede — quiet metadata beside the author. */
.post__handle { font-size: var(--text-sm); color: var(--color-muted); }
.post__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-faint);
  white-space: nowrap;
}
.post__body { white-space: pre-wrap; word-break: break-word; }
/* @mention — the one restrained accent. */
.mention { color: var(--color-accent); text-decoration: none; }
.mention:hover { text-decoration: underline; }
/* Reference preview — a small inset quote (hairline border-left). */
.post__ref {
  margin-top: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: var(--border-emphasis) solid var(--color-hairline);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.post__ref a { color: inherit; }

/* Composer — textarea + submit, matching the form styling. */
.composer { margin: var(--space-4) 0; }
.composer textarea { margin-bottom: var(--space-3); }

/* ---- Chat interface (global Chat room) ---- */
/* A real chat surface expressed in our own language: white canvas, hairline
   borders, ink text, the single accent reserved for mentions / caret / "you".
   The "terminal" quality is monospace + a `›` prompt + a blinking caret —
   never a dark/amber skin. */
.chat {
  display: flex;
  flex-direction: column;
}

/* Bounded scroll region: oldest→newest, newest hugging the bottom so the
   pinned composer reads as the live edge of the conversation. */
.chat__scroll {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* short conversations sit toward the bottom */
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-2) 0;
  border-bottom: var(--hairline);   /* hairline split from the composer */
}

/* Centered day divider — quiet mono uppercase marker between runs. */
.chat__day {
  align-self: center;
  margin: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* Message row — avatar + body column. Grouped runs omit the head and use a
   ghost avatar slot for alignment. */
.m {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}
/* The viewer's own message — accent emphasis on identity only, no new colors. */
.m--me .m__name { color: var(--color-accent); }
.m--me .m__av { background: var(--color-accent); }
/* Continued rows stay blank even on your own messages — the accent-avatar rule
   above is more specific than .m__av--ghost, so restate transparency here. */
.m--me .m__av--ghost { background: transparent; }

/* Monochrome ink avatar with white mono initials; fixed square. */
.m__av {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
/* Continued rows in a run — same footprint, no mark. */
.m__av--ghost {
  background: transparent;
  color: transparent;
}

/* chat-view must emit .m__col (was .m__body-col — bug fixed here) */
.m__col { min-width: 0; flex: 1; }

/* Name row — author, handle, and time on one baseline. */
.m__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.m__name {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;   /* it's a link, but reads as a label */
}
.m__name:hover { text-decoration: underline; }
.m__handle { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); }
.m__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-faint);
  white-space: nowrap;
}

/* Reply cue — a `›` quoted line above the body, accent left border. */
.m__reply-cue {
  margin-bottom: var(--space-1);
  padding: 0 0 0 var(--space-2);
  border-left: var(--border-emphasis) solid var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.m__reply-cue a { color: inherit; }

/* Body — mono, comfortable line-height, ink. */
.m__body {
  font-family: var(--font-mono);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Composer — pinned below the scroll, hairline top, 8px-scale padding. */
.chat__composer {
  padding: var(--space-3) 0 0;
}

/* Replying banner — mono muted, accent left border; hidden until set.
   chat-view must emit: .chat__replying-author, .chat__replying-snippet, .chat__replying-cancel */
.chat__replying {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: var(--border-emphasis) solid var(--color-accent);
  background: var(--color-accent-tint);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.chat__replying[hidden] { display: none; }
/* .chat__replying-author: bold name of the person being replied to */
.chat__replying-author { font-weight: 500; flex: none; }
/* .chat__replying-snippet: truncated preview of the quoted message */
.chat__replying-snippet { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .chat__replying-cancel: dismiss button (was .chat__replying__dismiss) */
.chat__replying-cancel {
  flex: none;
  width: auto;
  padding: 0 0.3em;
  line-height: 1;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-mono);
  cursor: pointer;
}
.chat__replying-cancel:hover { color: var(--color-ink); }

/* Input row — hairline framed, prompt + textarea + Send (reuses .btn). */
.chat__field {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius);
}
.chat__field:focus-within { border-color: var(--color-accent); }
/* The `›` prompt — accent, mono, aligned to the first line. */
.chat__prompt {
  flex: none;
  font-family: var(--font-mono);
  color: var(--color-accent);
  line-height: var(--leading-normal);
  user-select: none;
}
/* Borderless auto-ish-height textarea living inside the framed row. */
.chat__field textarea {
  flex: 1;
  min-height: 1.55em;
  max-height: 30vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  line-height: var(--leading-normal);
  resize: none;
}
.chat__field textarea:focus-visible {
  outline: 0;
  border-color: transparent;
}

/* A thin blinking caret in the accent — sits beside the prompt when empty. */
.chat__caret {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  background: var(--color-accent);
  animation: blink 1.05s step-end infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Helper line under the composer — faint mono hint (⌘↵ to send, etc.). */
.chat__hint {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-faint);
}

/* Mention autocomplete popover — script-positioned; white card, hairline,
   subtle shadow. Absolutely positioned relative to its mounted parent. */
.mention-pop {
  position: absolute;
  z-index: 50;
  min-width: 12rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--color-bg);
  border: var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}
.mention-pop[hidden] { display: none; }
.mention-pop__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;   /* reserve the active inset border */
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
}
.mention-pop__item--active {
  background: var(--color-accent-tint-strong);
  border-color: var(--color-accent);
}

/* ---- Calendar / booking / editor ---- */
/* Calendly-style picking & editing in our own language: white canvas, hairline
   borders, ink text, the single accent for the active day / picked slot, and
   Geist Mono for every time. No new tokens. */

/* Timezone banner — mono, accent left border + light accent tint, the prominent
   "this is whose time" line above the picker / editor. Same tint pattern as the
   chat replying banner. */
.tzbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: var(--border-emphasis) solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent-tint);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.tzbar__label { color: var(--color-muted); }
.tzbar__value { color: var(--color-accent); }
.tzbar__change { margin-left: auto; color: var(--color-accent); }

/* Booking picker — a 2-col grid: a day rail + the slots for the chosen day.
   Collapses to a single column on narrow widths. */
.book {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
}
@media (max-width: 600px) {
  .book { grid-template-columns: 1fr; gap: var(--space-4); }
  .book__days { border-right: 0; padding-right: 0; border-bottom: var(--hairline); padding-bottom: var(--space-3); }
}

/* Day rail — a column of mono day buttons, hairline divider on the right. */
.book__days {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-right: var(--space-5);
  border-right: var(--hairline);
}
.book__day {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;   /* reserve the active inset border */
  border-radius: var(--radius);
}
.book__day:hover { background: var(--color-hover); color: var(--color-ink); }
.book__day--active {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
  color: var(--color-ink);
}
.book__day--active:hover { background: var(--color-accent-tint); }
/* A day with no offered slots — faint, recedes. */
.book__day--off { color: var(--color-faint); }

/* Slots — wrapping flex of pickable chips. */
.book__slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* A slot is a <label> wrapping a checkbox: hairline chip, mono, the checkbox
   itself visually minimal so the chip reads as the control. */
.book__slot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}
.book__slot:hover { border-color: var(--color-ink); }
/* The checkbox recedes to a small affordance; the chip carries the state. */
.book__slot input {
  width: auto;
  margin: 0;
  accent-color: var(--color-accent);
}
/* Picked state — accent fill, white text. Driven by :has() so selection shows
   without JS; the modifier class is kept for the same look when JS toggles it. */
.book__slot--picked,
.book__slot:has(input:checked) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Custom date/time block — hairline-topped, sits under the offered slots. */
.book__custom {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hairline);
}

/* Availability editor — one hairline-separated row per weekday, each holding up
   to a few mono time ranges. */
.avail { display: flex; flex-direction: column; }
.avail__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
}
.avail__row:last-child { border-bottom: 0; }
/* Fixed-width mono weekday label so the ranges align across rows. */
.avail__day {
  flex: none;
  width: 4rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  padding-top: var(--space-2);   /* align with the first range's controls */
}
.avail__ranges {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
/* A range — two selects with a mono dash between. */
.avail__range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.avail__range select { width: auto; min-width: 7rem; }
/* An unused (blank) range row recedes. */
.avail__range--empty { color: var(--color-muted); }
/* Add-range — small accent link/button. */
.avail__add {
  align-self: flex-start;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-accent);
  cursor: pointer;
}
.avail__add:hover { text-decoration: underline; }
/* Remove — a faint "×" that inks on hover. */
.avail__remove {
  flex: none;
  width: auto;
  padding: 0 0.3em;
  line-height: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  color: var(--color-faint);
  cursor: pointer;
}
.avail__remove:hover { color: var(--color-ink); }
/* "unavailable" — faint, when a weekday has no ranges. */
.avail__none { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-faint); }

/* =============================================================================
   New-UI components (2026-07 rebuild)
   Design language: Soft console (Option A) — humanist sans for human content,
   mono ONLY for numbers/data, hairlines, flat white, single blue accent,
   prompt-style uppercase eyebrow labels.
   Navigation: Everything in the topbar (Option B) — one chrome bar.
   Home: Observatory bento (Option A) — needs-you strip + network/ledger bento.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. TOPBAR — one-row bar: brand left, nav inline, stats + usermenu right
      (Nav option B: brand + inline navlinks + right-side stats/menu)
   --------------------------------------------------------------------------- */

.topbar {
  /* Four children: brand | nav (flexes) | stats | usermenu — one row. */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
}
.topbar__nav {
  justify-self: start;
}
.topbar .usermenu {
  justify-self: end;
}

/* Left group: brand + navlinks flush left */
.topbar .brand {
  justify-self: unset;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.topbar__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-5);
}

.navlink {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
}
.navlink:hover { color: var(--color-ink); }
.navlink--active {
  color: var(--color-ink);
  font-weight: 600;
}
.navlink--active:hover { color: var(--color-ink); }

/* Right group: stats + usermenu on one baseline */
.topbar__stats {
  /* override the centered default — pin to right */
  justify-self: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Mobile: nav row wraps under brand */
@media (max-width: 720px) {
  .topbar {
    grid-template-columns: 1fr auto;
    flex-wrap: wrap;
  }
  .topbar__nav {
    grid-column: 1 / -1;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
    gap: 0;
  }
  .topbar__nav::-webkit-scrollbar { display: none; }
  .topbar__stats {
    /* keep on the same row as usermenu */
  }
}

/* ---------------------------------------------------------------------------
   2. HOME BENTO — Observatory layout
      Top tile (needs-you) spans full width
      .bento__main = ~60% network + ~40% ledger side-by-side
      Bottom tile (open-asks) spans full width
   --------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: 1fr;    /* one-column outer: each child is full-width */
  gap: var(--space-5);
}

/* Main two-col tile: network hero (~1.2fr) + ledger (~1fr) */
.bento__main {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 720px) {
  .bento__main {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ---------------------------------------------------------------------------
   3. NEEDS-YOU STRIP — quiet strip cards
   --------------------------------------------------------------------------- */

/* Container: vertical stack of cards */
.needs-you-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
}
.needs-you-item:last-child { margin-bottom: 0; }

/* Request cards get accent tint — this is an action item */
.needs-you-item--request {
  background: var(--color-accent-tint);
  border-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* Intro cards — accent tint too (introductions need attention) */
.needs-you-item--intro {
  background: var(--color-accent-tint);
  border-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* Setup pointer — plain panel, no tint, just a quiet nudge */
.needs-you-item--setup {
  background: var(--color-panel);
  border-color: var(--color-hairline);
}

.needs-you-item__header {
  font-size: var(--text-sm);
  font-weight: 400;
}
.needs-you-item__header strong { font-weight: 600; }

.needs-you-item__note {
  font-size: var(--text-sm);
  margin: 0;
}

.needs-you-item__times {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ---------------------------------------------------------------------------
   4. SECTION COMPONENTS — eyebrow labels, header links
   --------------------------------------------------------------------------- */

/* Section eyebrow — prompt-style uppercase label (overrides the .eyebrow helper
   to ensure it renders as a block above section content) */
.section__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-faint);
  margin: 0 0 var(--space-3);
}

/* Header link — small linked label sitting beside the eyebrow */
.section__header-link {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-faint);
}
.section__header-link a { color: var(--color-faint); }
.section__header-link a:hover { color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   5. PAGE TITLE
   --------------------------------------------------------------------------- */

.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}

/* ---------------------------------------------------------------------------
   6. MLINK — member name inline link
   --------------------------------------------------------------------------- */

.mlink {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
}
.mlink:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   7. HOURS — mono accent for time values
   --------------------------------------------------------------------------- */

.hours {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  font-size: 0.95em;
}

/* ---------------------------------------------------------------------------
   8. DEBT WORDS — muted plain prose
   --------------------------------------------------------------------------- */

.debt-words {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------------
   9. FLASH — banner notifications
   --------------------------------------------------------------------------- */

.flash {
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--hairline);
  font-size: var(--text-sm);
  background: var(--color-panel);
}
.flash--ok {
  background: var(--color-panel);
  color: var(--color-ink);
  border-color: var(--color-hairline);
}
.flash--error {
  background: var(--color-panel);
  color: var(--color-error);
  border-left: var(--border-emphasis) solid var(--color-error);
}

/* ---------------------------------------------------------------------------
   10. EMPTY STATE
   --------------------------------------------------------------------------- */

.empty-state {
  color: var(--color-muted);
  font-size: var(--text-sm);
  padding: var(--space-4) 0;
}

/* ---------------------------------------------------------------------------
   11. NOTICE
   --------------------------------------------------------------------------- */

.notice {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  border: var(--hairline);
  background: var(--color-panel);
}
.notice--warn {
  color: var(--color-ink);
  border-left: var(--border-emphasis) solid var(--color-accent);
  background: var(--color-accent-tint);
}

/* ---------------------------------------------------------------------------
   12. ERROR inline (used in settings form) — not the same as .flash--error
   --------------------------------------------------------------------------- */

.error {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}

/* ---------------------------------------------------------------------------
   13. FIELD components — label, input wrapper, hint
   --------------------------------------------------------------------------- */

.field__label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}

.field__input {
  /* inherits from the global input/select/textarea rules — this class is
     additive for specificity when needed */
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-faint);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   14. INLINE-FORM — form used inside flex rows (no block margin)
   --------------------------------------------------------------------------- */

.inline-form {
  display: inline;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   15. BTN--SMALL — compact button variant
   --------------------------------------------------------------------------- */

.btn--small {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------------
   16. CHIP LIST — wrapping chip containers
   --------------------------------------------------------------------------- */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

/* ---------------------------------------------------------------------------
   17. LEDGER PAGE — rows + filter banner
   --------------------------------------------------------------------------- */

.ledger-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Each card row is already styled via .card; these give hairline-row density */
.ledger-rows .card {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.ledger-filter-banner {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-panel);
  border: var(--hairline);
  border-radius: var(--radius);
}
.ledger-filter-banner a { color: var(--color-muted); }

/* ---------------------------------------------------------------------------
   18. MEMBERS PAGE — member-row cards
   --------------------------------------------------------------------------- */

.member-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.member-row {
  /* inherits .card */
}

.member-row__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.member-row__name {
  font-weight: 500;
}

.member-row__connected {
  /* chip style already applied via .chip class on the element */
}

.member-row__help {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
}

.member-row__meta {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------------
   19. PROFILE PAGE — header, sections, post-cards, interaction rows
   --------------------------------------------------------------------------- */

.profile-header {
  margin: 0 0 var(--space-6);
}

.profile-header__name-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.profile-header__name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0;
  letter-spacing: -0.01em;
}

.profile-header__handle {
  font-size: var(--text-sm);
}

.profile-header__bio {
  font-size: var(--text-base);
  max-width: 65ch;
  margin: 0 0 var(--space-3);
}

.profile-header__meta {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.profile-header__actions {
  margin-bottom: var(--space-3);
}

.profile-header__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.profile-header__contact {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}

/* Availability slots on profile */
.availability-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.availability-slot {
  /* inherits .card */
  padding: var(--space-2) var(--space-3) !important;
  font-size: var(--text-sm);
}

.availability-tz-note {
  font-size: var(--text-xs);
  margin: 0 0 var(--space-3);
}

/* Post cards (updates feed on profile) */
.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.post-card {
  /* inherits .card */
}

.post-card__ref {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: var(--border-emphasis) solid var(--color-hairline);
  font-size: var(--text-sm);
}

.post-card__body {
  margin: 0 0 var(--space-2);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-sm);
}

.post-card__meta {
  font-size: var(--text-xs);
  color: var(--color-faint);
}

/* Interaction rows on profile (history) */
.interaction-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.interaction-row {
  /* inherits .card */
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4) !important;
}

/* Network section on profile */
.network-lineage {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.network-brought-in {
  margin-bottom: var(--space-3);
}

.network-connections {
  margin-bottom: var(--space-3);
}

.network-section-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-2);
}

.connection-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.connection-row {
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------------
   20. REACH PAGE — slot picker + form
   --------------------------------------------------------------------------- */

.reach-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.reach-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.reach-slots__day {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reach-slots__day-label {
  margin: 0 0 var(--space-2);
}

/* Slot chip: label wrapping a visually-hidden checkbox
   Accessible: checkbox is not hidden from AT (only visually compact).
   State driven by :has(:checked) — no JS required. */
.reach-slot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  user-select: none;
}
.reach-slot:hover { border-color: var(--color-ink); }

/* Visually compact checkbox — still focusable/operable */
.reach-slot__check {
  width: auto;
  margin: 0;
  accent-color: var(--color-accent);
}

.reach-slot__time {
  color: var(--color-ink);
}

/* Selected state via :has() — accent border + tint */
.reach-slot:has(.reach-slot__check:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
}

.reach-custom {
  margin-top: var(--space-2);
}

.reach-tz-note {
  font-size: var(--text-xs);
  margin: var(--space-3) 0 0;
}

/* ---------------------------------------------------------------------------
   21. SETTINGS PAGE — PATs, connections, pat-scopes
   --------------------------------------------------------------------------- */

/* PAT / connection list rows */
.pat-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pat-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline);
  font-size: var(--text-sm);
}
.pat-row:last-child { border-bottom: 0; }

/* PAT scope checkbox rows */
.pat-scope {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
}
.pat-scope input { width: auto; margin: 0; accent-color: var(--color-accent); }

.pat-scopes {
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.pat-scopes legend { padding: 0 var(--space-1); }

/* ---------------------------------------------------------------------------
   22. MEETING CARDS — Board + Thread
   --------------------------------------------------------------------------- */

.meeting-card {
  /* inherits .card */
}

.meeting-card__when {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.meeting-card__when:hover { text-decoration: underline; }

.meeting-card__where {
  font-size: var(--text-sm);
  margin: var(--space-1) 0;
}

.meeting-card__joins {
  font-size: var(--text-xs);
  margin: var(--space-1) 0;
}

/* The "hosted time — no hours move" cue: muted, understated */
.meeting-card__cue {
  font-size: var(--text-xs);
  color: var(--color-faint);
  margin: var(--space-1) 0;
}

/* Thread detail */
.meeting-detail {
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.meeting-detail__when {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  margin: 0;
  color: var(--color-ink);
}

.meeting-detail__state {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

.meeting-detail__where {
  font-size: var(--text-sm);
  margin: 0;
}

.meeting-detail__joins {
  font-size: var(--text-xs);
  margin: 0;
}

.meeting-join {
  margin: 0;
  display: inline;
}

/* The "hosted time — no hours move" cue on the thread page */
.meeting-cue {
  font-size: var(--text-xs);
  color: var(--color-faint);
  margin: 0;
}

/* Meeting post box — <details> */
.meeting-post {
  /* inherits .card */
}

.meeting-post__summary {
  cursor: pointer;
  list-style: none;
  margin: 0;
}
.meeting-post__summary::-webkit-details-marker { display: none; }

/* ---------------------------------------------------------------------------
   23. ADMIN PAGE — admin-row cards
   --------------------------------------------------------------------------- */

.admin-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-row {
  /* inherits .card */
}

.admin-row__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.admin-row__name {
  font-weight: 500;
}

.admin-row__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   24. ISO SENT CARD
   --------------------------------------------------------------------------- */

.iso-sent {
  color: var(--color-muted);
  font-size: var(--text-sm);
  border-left: var(--border-emphasis) solid var(--color-accent);
  background: var(--color-accent-tint);
}

/* ---------------------------------------------------------------------------
   25. ISO DETAIL — thread head article
   --------------------------------------------------------------------------- */

.iso-detail {
  /* inherits .card */
}

.iso-detail__body {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

/* ---------------------------------------------------------------------------
   26. GIG FACT (inline label-value pairs on gig cards)
   --------------------------------------------------------------------------- */

.gig-fact {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.gig-post {
  /* inherits .card — no extra styling needed (same card as iso-post) */
}

/* ---------------------------------------------------------------------------
   27. WELCOME / DOCS PROSE — comfortable reading measure
   --------------------------------------------------------------------------- */

/* The welcome page uses plain .section + p elements (no .docs wrapper),
   but deserves comfortable prose measure */
#what-this-is p,
#code-of-collaboration p,
#when-available p,
#connect-agent p {
  max-width: 65ch;
}

/* ---------------------------------------------------------------------------
   28. MOBILE — single @media block
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* bento__main already collapses above */

  /* Topbar nav wraps under brand on mobile — handled in section 1 */

  /* Needs-you items stack compactly */
  .needs-you-item__times {
    gap: var(--space-1);
  }

  /* Profile header name row stacks */
  .profile-header__name-row {
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }

  .profile-header__name {
    font-size: var(--text-xl);
  }

  /* PAT row stacks on narrow screens */
  .pat-row {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ---------------------------------------------------------------------------
   DEAD LEGACY: .dock block removed
   The floating bottom dock is gone — navigation is now in the topbar.
   The rules above under "Floating bottom dock" are kept for now because
   the section comment says "dead CSS" has already been removed for grid/divider,
   and legacy web.ts pages must not break. The dock rules are harmless (fixed
   position, no element emits .dock any more in the new pages).
   --------------------------------------------------------------------------- */