/* CTL Site — "Luminous Minimal" theme (Canaletto-inspired). */

/* Playfair Display — self-hosted variable font (weights 400-900 in one file).
   Licensed under the SIL Open Font License; see static/fonts/OFL.txt. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin.6da252de0cbc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-ext.a81e6c6c3493.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f3f1ea;          /* warm stone */
  --surface: #fbfaf6;
  --ink: #1c2530;
  --ink-soft: #3c4654;
  --muted: #938c7e;       /* warm slate */
  --border: #e7e1d4;
  --border-strong: #d8cfbd;
  --brand: #1c2530;       /* structural dark — buttons, headings, brand */
  --brand-dark: #10171f;
  --brand-soft: #ece8de;  /* stone tint for hovers */
  --accent: #6E2A2E;      /* maroon — the single accent colour, used sparingly */
  --accent-dark: #55201F; /* mahogany, pressed — hover on the active nav tab */
  --green: #1d7a4d;  --green-bg: #e2f0e8;
  --amber: #8a6300;  --amber-bg: #fbeed1;
  --blue-pill: #2160b0; --blue-bg: #e4eefb;
  --grey: #6b7280;   --grey-bg: #ececef;
  --danger: #b42318;
  --radius: 12px;
  --radius-sm: 8px;
  --header-h: 98px;       /* sticky offset below the fixed site header (incl. the layered rule) */
  /* Three coupled layers: a contact shadow, a mid diffusion and a wide soft
     one. A single blur reads flat however dark it is made. */
  --shadow: 0 1px 1px rgba(28,37,48,.05), 0 3px 6px rgba(28,37,48,.045), 0 10px 24px rgba(28,37,48,.055);
  --shadow-hover: 0 1px 2px rgba(28,37,48,.07), 0 6px 14px rgba(28,37,48,.08), 0 20px 42px rgba(28,37,48,.10);
  /* The lit top edge that makes a surface read as raised off the page. */
  --lip: inset 0 1px 0 rgba(255,255,255,.75);
  --font-head: "Playfair Display", Georgia, "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Always reserve the scrollbar gutter so short pages and tall (scrolling) pages
   keep the same content width — no sideways jump when navigating to Search. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.main { padding-top: 32px; padding-bottom: 64px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header — light with a gold rule */
.site-header { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--accent); box-shadow: 0 1px 3px rgba(28,37,48,.05); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 14px; min-height: 98px; padding: 10px 0; flex-wrap: nowrap; }
.brand { display: flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand-words { display: flex; flex-direction: column; font-family: var(--font-head); font-weight: 800; font-size: 26px; line-height: 1.04; letter-spacing: .04em; color: var(--ink); }
.brand-words small { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }
.nav { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: wrap; }
/* Nav items read as tabs: each sits in its own box, and the current page is a
   filled mahogany tab rather than a thin underline. */
.nav a { color: var(--ink-soft); font-weight: 500; font-size: 15.5px; padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.nav a:hover { color: var(--ink); background: var(--brand-soft); border-color: var(--border-strong); text-decoration: none; }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav a.active { color: #fbfaf6; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.nav a.active:hover { color: #fbfaf6; background: var(--accent-dark); border-color: var(--accent-dark); }
/* Header search: a fixed-size icon, so nothing in the header can reflow when
   it is used. The search page itself carries the field, and focuses it. */
.header-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid transparent; border-radius: 50%; color: var(--ink-soft); transition: background .12s, color .12s, border-color .12s; }
.header-search-btn:hover { background: var(--brand-soft); color: var(--ink); border-color: var(--border-strong); text-decoration: none; }
.header-search-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fbfaf6; }
.header-search-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.find-form { margin-bottom: 18px; }
.find-note { margin-top: 26px; font-size: 13px; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 980px) {
  .header-inner { flex-wrap: wrap; }
  .nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
}
/* Seven tabs is more than the header was built for. Rather than drop one,
   the row tightens as it runs out of room, which keeps every destination
   one tap away instead of hiding one behind a menu nobody opens. */
@media (max-width: 1080px) {
  .nav { gap: 2px; }
  .nav a { padding: 7px 10px; font-size: 15px; }
}
.user-area { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.user-name { color: var(--muted); font-size: 14.5px; }
.inline-form { margin: 0; }

/* Account dropdown (top-right) */
.account { position: relative; }
.account-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 3px 5px 3px 3px; border-radius: 999px; transition: background .12s; }
.account-btn:hover { background: var(--brand-soft); }
.account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fbfaf6; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.account-caret { color: var(--muted); font-size: 11px; }
.account-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 6px; z-index: 60; }
.account-menu[hidden] { display: none; }
.account-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.account-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.account-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.account-menu a, .account-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; text-decoration: none; }
.account-menu a:hover, .account-menu button:hover { background: var(--brand-soft); color: var(--ink); text-decoration: none; }
.account-menu form { margin: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; padding: 22px 0; text-align: center; }

/* Typography */
h1 { font-family: var(--font-head); font-weight: 800; font-size: 32px; line-height: 1.18; margin: 0 0 10px; letter-spacing: .005em; text-wrap: balance; }
h2 { font-family: var(--font-head); font-weight: 700; font-size: 21px; margin: 0 0 14px; letter-spacing: .005em; }
h3 { font-family: var(--font-head); font-weight: 700; font-size: 16.5px; margin: 0 0 12px; color: var(--ink); }
.muted { color: var(--muted); }
.lede { font-size: 18px; color: var(--ink-soft); max-width: 62ch; }
.section-title { margin-top: 34px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fbfaf6; border: 1px solid var(--brand);
  padding: 9px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .12s, box-shadow .12s, transform .04s;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 12px 24px; font-size: 16px; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--brand-soft); }
.site-header .btn--ghost { color: var(--ink); border-color: var(--border-strong); }
.site-header .btn--ghost:hover { background: var(--brand-soft); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover { background: #8f1c14; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow), var(--lip); margin-bottom: 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; }

/* Hero & stats */
.hero { padding: 0 0 14px; }
/* The two ways in, side by side, for a visitor who has not signed in: log in,
   or ask for an account. Wraps rather than shrinking on a phone. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0 30px; }
.stat { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); flex: 1; min-width: 160px; color: var(--ink); position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
a.stat { transition: box-shadow .12s, transform .08s, border-color .12s; }
a.stat:hover { border-color: var(--border-strong); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.stat-num { display: block; font-family: var(--font-head); font-size: 36px; font-weight: 700; color: var(--ink); letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 13.5px; font-weight: 500; }
/* Landing-page upcoming gatherings: date, title, place on one quiet line. */
.up-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.up-date { font-family: var(--font-head); font-weight: 700; color: var(--accent); min-width: 132px; font-variant-numeric: tabular-nums; }
.up-title { font-size: 15.5px; }
.card-head .card-more { margin: 0; }
/* File-type tag beside a meeting document. */
.badge--transitioning { background: var(--amber-bg); color: var(--amber); font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; vertical-align: 3px; letter-spacing: .02em; }
.tw table { min-width: 0; }
.product-card { margin-bottom: 16px; }
.product-card .card-head { align-items: baseline; }
.product-card h2 { font-size: 19px; }
.cat-chip.active .start-here { border-left: 3px solid var(--accent); }
.start-here h2 { margin-bottom: 10px; }
.start-here .lined li { padding: 7px 13px; }
.session-line { font-size: 14px; line-height: 1.45; padding: 2px 0; }
.session-line + .session-line { border-top: 1px solid var(--border); margin-top: 3px; padding-top: 5px; }
.doc-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--muted); vertical-align: 1px; }
.card-sub { margin: -6px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 54ch; }
.card-head + .card-sub { margin-top: -8px; margin-bottom: 12px; }
.card-more { margin: 14px 0 0; font-size: 13px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lined { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lined li { padding: 9px 13px; margin: 0 -13px; border-radius: var(--radius); transition: background .12s; }
.lined li:hover { background: var(--brand-soft); }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.table tbody tr { transition: background .1s; }
.table tbody tr:hover { background: #f7f4ec; }
.table tr:last-child td { border-bottom: 0; }

/* Directory, "by person": one closed row per organization, so the whole group
   fits on a screen and you open the one you want. The flat table this replaced
   ran to twenty-odd rows with the organization repeated down every one. */
.dir-tools { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 10px; font-size: 13.5px; }
.dir-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; }
.dir-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); }
.dir-group > summary::-webkit-details-marker { display: none; }
.dir-group > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform .15s ease; }
.dir-group[open] > summary::before { transform: rotate(45deg); }
.dir-group > summary:hover { background: var(--brand-soft); }
.dir-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dir-org { font-size: 16.5px; font-weight: 600; color: var(--ink); }
/* The count sits hard right, so the closed list reads as a column of numbers
   as well as a column of names. */
.dir-count { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.dir-people { padding: 2px 16px 12px 33px; }
.dir-orglink { margin: 0 0 10px; font-size: 13.5px; }
.dir-person { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 9px 0; border-top: 1px solid var(--border); }
.dir-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 230px; }
.dir-title { font-size: 13.5px; color: var(--muted); }
.dir-contact { flex: 1 1 220px; font-size: 14px; word-break: break-word; }
.dir-person .inline-form { margin: 0; }

@media (max-width: 640px) {
  .dir-people { padding-left: 16px; }
  .dir-who { min-width: 0; }
}
.row-actions { white-space: nowrap; font-size: 13px; }
.row-actions a { margin-right: 8px; }
.danger-link { color: var(--danger); }

/* Badges (status) */
.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--grey-bg); color: var(--grey); white-space: nowrap; }
.badge--current { background: var(--green-bg); color: var(--green); }
.badge--planned { background: var(--blue-bg); color: var(--blue-pill); }
.badge--evaluating { background: var(--amber-bg); color: var(--amber); }
.badge--retired { background: var(--grey-bg); color: var(--grey); text-decoration: line-through; }

/* Org grid */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 18px; }
.org-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); color: var(--ink); transition: box-shadow .12s, transform .08s, border-color .12s; }
.org-card:hover { border-color: var(--border-strong); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-hover), var(--lip); }
.org-card h2 { font-family: var(--font-head); margin-bottom: 4px; color: var(--ink); font-size: 18px; }
.org-meta { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* Profile definition list */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-list { display: grid; grid-template-columns: 210px 1fr; gap: 10px 18px; margin: 0; }
.profile-list dt { font-weight: 600; color: var(--muted); }
.profile-list dd { margin: 0; color: var(--ink-soft); }

/* Forms */
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="date"],
.form input[type="time"], .form input[type="url"], .form input[type="number"], .form input[type="search"],
.form select, .form textarea, .form input[type="file"],
.search-form input, .search-form select,
.auth-card input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus,
.search-form input:focus, .search-form select:focus, .auth-card input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(110,42,46,.15);
}
.form p { margin: 0 0 16px; }
.form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.form .helptext { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.form--narrow { max-width: 580px; }
.form-actions { display: flex; gap: 10px; margin-top: 14px; }
.auth-card { max-width: 400px; margin: 56px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-hover); }
.auth-card h1 { text-align: center; }
.auth-card .form p { margin-bottom: 16px; }

/* Search form */
.search-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; }
.search-form input[type="search"] { flex: 1; min-width: 240px; }
.result-count { margin: 8px 0 14px; }
.lede-tight { max-width: 70ch; margin-bottom: 20px; }

/* Category filter chips */
.cat-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cat-chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: 13px; font-weight: 500; line-height: 1.55; transition: background .12s, border-color .12s, color .12s; }
.cat-chip:hover { background: var(--brand-soft); border-color: var(--border-strong); color: var(--ink); text-decoration: none; }
.cat-chip.active { background: var(--brand); color: #fbfaf6; border-color: var(--brand); }
.cat-count { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-chip.active .cat-count { color: rgba(255,255,255,.7); }

/* Sticky search controls — the search bar + chips stay put while results scroll */
@media (max-width: 720px) {
  }

/* Messages */
.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.message { padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 14px; border: 1px solid transparent; }
.message--success { background: var(--green-bg); color: var(--green); border-color: #bfe3cd; }
.message--info { background: var(--blue-bg); color: var(--blue-pill); border-color: #c5dcf2; }
.message--warning { background: var(--amber-bg); color: var(--amber); border-color: #f0dcae; }
.message--danger, .message--error { background: #fbe9e7; color: var(--danger); border-color: #f3c2bd; }

.prose { white-space: normal; color: var(--ink-soft); }

/* Events */
/* Events read as pills that wrap, rather than full-width bars. No per-pill
   shadow — a row of them would read heavy; the border carries the shape. */
.event-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.event-row { display: inline-flex; align-items: baseline; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.event-row:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.event-row--past { opacity: .68; }
/* Inside a pill the date is inline, not a fixed-width column. */
.event-row .event-date { min-width: 0; font-size: 14.5px; }
.event-row .event-title { font-size: 14.5px; }
.event-row .muted { font-size: 13px; }
.event-date { font-family: var(--font-head); font-weight: 700; color: var(--accent); min-width: 120px; font-variant-numeric: tabular-nums; }
.event-title { font-weight: 600; font-size: 15.5px; }
.event-meta { margin: 0 0 12px; font-size: 15px; }
.agenda-time { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; width: 152px; font-weight: 500; }

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
  .profile-list { grid-template-columns: 1fr; }
  .profile-list dt { margin-top: 10px; }
  .header-inner { flex-wrap: wrap; gap: 12px; min-height: 0; padding: 12px 0; }
  .nav { flex-basis: 100%; justify-content: flex-start; order: 3; gap: 2px; }
  .user-area { margin-left: auto; }
  .nav a { padding: 6px 9px; font-size: 14px; }
}

/* Chat */
.chat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
.chat-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 8px; position: sticky; top: 108px; }
.chat-panel-sub { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: var(--radius-sm); transition: color .12s, background .12s; }
.chat-panel-sub:hover { color: var(--ink); background: var(--brand-soft); }
.chat-panel-sub.is-on { color: var(--accent); }
.chat-panel-sub:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-scope-form { display: flex; gap: 8px; margin-bottom: 12px; }
.chat-scope-form input { flex: 1; min-width: 0; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 999px; font-family: inherit; font-size: 14px; background: var(--surface); color: var(--ink); }
.chat-scope-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(110,42,46,.15); }
.room-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid transparent; border-radius: 50%; color: var(--ink-soft); }
.room-search-btn:hover { background: var(--brand-soft); color: var(--ink); border-color: var(--border-strong); text-decoration: none; }
.chat-search-results { padding: 18px 22px; overflow-y: auto; }
.chat-hit-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.chat-hit-body { margin: 3px 0 0; color: var(--ink-soft); font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-side-section { margin-bottom: 16px; }
.chat-side-section:last-child { margin-bottom: 0; }
.chat-side-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.chat-add { font-size: 18px; line-height: 1; color: var(--muted); padding: 0 7px; border-radius: var(--radius-sm); }
.chat-add:hover { background: var(--brand-soft); color: var(--ink); text-decoration: none; }
.chat-side-list { list-style: none; margin: 4px 0 0; padding: 0; }
.chat-side-list li { margin: 1px 0; }
.chat-side-list a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 14.5px; }
.chat-side-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-side-list a:hover { background: var(--brand-soft); color: var(--ink); text-decoration: none; }
.chat-side-list a.active { background: var(--brand); color: #fbfaf6; font-weight: 600; }
.chat-side-list a.active:hover { background: var(--brand-dark); }
.chat-side-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.chat-side-list a.active .chat-badge { background: rgba(255,255,255,.28); }
/* Pinned channels sit above a hairline. Site pins show a fixed dot; every
   other channel gets a star a member can toggle for themselves. */
.chat-side-list li.pin-end { border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 6px; }
.chat-side-row { display: flex; align-items: center; gap: 2px; }
.chat-side-row > a { flex: 1; min-width: 0; }
.pin-fixed { flex-shrink: 0; width: 22px; text-align: center; color: var(--accent); font-size: 8px; line-height: 1; }
.chat-side-row:hover .handle { flex-shrink: 0; font-size: 12px; color: var(--muted); font-family: var(--font-body); }
.chat-side-list a:hover .handle { color: var(--ink-soft); }
.chat-side-empty { padding: 6px 10px; color: var(--muted); font-size: 13px; }
.chat-people { margin-top: 2px; }
.chat-people summary { cursor: pointer; padding: 6px 10px; font-size: 13.5px; color: var(--accent); list-style: none; }
.chat-people summary::-webkit-details-marker { display: none; }
.chat-people summary:hover { text-decoration: underline; }
.chat-people-list { max-height: 240px; overflow-y: auto; }

/* The room is a fixed-height window, not a page that grows. Only the message
   list scrolls, so the reply box stays in sight and opening a conversation
   can land on the newest message. --chat-top is the sticky header's height
   plus a gap, measured in chat.js; 108px is its desktop value. */
.chat-main { position: sticky; top: var(--chat-top, 108px); height: calc(100vh - var(--chat-top, 108px) - 20px); height: calc(100dvh - var(--chat-top, 108px) - 20px); min-height: 380px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.chat-room-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.chat-room-titles { min-width: 0; }
.chat-room-head form { flex-shrink: 0; margin: 0; }
.sub-btn.is-on { color: var(--accent); border-color: var(--accent); }
.chat-room-head h1 { font-size: 22px; margin: 0; }
.chat-room-head p { margin: 4px 0 0; font-size: 14px; }
.chat-messages { list-style: none; margin: 0; padding: 12px 22px 18px; flex: 1; min-height: 0; overflow-y: auto; }
.chat-msg { padding: 1px 0; }
.chat-msg-meta { display: flex; align-items: baseline; gap: 10px; margin-top: 15px; }
.chat-msg-author { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.chat-msg--mine .chat-msg-author { color: var(--accent); }
.chat-msg-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-msg-ago { font-size: 11px; color: var(--muted); margin-left: -4px; }
/* Wraps, so a headline or an image can take a line of its own instead of
   squeezing the text into a column beside it. */
.chat-msg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.chat-msg-body { color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.5; }
.chat-msg-edited { flex-shrink: 0; font-size: 11.5px; color: var(--muted); }
.chat-msg-actions { flex-shrink: 0; margin-left: auto; display: inline-flex; gap: 4px; visibility: hidden; }
/* Only the message under the pointer, not the original a reply sits inside. */
.chat-msg:hover > .chat-msg-row .chat-msg-actions { visibility: visible; }
.chat-act { background: none; border: 0; padding: 0 4px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.chat-act:hover { color: var(--ink); text-decoration: underline; }
.chat-msg-actions .chat-act[data-act="delete"]:hover { color: var(--danger); }
.chat-edit { margin-top: 4px; }
.chat-edit-input { width: 100%; resize: vertical; min-height: 56px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; line-height: 1.5; background: #fff; color: var(--ink); }
.chat-edit-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(110,42,46,.15); }
.chat-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
/* Two rows, not one. The toolbar used to be a third item in a flex row, so it
   took its width out of the message box -- the box people actually type in
   ended up the narrowest thing in the composer. It gets its own row now and
   the box spans the full width underneath it. */
.chat-form { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; padding: 12px 22px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.chat-form textarea { width: 100%; min-height: 44px; resize: none; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; line-height: 1.5; background: #fff; color: var(--ink); overflow-y: auto; }
.chat-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(110,42,46,.15); }
.chat-form .btn { align-self: end; }
.chat-placeholder { padding: 44px 24px; }

.chat-room-mount { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Docked chat widget (bottom-right, on every non-chat page) */
.chat-dock { position: fixed; right: 20px; bottom: 0; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; }
.chat-launch { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; background: var(--brand); color: #fbfaf6; border: 1px solid var(--brand); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-hover); transition: background .12s; }
.chat-launch:hover { background: var(--brand-dark); }
.chat-launch-icon { width: 17px; height: 17px; display: inline-block; }
.chat-launch .chat-badge { background: var(--accent); }
.chat-panel { width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: calc(100vh - 130px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-hover); display: flex; flex-direction: column; overflow: hidden; margin-bottom: 8px; }
.chat-panel[hidden] { display: none; }
.chat-panel-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--brand); color: #fbfaf6; }
.chat-panel-title { flex: 1; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel-head button, .chat-panel-expand { background: none; border: 0; color: #fbfaf6; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; text-decoration: none; opacity: .82; }
.chat-panel-head button:hover, .chat-panel-expand:hover { opacity: 1; text-decoration: none; }
.chat-panel-back { font-size: 20px !important; }
.chat-panel-body { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.chat-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.chat-list-head { padding: 12px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.chat-list-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.chat-list-row:hover { background: var(--brand-soft); color: var(--ink); }
.chat-list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list-empty { padding: 6px 10px; color: var(--muted); font-size: 13px; }
.chat-dock .chat-messages { padding: 10px 12px; }
.chat-dock .chat-form { padding: 10px 12px; }
.chat-dock .chat-form textarea { font-size: 13.5px; }

@media (max-width: 720px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-sidebar { position: static; }
  .chat-main { position: static; }
  .chat-dock { right: 12px; }
  .chat-panel { height: 70vh; }
}

/* ---------------------------------------------------------------------------
   Geometry & texture
   Additive layer over "Luminous Minimal": paper grain for surface, and a
   square/rule motif (brackets, segmented bars, hatch) for structure. Every
   value is a token below, so the whole layer can be dialled back — or the
   block deleted — without touching anything above.
   --------------------------------------------------------------------------- */

:root {
  /* Seamless fractal-noise grain. stitchTiles keeps the 140px tile edge-free,
     so it repeats as paper rather than as wallpaper. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  --hatch: repeating-linear-gradient(45deg, rgba(110,42,46,.07) 0 1px, transparent 1px 6px);
  --hatch-soft: repeating-linear-gradient(45deg, rgba(28,37,48,.05) 0 1px, transparent 1px 7px);
  --bracket: 20px;        /* arm length of the corner brackets */
}

/* Texture — grain sits on the stone, not on the cards, so surfaces stay clean
   and the page behind them reads as paper stock. */
body {
  background-image:
    var(--grain),
    linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 520px);
  background-repeat: repeat, no-repeat;
}

/* The header edge becomes a rule stack: maroon hairline (the existing border),
   then a stone band, then the soft drop. --header-h absorbs the extra 3px. */
.site-header { box-shadow: 0 3px 0 var(--brand-soft), 0 4px 7px -3px rgba(28,37,48,.10); }

/* Hero eyebrow — two squares and a bar. The motif the brackets below echo. */
.hero::before {
  content: "";
  display: block;
  width: 46px; height: 7px;
  margin-bottom: 20px;
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--accent) 49%, transparent 50%) 0 0 / 7px 7px no-repeat,
    radial-gradient(circle, var(--accent) 49%, transparent 50%) 10px 0 / 7px 7px no-repeat,
    linear-gradient(rgba(110,42,46,.34) 0 0) 20px 0 / 26px 7px no-repeat;
}

/* Standalone section headings get a short rule with a square terminal. */
.section-title { position: relative; padding-bottom: 10px; }
.section-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 38px; height: 4px;
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--accent) 49%, transparent 50%) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--border-strong) 0 0) 8px 0 / 30px 4px no-repeat;
}

/* Cards carry a corner bracket instead of a heavier border — structure at the
   corner, nothing added to the edges. Kept in the neutral tone so a page of
   cards reads as rhythm rather than decoration. */
.card { position: relative; }
.card::before {
  content: "";
  position: absolute; left: -1px; top: -1px;
  width: var(--bracket); height: var(--bracket);
  border-top: 2px solid var(--border-strong);
  border-left: 2px solid var(--border-strong);
  border-top-left-radius: var(--radius);
  pointer-events: none;
}
/* The one card that should assert itself takes the accent. */
.start-here::before { border-color: var(--accent); }
.auth-card { position: relative; }
.auth-card::before {
  content: "";
  position: absolute; left: -1px; top: -1px;
  width: var(--bracket); height: var(--bracket);
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  border-top-left-radius: var(--radius);
  pointer-events: none;
}
/* start-here already carries an accent left border; its bracket would double
   up on that edge, so it keeps the top arm only. */
.start-here::before { border-left: 0; }

/* The stat tile's left bar stays solid and takes rounded ends. An earlier
   revision segmented it into dashes and hatched the corner; both read as noise
   against the numeral rather than as structure. */
.stat::before { border-radius: 999px; left: 8px; top: 12px; bottom: 12px; }

.site-footer { padding-top: 30px; }

/* ---------------------------------------------------------------------------
   Select sizing
   Selects inherit width:100% from the shared field rule, which suits text
   inputs but leaves a short list of statuses spanning the whole row. Size them
   to their content instead, capped so a long organization name truncates
   rather than stretching the control.
   --------------------------------------------------------------------------- */
.search-form select { width: auto; flex: 0 1 auto; min-width: 140px; max-width: 210px; }
.form select { width: auto; min-width: 170px; max-width: 320px; }

@media (max-width: 720px) {
  /* Narrow screens have no room to spare — let them fill the row again. */
  .search-form select, .form select { width: 100%; max-width: none; }
}

/* ---------------------------------------------------------------------------
   Home
   Two columns: the reading material on the left, each block in its own box and
   trimmed to the fewest words that still say the thing; conversations in a
   sticky right-hand rail so they stay in view while the rest is read.
   --------------------------------------------------------------------------- */
.home-main { min-width: 0; }
.hero--inline { padding: 0 0 20px; }
.hero--inline::before { display: none; }
.hero--inline h1 { font-size: 27px; }
.hero--inline .lede { font-size: 15.5px; margin-bottom: 0; }
/* Sits above the box rather than inside it, so the column has a title the way
   the left one does. Smaller than the page title, which it sits beside. */
.activity-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.activity-head h2 { margin: 0; font-size: 23px; }
.activity-head .card-more { margin: 0 0 0 auto; font-size: 13px; }
/* Adds up to the badges on the rows below it. */
.rail-new { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
/* Last block on the page, and the least urgent: quieter than the rest. */
.start-here h2 { font-size: 18px; }
/* Each card sizes to its own content -- a short list must not be stretched
   to the height of a long one, which is what left the empty boxes before. */
/* Each card sizes to its own content, so a short list is not stretched to
   the height of a long one. */
.grid-2 { align-items: start; }

/* Gatherings: date and title on one line, place quietly under it. */
.event-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.event-lines li { padding: 9px 13px; margin: 0 -13px; border-radius: var(--radius); transition: background .12s; }
.event-lines li:hover { background: var(--brand-soft); }
.event-lines a { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: var(--ink); }
.event-lines a:hover { text-decoration: none; }
.event-when { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.event-name { font-weight: 600; font-size: 15.5px; }
.event-where { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* Technology: one tool per line, its organization underneath in grey. */
.tech-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.tech-lines li { padding: 7px 13px; margin: 0 -13px; border-radius: var(--radius); font-size: 14.5px; transition: background .12s; }
.tech-lines li:hover { background: var(--brand-soft); }
.tech-lines a { font-weight: 600; color: var(--ink); }
.tech-org { display: block; font-size: 12.5px; color: var(--muted); }

/* The three headline numbers, as one quiet strip rather than three big tiles. */
/* First block on the page: the shape of the community in three numbers.
   Warmer ground and its own edge so it reads as a header band rather than
   another card in the stack. */
.counts-card {
  display: flex; flex-wrap: wrap; gap: 0; padding: 0;
  background: linear-gradient(155deg, var(--brand-soft), var(--surface) 60%);
  border-color: var(--border-strong);
  overflow: hidden;
}
.counts-card::before { display: none; }
.counts-card > a { flex: 1 1 150px; padding: 17px 22px; border-right: 1px solid var(--border); }
.counts-card > a:last-child { border-right: 0; }
.counts-card > a:hover { background: rgba(255,255,255,.5); }
.counts-card a { display: flex; align-items: baseline; gap: 8px; color: var(--ink-soft); font-size: 13.5px; transition: background .12s; }
.counts-card a:hover { color: var(--accent); text-decoration: none; }
.counts-card b { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }

/* The conversation rail. Whole rows are the target, rounded, lit on hover. */
.card--chat::before { border-color: var(--accent); }
.convo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 6px; }
.convo { display: grid; align-content: start; gap: 2px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); transition: background .12s, border-color .12s; }
.convo:hover { background: var(--brand-soft); border-color: var(--border-strong); text-decoration: none; }
.convo-list li { display: grid; }
.convo-head { display: flex; align-items: center; gap: 8px; }
.convo-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.convo-new { margin-left: auto; flex-shrink: 0; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.convo-quiet { color: var(--muted); font-size: 13.5px; margin: 0; }
.convo-line { font-size: 13.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-author { font-weight: 600; color: var(--ink); }
.convo-when { font-size: 11.5px; color: var(--muted); }
.convo-empty { color: var(--muted); font-style: italic; }
.convo--unread .convo-name { font-weight: 700; }
.convo--unread .convo-line { color: var(--ink); }

.start-here .lined li { font-size: 14px; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   The Chat tab
   Seven equal tabs said every part of the site mattered equally. Chat is the
   reason the group has a site at all, so it leads the nav, is the only tab
   shaped like a button, and carries the unread count on every page.
   --------------------------------------------------------------------------- */
.nav-chat { display: inline-flex; align-items: center; gap: 7px; margin: 0 4px; background: var(--brand-soft); border-color: var(--border-strong) !important; color: var(--ink) !important; font-weight: 600 !important; }
.nav-chat svg { flex-shrink: 0; color: var(--accent); }
.nav-chat:hover { background: var(--surface); text-decoration: none; }
.nav-chat.active { background: var(--accent); border-color: var(--accent) !important; color: #fbfaf6 !important; }
.nav-chat.active svg { color: #fbfaf6; }
.nav-chat.active:hover { background: var(--accent-dark); border-color: var(--accent-dark) !important; }
/* The badge sits inside the tab, so it must not inherit the tab's fill. */
.nav-chat-badge { min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; background: var(--accent); color: #fff; }
.nav-chat.active .nav-chat-badge { background: #fbfaf6; color: var(--accent); }

/* ---------------------------------------------------------------------------
   Reactions
   A row of small round chips under a message. They must read as a response to
   the message, not as another message, so they stay light: no fill until you
   have used one, and the count only appears once someone has.
   --------------------------------------------------------------------------- */
.chat-reacts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 4px 0 0; }
.chat-msg--cont .chat-reacts { margin-top: 3px; }

.chat-react { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); cursor: pointer; font-family: inherit; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); transition: background .12s, border-color .12s, color .12s; }
.chat-react:hover { background: var(--brand-soft); border-color: var(--muted); }
.chat-react.is-mine { background: #f3e6e7; border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chat-react-emoji { font-size: 13px; line-height: 1; }
.chat-react-count { font-variant-numeric: tabular-nums; }

/* The "+" only shows on hover or focus, so a quiet thread stays quiet. */
.chat-react-add { position: relative; display: inline-flex; }
.chat-react-open { width: 24px; height: 24px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; opacity: 0; transition: opacity .12s, color .12s, border-color .12s; }
.chat-msg:hover > .chat-reacts .chat-react-open, .chat-react-open:focus-visible, .chat-reacts:focus-within .chat-react-open { opacity: 1; }
.chat-react-open:hover { color: var(--accent); border-color: var(--accent); }

/* Ten choices in two rows of five, so the picker stays narrow enough for a
   phone instead of one long pill running off the edge. */
.chat-react-menu { position: absolute; bottom: calc(100% + 6px); left: 0; display: grid; grid-template-columns: repeat(5, 30px); gap: 2px; padding: 5px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow-hover); z-index: 30; }
.chat-react-menu[hidden] { display: none; }
.chat-react-pick { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; font-size: 16px; line-height: 1; transition: background .12s, transform .08s; }
.chat-react-pick:hover { background: var(--brand-soft); transform: translateY(-1px); }

/* In the docked panel everything is tighter. */
.chat-panel .chat-react { font-size: 11.5px; padding: 1px 7px; }
.chat-panel .chat-react-open { width: 21px; height: 21px; font-size: 13px; opacity: 1; }

/* ---------------------------------------------------------------------------
   Viewing as another member
   Deliberately loud and above everything. Someone who forgets they are looking
   through another person's account can do real damage with an ordinary click,
   so this does not tuck itself away or scroll off.
   --------------------------------------------------------------------------- */
.viewing-as { background: var(--accent); color: #fbfaf6; font-size: 14px; position: relative; z-index: 60; }
.viewing-as-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 9px 24px; }
.viewing-as-text { flex: 1; min-width: 240px; line-height: 1.45; }
.viewing-as strong { font-weight: 700; }
.viewing-as form { margin: 0; }
.viewing-as-exit { background: #fbfaf6; color: var(--accent); border: 0; border-radius: 999px; padding: 5px 15px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .12s; }
.viewing-as-exit:hover { background: #fff; }
.viewing-as-exit:focus-visible { outline: 2px solid #fbfaf6; outline-offset: 2px; }

/* The directory's two groupings. A switch between views of one page, so it is
   quieter than the nav tabs and does not pretend to be navigation. */
.view-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 20px; background: var(--brand-soft); border: 1px solid var(--border); border-radius: 999px; }
.view-opt { padding: 6px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); transition: background .12s, color .12s; }
.view-opt:hover { color: var(--ink); text-decoration: none; }
.view-opt.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------------------------------------------------------------------------
   Welcome — the first thing a new member sees
   These are technology leaders who mostly do not enjoy using technology. The
   panel is deliberately large, warm and short: three things, each one a whole
   clickable block rather than a link to hunt for.
   --------------------------------------------------------------------------- */
.welcome { background: linear-gradient(150deg, var(--brand-soft), var(--surface) 65%); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 30px 32px; margin-bottom: 22px; box-shadow: var(--shadow), var(--lip); }
.welcome h1 { font-size: 30px; line-height: 1.15; margin: 0 0 8px; }
.welcome > p { font-size: 17px; color: var(--ink-soft); margin: 0 0 22px; max-width: 58ch; }
.welcome-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.wstep { display: grid; gap: 4px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); transition: border-color .12s, transform .08s, box-shadow .12s; }
.wstep:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.wnum { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--accent); }
.wtitle { font-size: 18px; font-weight: 700; line-height: 1.25; }
.wsub { font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.welcome-help { font-size: 15px; color: var(--ink-soft); margin: 22px 0 0; }

/* ---------------------------------------------------------------------------
   Legibility
   Muted grey at 13px is fine for a designer looking for it and invisible to
   someone who is not. Everything secondary moves up a step and darkens.
   --------------------------------------------------------------------------- */
:root { --muted: #6f6857; }          /* was #938c7e — too faint on stone */
.lede { font-size: 17.5px; }
.card-sub { font-size: 14.5px; }
.convo-line { font-size: 14.5px; }
.convo-name { font-size: 15.5px; }
.tech-lines li { font-size: 15px; }
.tech-org { font-size: 13.5px; }
.rail-sub, .event-where { font-size: 13.5px; }
.table th { font-size: 12px; }
.table td { font-size: 15px; }

/* The welcome's footer: the help line, and the way to put it away. */
.welcome-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.welcome-foot .welcome-help { margin: 0; flex: 1; min-width: 260px; }
.welcome-foot form { margin: 0; }
.welcome-done { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 9px 20px; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.welcome-done:hover { background: var(--accent); border-color: var(--accent); color: #fbfaf6; }
.welcome-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Charter and Bylaws ----------------------------------------------------
   This is the document CTL has to keep to remain a non-profit, and the page is
   built to carry that weight: a masthead, a table of contents, and numbered
   articles set on paper. It is the one page on the site that is allowed to look
   like a printed document rather than an interface.

   Everything below is open by default. A governing document that hides its own
   contents behind thirteen clicks argues badly for itself.
   --------------------------------------------------------------------------- */

.charter { max-width: 780px; margin: 0 auto; }

/* Masthead. Double rules above and below, the way a charter's title block is
   set -- one hairline and one heavier, which reads as deliberate where a single
   line reads as a divider. */
.charter-head { text-align: center; padding: 34px 20px 30px; margin-bottom: 26px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 4px; box-shadow: var(--shadow); }
.charter-org { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.charter-head h1 { font-family: var(--font-head); font-size: clamp(30px, 5.2vw, 44px); font-weight: 800; line-height: 1.1; margin: 0; padding: 0 0 18px; text-wrap: balance; }
/* The hairline under the title, kept short and centred so it reads as part of
   the title block rather than as the start of the next thing. */
.charter-head h1::after { content: ""; display: block; width: 74px; height: 2px; margin: 18px auto 0; background: var(--accent); opacity: .5; }
.charter-dates { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; margin: 0; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.charter-dates b { font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; }
.charter-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.charter-actions:empty { display: none; }

/* A small-caps rule-label, used above Officers and Contents. */
.charter-label { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.charter-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Officers -- a signature block, not a table of boxes. Hairline separated. */
.charter-officers { margin-bottom: 26px; }
.officers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow); }
.officer { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; background: var(--surface); }
.officer-role { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.officer-name { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.officer-name a { color: inherit; }
.officer-name a:hover { color: var(--accent); }
.officer-org { font-size: 13px; color: var(--muted); }
/* A vacancy is a fact about the group, stated plainly rather than alarmed. */
.officer--vacant .officer-name { color: var(--muted); font-weight: 400; font-style: italic; }
.charter-admin { margin: 10px 0 0; font-size: 13px; }

/* Contents. Numbered because the articles are, and because this is how anyone
   refers to the document out loud: "Article IX". */
.charter-contents { margin-bottom: 26px; padding: 22px 24px; background: var(--brand-soft); border: 1px solid var(--border); border-radius: 4px; }
.charter-contents ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.charter-contents li { break-inside: avoid; margin-bottom: 7px; }
.charter-contents a { display: flex; gap: 10px; font-size: 15.5px; color: var(--ink-soft); }
.charter-contents a:hover { color: var(--accent); }
.toc-num { flex: none; width: 34px; text-align: right; font-family: var(--font-head); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.charter-collapse { margin-top: 16px; font-size: 13px; }

/* An article. Paper, a hairline, a soft shadow, and a maroon numeral -- the
   things that make a block of text read as a clause of something official
   rather than as a paragraph on a website. */
.article { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px; margin-bottom: 14px; box-shadow: var(--shadow); scroll-margin-top: 80px; }
.article > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-radius: 3px; }
.article > summary::-webkit-details-marker { display: none; }
.article > summary:hover { background: var(--brand-soft); }
.article > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.article-num { flex: none; display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 50%; background: var(--brand-soft); color: var(--accent); font-family: var(--font-head); font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.article[open] .article-num { background: var(--accent); color: var(--surface); }
.article-titles { display: flex; flex-direction: column; gap: 2px; }
.article-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
.article-heading { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.2; text-wrap: balance; }

/* The prose itself is set in a serif and held to a readable measure. Nothing
   else on this page does more to make it feel like a document you are meant to
   keep rather than a screen you are meant to skim. */
.article-body { padding: 6px 24px 24px 86px; }
/* Set a step larger than anything else on the site. This is the one page people
   read rather than scan, some of them on a phone in a meeting, and a governing
   document that is a chore to read does not get read. The measure comes down as
   the type goes up, so the line length stays where the eye can track it. */
.article-body p, .article-body li { max-width: 64ch; font-family: Georgia, "Palatino Linotype", Palatino, "Times New Roman", serif; font-size: 18px; line-height: 1.75; color: var(--ink-soft); }
.article-body p { margin: 0 0 17px; }
.article-body p:last-child, .article-body ul:last-child { margin-bottom: 0; }
.article-body ul { margin: 0 0 17px; padding-left: 24px; }
.article-body li { margin-bottom: 10px; padding-left: 4px; }
.article-body li::marker { color: var(--accent); }

.charter-foot { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); text-align: center; }
.charter-foot p { margin: 0; font-size: 13px; letter-spacing: .04em; color: var(--muted); font-style: italic; }

.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkish[hidden] { display: none; }

@media (max-width: 640px) {
  .charter-contents ol { columns: 1; }
  .article > summary { gap: 12px; padding: 15px 16px; }
  .article-num { min-width: 38px; height: 38px; font-size: 14px; }
  .article-body { padding: 6px 16px 20px 16px; }
  .article-body p, .article-body li { font-size: 17.5px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .article > summary { transition: none; }
}

/* Somebody will want this in front of a board, so it prints as a document:
   no interface, every article open whatever the reader collapsed on screen,
   and no article split across a page break where it can be helped. */
@media print {
  .site-header, .site-footer, .chat-dock, .charter-actions,
  .charter-admin, .charter-collapse { display: none !important; }
  body { background: #fff; }
  .main { padding: 0; }
  .charter { max-width: none; }
  .charter-head, .officers, .article, .charter-contents { box-shadow: none; background: #fff; }
  .article { break-inside: avoid; page-break-inside: avoid; border-left-width: 2px; }
  .article[open] .article-num { background: #fff; color: #000; border: 1px solid #000; }
  details.article > .article-body { display: block !important; }
}

/* --- Technology tab --------------------------------------------------------
   A search box on an empty page asks the member to already know what they are
   looking for. This leads with the thing they most want and least often know:
   what the rest of the group has actually converged on. */
.shared-band { margin: 4px 0 26px; padding: 22px 24px 24px; background: var(--brand-soft); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.shared-band h2 { font-family: var(--font-head); font-size: 22px; margin: 0 0 4px; }
.shared-sub { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-soft); max-width: 60ch; }
.shared-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.shared-list a { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); transition: border-color .12s, transform .08s, box-shadow .12s; }
.shared-list a:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.shared-name { font-size: 16px; font-weight: 600; line-height: 1.25; }
.shared-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The two dropdowns are real but rarely wanted first, so they fold away. */
.more-filters { flex-basis: 100%; }
.more-filters > summary { cursor: pointer; font-size: 13.5px; color: var(--accent); width: max-content; padding: 2px 0; }
.more-filters > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.more-filters-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; margin-top: 12px; }
.more-filters-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* The question this page provokes, given somewhere to go. */
.ask-line { margin: 0 0 14px; }
.ask-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.ask-btn::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: var(--speech) center / contain no-repeat; mask: var(--speech) center / contain no-repeat; }
.ask-btn:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); background: var(--brand-soft); }
:root { --speech: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.9 8.9 0 0 1-4-.9L3 21l1.9-4.9A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E"); }

@media (max-width: 640px) {
  .shared-list { grid-template-columns: 1fr 1fr; }
  .shared-band { padding: 18px 16px 20px; }
}

/* --- Technology tab, top of page ------------------------------------------
   This had grown into a title, a three-line explanation, a panelled search box,
   a nested "Narrow it down", and eleven category buttons in three rows -- all
   before a single result. One line, one box, then the answer. */
.tech-head { margin-bottom: 20px; }
.tech-head h1 { margin: 0 0 6px; }
.tech-sub { margin: 0; max-width: 62ch; font-size: 15.5px; color: var(--ink-soft); }

/* The search box is the page's one instrument, so it is allowed to be big. */
.tech-search { display: flex; gap: 10px; margin: 0 0 22px; }
.tech-search input[type="search"] { flex: 1; min-width: 0; font-size: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.tech-search input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--brand-soft); }
.tech-search .btn { padding-left: 24px; padding-right: 24px; }

/* Browsing, folded away. Open it and the categories and the two dropdowns are
   all there; leave it shut and the page is a search box and an answer. */
.browse { margin: 0 0 4px; }
.browse > summary { cursor: pointer; width: max-content; padding: 4px 0; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.browse > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.browse-body { padding: 16px 0 6px; }
.browse-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.browse-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 640px) {
  .tech-search { flex-wrap: wrap; }
  .tech-search input[type="search"] { flex: 1 1 100%; font-size: 16px; }
  .tech-search .btn { flex: 1; }
}

/* The way back to the welcome panel, on the page the panel lives on. It sat in
   the account menu before, which is a reasonable place for it and a hopeless
   place to find it. Quiet on purpose: one line for the few who want it, not a
   banner for everyone who dismissed the panel and meant it. */
.welcome-back { margin: 0 0 18px; }
.welcome-back button { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 999px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.welcome-back button:hover { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--brand-soft); }
.welcome-back button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A chevron pointing down: what this does is unfold something below it. */
.wb-chev { width: 7px; height: 7px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }

/* --- The guide -------------------------------------------------------------
   Written for people who lead technology without wanting to spend an evening
   learning another tool. Bigger type than the rest of the site, short measures,
   one instruction at a time. */
.guide { max-width: 760px; margin: 0 auto; }
.guide-head { margin-bottom: 30px; }
.guide-eyebrow { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.guide-head h1 { margin: 0 0 12px; font-size: clamp(28px, 4.6vw, 40px); line-height: 1.12; text-wrap: balance; }
.guide-lede { margin: 0; max-width: 54ch; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }

/* The one instruction that matters, given its own ground so it cannot be
   skimmed past on the way to the detail. */
.guide-first { padding: 26px 28px; margin-bottom: 8px; background: var(--brand-soft); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.guide-first h2 { margin: 0 0 8px; font-size: 21px; }
.guide-first p { margin: 0 0 18px; max-width: 54ch; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }

.guide-section { margin: 42px 0 8px; font-size: 26px; }
.guide-intro { margin: 0 0 20px; max-width: 60ch; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }

.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.gcard { padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.gcard h3 { margin: 0 0 10px; font-size: 18.5px; line-height: 1.25; }
.gcard p { margin: 0 0 11px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.gcard p:last-child { margin-bottom: 0; }
.gcard b { color: var(--ink); font-weight: 600; }

/* Definition lists for the parts that are one line each. A hanging term reads
   faster than a heading when there are eight of them. */
.guide-rest, .guide-faq { margin: 0; }
.guide-rest dt, .guide-faq dt { margin: 22px 0 5px; font-size: 18px; font-weight: 700; color: var(--ink); }
.guide-rest dt:first-child, .guide-faq dt:first-child { margin-top: 0; }
.guide-rest dd, .guide-faq dd { margin: 0; max-width: 64ch; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); }
.guide-faq dt { font-size: 17px; }

.guide-close { margin: 40px 0 0; padding: 24px 28px; background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.guide-close p { margin: 0 0 16px; max-width: 58ch; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.guide-more { margin: 22px 0 0; font-size: 15px; }

/* The header button. Not a nav tab: it is not a place in the site, it is help
   with the places, so it sits with search rather than competing with them. */
.header-guide-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; margin-right: 2px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: border-color .12s, color .12s, background .12s; }
.header-guide-btn:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); background: var(--brand-soft); }
.header-guide-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fbfaf6; }

@media (max-width: 860px) {
  /* The label goes before the nav does; the mark still reads as help. */
  .header-guide-btn span { display: none; }
  .header-guide-btn { padding: 6px 9px; }
}

/* A vacant post asks for something instead of just reporting a gap. */
.officer-ask { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 12px; border: 1px solid var(--accent); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--accent); width: max-content; }
.officer-ask::before { content: "+"; font-size: 14px; line-height: 1; }
.officer-ask:hover { background: var(--accent); color: var(--surface); text-decoration: none; }

/* Recommending somebody. Deliberately short: this competes with a corridor
   conversation, not with an application process. */
.rec { max-width: 620px; margin: 0 auto; }
.rec h1 { margin: 0 0 12px; font-size: clamp(26px, 4.4vw, 36px); line-height: 1.14; text-wrap: balance; }
.rec-lede { margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.rec-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); }
.rec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.rec-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* ---- FAQ -----------------------------------------------------------------
   Questions fold. Somebody arrives with one question, not twenty, so the page
   leads with the list of questions and keeps every answer out of the way until
   it is asked for -- and when it opens, the answer sits directly under its own
   question rather than somewhere down a wall of text.

   Same chevron and the same "expand all" control the directory and the bylaws
   use, so a fold behaves the same way everywhere on the site. */
.faq { max-width: 760px; }
.faq-tools { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 22px 0 10px; }
.faq-hint { margin: 0; font-size: 14.5px; color: var(--muted); }
.faq-tools .linkish { font-size: 14px; }

.faq-set { margin: 0 0 30px; }
/* The section label is a signpost, not a heading to read: quiet, and small
   enough that the questions stay the loudest thing on the page. */
.faq-label { margin: 26px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.faq-set:first-of-type .faq-label { margin-top: 12px; }

.faq-q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s; }
.faq-q:hover { border-color: var(--border-strong); }
.faq-q[open] { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }

/* flex-start, not center: a question that wraps to two lines should keep its
   chevron level with the first line rather than drifting to the middle. */
.faq-q > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 12px; padding: 15px 20px; border-radius: var(--radius); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform .15s ease; }
.faq-q[open] > summary::before { transform: rotate(45deg); }
.faq-q > summary:hover { background: var(--brand-soft); }
.faq-q[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
.faq-q > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The answer lines up with the question above it rather than with the chevron,
   so the pair reads as one block. */
.faq-a { padding: 2px 22px 18px 39px; }
.faq-a p { margin: 0 0 12px; max-width: 62ch; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); }
.faq-a p:last-child { margin-bottom: 0; }

.faq-more { margin: 30px 0 0; font-size: 15px; color: var(--muted); }

@media (max-width: 620px) {
  .faq-q > summary { padding: 14px 16px; font-size: 16.5px; }
  .faq-a { padding: 2px 18px 16px 35px; }
}

/* Printing an FAQ means wanting all of it, open or not. */
@media print {
  .faq-tools { display: none; }
  .faq-q { break-inside: avoid; box-shadow: none; }
  .faq-q > summary::before { display: none; }
  .faq-q:not([open]) > .faq-a { display: block !important; content-visibility: visible !important; }
}

/* ---- The next gathering ---------------------------------------------------
   Deliberately the largest thing on the landing page after the chat feed. It
   was a line in a list, indistinguishable from a line about a software
   licence, three days before people fly to it.

   Two states. Before it starts it counts down on a pale panel; while it is on
   it fills with the accent, because "Happening now" should not need reading
   twice. */
.gathering {
  position: relative; margin: 0 0 22px; padding: 26px 30px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-hover), var(--lip);
}
.gathering-flag {
  display: inline-block; margin: 0 0 12px; padding: 4px 12px;
  background: var(--brand-soft); border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.gathering-title { margin: 0 0 8px; font-size: clamp(24px, 3.6vw, 32px); line-height: 1.15; text-wrap: balance; }
.gathering-title a { color: var(--ink); }
.gathering-title a:hover { color: var(--accent); text-decoration: none; }
/* Dates in the display face, because the date is the fact somebody came for. */
.gathering-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 20px; }
.gathering-dates { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--accent); }
.gathering-where { font-size: 15.5px; color: var(--muted); }
.gathering-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Under way. The panel stops being a card on the page and becomes the page. */
.gathering--now { background: var(--accent); border-color: var(--accent-dark); border-left-color: var(--accent-dark); box-shadow: var(--shadow-hover); }
.gathering--now .gathering-flag { background: rgba(255,255,255,.16); color: #fbfaf6; }
.gathering--now .gathering-title a, .gathering--now .gathering-dates { color: #fbfaf6; }
.gathering--now .gathering-title a:hover { color: #fff; }
.gathering--now .gathering-where { color: rgba(251,250,246,.82); }
.gathering--now .btn { background: #fbfaf6; border-color: #fbfaf6; color: var(--accent); }
.gathering--now .btn:hover { background: #fff; border-color: #fff; }
.gathering--now .btn--ghost { background: transparent; border-color: rgba(251,250,246,.55); color: #fbfaf6; }
.gathering--now .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fbfaf6; }

@media (max-width: 620px) {
  .gathering { padding: 22px 20px; }
  .gathering-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ---- Magnification -------------------------------------------------------
   The whole page grows, not the text alone: CSS zoom, which is what the
   browser's own Command-plus does. A heading that stays put while the
   paragraph under it grows looks broken, and half the point of asking for
   bigger is to keep the proportions.

   Bottom left, because the chat bubble owns bottom right. Quiet until
   somebody has used it, then it holds the accent so the reason the page looks
   different is visible rather than mysterious. Hidden by the script if the
   browser cannot do it.

   It is per browser, per machine, and invisible to everyone else. */
.magnify {
  position: fixed; left: 14px; bottom: 14px; z-index: 45;
  display: inline-flex; align-items: stretch; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; box-shadow: var(--shadow);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Smaller than a control you are meant to notice: it is there when wanted
     and out of the way the rest of the time. It also sits at the far edge of
     a page that may itself be magnified, so it grows with everything else. */
  opacity: .82; transition: opacity .14s;
}
.magnify:hover, .magnify:focus-within, .magnify.is-changed { opacity: 1; }
.magnify-btn, .magnify-level {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--ink-soft); transition: background .12s, color .12s;
}
.magnify-btn { width: 27px; font-size: 15px; font-weight: 600; line-height: 1; }
.magnify-btn:hover, .magnify-level:hover { background: var(--brand-soft); color: var(--accent); }
.magnify-btn:focus-visible, .magnify-level:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.magnify-level {
  min-width: 40px; padding: 5px 3px; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
/* Once it is off 100%, the control says so and offers the way back. */
.magnify.is-changed { border-color: var(--accent); }
.magnify.is-changed .magnify-level { color: var(--accent); }

@media print { .magnify { display: none; } }

/* ---- The page ground ------------------------------------------------------
   Sam: the colours are plain, which is right, but the page reads flat and a
   little old-school. This gives it depth without giving it ornament.

   Three layers, all of them quiet:
     1. a paper grain, fractal noise at 3.5% -- felt rather than seen, and the
        thing that stops a large flat fill reading as a blank screen;
     2. a warm wash falling from the top, so the page has a light source and
        the header sits on something rather than floating;
     3. the faintest maroon breath in the top corner, which is the only place
        the accent appears at large scale anywhere on the site.

   Explicitly NOT hatching, dashes or rules: that was tried in August, it was
   busy, and it came out. Grain is texture; hatching is decoration. Every layer
   here is fixed to the viewport, so nothing shifts or tiles visibly as the
   page scrolls.

   To take it back out, delete this block. Nothing else depends on it. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(1200px 420px at 72% -140px, rgba(110, 42, 46, .055), transparent 70%),
    linear-gradient(180deg, #fbf9f3 0%, var(--bg) 340px);
  background-attachment: fixed, fixed, fixed;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* The header is the one band that sits above the wash, so it gets its own
   warmth rather than inheriting the page's. */
.site-header { background-image: linear-gradient(180deg, #fdfcf8 0%, var(--surface) 100%); }

/* Cards were a near-white on a near-white. A hair more separation at the edge
   makes them read as raised without touching a single hue. */
.card, .gcard, .org-card, .stat, .gathering, .faq-q, .auth-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 58%);
}

@media print { body { background-image: none; } }

/* ---- Who you are here ----------------------------------------------------
   Title and organization beside the greeting. In a peer group of technology
   leaders these are the reason somebody is in the room, and a site that knows
   them and says nothing is a login rather than a membership.

   Far right on a wide screen, under the greeting on a narrow one. The edit
   link is quiet until there is nothing to show, which is when it matters:
   most members have no title on file, and the fix should be one click rather
   than an email to an administrator. */
.hero--who, .welcome-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.hero-words { flex: 1 1 340px; min-width: 0; }
.whoami {
  flex: 0 1 auto; margin: 4px 0 0; padding: 10px 16px; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  border-right: 3px solid var(--accent); border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(110,42,46,0), rgba(110,42,46,.05));
}
.whoami-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.whoami-org { font-size: 14px; color: var(--accent); font-weight: 600; }

@media (max-width: 640px) {
  .whoami { text-align: left; align-items: flex-start; width: 100%;
    border-right: 0; border-left: 3px solid var(--accent); border-radius: 0 3px 3px 0;
    background: linear-gradient(270deg, rgba(110,42,46,0), rgba(110,42,46,.05)); }
}

/* The login page's two ways in. */
.auth-aside { margin-top: 16px; }
.auth-ways { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.auth-ways-head { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.auth-ways p { margin: 0 0 8px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.auth-ways p:last-child { margin-bottom: 0; }

/* What a member cannot change about themselves, said plainly rather than by
   leaving the fields out and hoping nobody wonders. */
.profile-fixed { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.profile-fixed-head { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.profile-fixed dl { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px; }
.profile-fixed dt { font-weight: 600; color: var(--ink-soft); }
.profile-fixed dd { margin: 0; color: var(--ink); }

/* ---- The two doors -------------------------------------------------------
   What an unauthenticated visitor sees, and the whole of the decision in
   front of them. Somebody who has never been here does not know that "Log in"
   is where registering hides, and somebody who presses Log in already has an
   account -- so both doors are on the first screen, at tile size, and
   registering is the louder one.

   Equal weight in layout, unequal in colour: returning members already know
   what to do. */
/* Logging in leads. Most people arriving already have an account, so that is
   the full-size button and it comes first. Registering has to be visible --
   somebody new would not think to press Log in to find it -- but smaller, and
   underneath, so it does not compete with what most visitors came to do. */
.doorway { max-width: 560px; margin: 8px 0 40px; }
.doorway-main { display: inline-flex; }
.doorway-new { margin: 16px 0 0; font-size: 15px; color: var(--muted); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.doorway-new a { font-weight: 600; }
.door {
  display: flex; flex-direction: column; gap: 6px; padding: 26px 28px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow), var(--lip);
  color: var(--ink); transition: transform .1s, box-shadow .14s, border-color .14s;
}
.door:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.door-flag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.door-title { font-family: var(--font-head); font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.door-sub { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-top: 2px; }
/* Reads as the button it effectively is, without nesting a link in a link. */
.door-go {
  margin-top: 14px; align-self: flex-start; padding: 10px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid var(--border-strong); color: var(--ink);
}
.door-go::after { content: " \2192"; }

.door--primary { background: var(--accent); border-color: var(--accent-dark); }
.door--primary:hover { border-color: var(--accent-dark); }
.door--primary .door-flag { color: rgba(251,250,246,.72); }
.door--primary .door-title { color: #fbfaf6; }
.door--primary .door-sub { color: rgba(251,250,246,.88); }
.door--primary .door-go { background: #fbfaf6; border-color: #fbfaf6; color: var(--accent); }
.door--primary:hover .door-go { background: #fff; }

@media (max-width: 600px) {
  .door { padding: 22px 20px; }
  .door-title { font-size: 24px; }
}


/* --- private channels ---------------------------------------------------- */
.chat-lock { font-size: .78em; opacity: .75; margin-right: .15em; }
.chat-private-note { font-size: .85rem; }
.chat-private-note a { margin-left: .35rem; }
.private-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin: 1rem 0;
}
.private-box .muted { font-size: .85rem; margin: .35rem 0 0; }
.check-line { display: flex; align-items: center; gap: .5rem; margin: 0; }
.check-line label { margin: 0; font-weight: 600; }
.private-people { margin-top: .75rem; }
.private-people summary { cursor: pointer; font-weight: 600; }
.plain-list { list-style: none; padding: 0; margin: .5rem 0; }
.check-list li { padding: .2rem 0; }
.check-list label { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.people-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--border);
}
.people-row:last-child { border-bottom: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- the time, and the weather if asked for ------------------------------ */
.nowbar {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .4rem 1rem;
  margin: 0 0 1rem;
  padding: .55rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.now-time { margin: 0; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.now-clock { font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.now-date { color: var(--muted); font-size: .9rem; }
.now-weather { margin: 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.now-weather--quiet { color: var(--muted); font-size: .85rem; }
.now-ask {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: .85rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.now-ask:hover { color: var(--ink); }
@media (max-width: 480px) {
  .nowbar { gap: .25rem; }
  .now-weather, .now-ask { width: 100%; }
}

/* The shared starting password, asked about until it is replaced. */
.shared-password-note {
  margin: 0 0 16px;
  padding: .6rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: .92rem;
}
.shared-password-note a { margin-left: .35rem; }
/* --- the two things you need to log in, after registering --------------- */
/* Each credential gets its own box rather than a row in a ruled table: the
   label has to be read, and a label in a table header is the first thing an
   eye skips. Two boxes, same weight, because the address is as easy to get
   wrong as the password -- people remember the unfamiliar half and guess at
   the familiar one. */
.credentials {
  display: flex; flex-direction: column; gap: 10px;
  margin: 1.1rem 0 1.3rem;
}
.credential {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: .7rem .9rem .8rem;
}
.credential__label {
  display: block;
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .35rem;
}
.credential__value {
  display: block;
  font-size: 1.3rem; letter-spacing: .02em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .credential__value { font-size: 1.1rem; }
}

/* --- what a formatted message looks like ---------------------------------- */
/* Formatted message bodies. The body keeps pre-wrap for ordinary typing, so
   anything block-level inside it has to opt back out of it. */
.chat-msg-body strong { font-weight: 700; color: var(--ink); }
.chat-msg-body em { font-style: italic; }
.chat-msg-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--grey-bg); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px;
}
.chat-msg-body ul,
.chat-msg-body ol { white-space: normal; margin: 4px 0; padding-left: 20px; }
.chat-msg-body li { margin: 1px 0; }
.chat-msg-body blockquote {
  white-space: normal; margin: 5px 0; padding: 2px 0 2px 10px;
  border-left: 2px solid var(--border); color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Phones
   Gathered here rather than scattered through the file, because the thing
   being protected is a single budget: how much of a phone screen is gone
   before any content appears. The header was reserving 98px and then wrapping
   the nav onto a second row underneath it, which on a 5.5in screen is most of
   what you can see without scrolling.

   The rule applied throughout: anything that is a convenience on a desktop
   and a duplicate on a phone goes. Nothing that is the only way to reach
   something is removed.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* The gutter. 24px each side is 48px of a 390px screen. */
  .container { padding: 0 16px; }
  .main { padding-top: 20px; padding-bottom: 40px; }

  /* The header, which was the whole problem. No reserved height, smaller
     wordmark, tighter tabs -- the nav still wraps when it must, but it needs
     to far less often. */
  .header-inner { min-height: 0; padding: 8px 0; gap: 10px; }
  .brand-words { font-size: 20px; letter-spacing: .03em; }
  .brand-words small { font-size: 9.5px; letter-spacing: .09em; margin-top: 2px; }
  .nav { gap: 2px; }
  .nav a { padding: 6px 10px; font-size: 14.5px; }
  .account-avatar { width: 30px; height: 30px; font-size: 12px; }
  .header-search-btn { width: 30px; height: 30px; }

  /* Pinch-to-zoom is built into the phone and better than this is. It stays
     on desktop, where there is no such gesture and it earns its corner. */
  .magnify { display: none; }

  /* Sign-in and registration: the card was centred in 56px of air on a screen
     with none to spare. */
  .auth-card { margin: 16px auto; padding: 22px 18px; }
  .auth-card h1 { font-size: 1.5rem; }

  /* Writing a message. Tighter padding so the Send button stays on screen. */
  .chat-form { padding: 10px 16px 12px; gap: 6px 8px; }
}

/* ---------------------------------------------------------------------------
   Choosing a date for the next gathering
   Three buttons per row, and the one you pressed stays pressed -- on a phone,
   in a room, the question "did that register?" has to be answerable without
   scrolling back up to a banner.
   --------------------------------------------------------------------------- */
.datepoll { margin-bottom: 12px; }
.datepoll-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.datepoll-when { margin: 0; font-size: 1.15rem; }
.datepoll-count {
  font-size: 13px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.datepoll-note { margin: 4px 0 0; font-size: 14px; }
.datepoll-people { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.datepoll-by { margin: 8px 0 0; font-size: 12.5px; }

.datepoll-answers { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.datepoll-btn {
  flex: 1 1 auto; min-width: 116px;
  padding: 9px 14px;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.datepoll-btn:hover { background: #fff; color: var(--ink); border-color: var(--accent); }
.datepoll-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.datepoll-btn.is-mine {
  background: var(--accent); border-color: var(--accent); color: #fbfaf6;
}
.datepoll-btn--no.is-mine { background: var(--muted); border-color: var(--muted); }
.datepoll-btn--maybe.is-mine { background: var(--ink-soft); border-color: var(--ink-soft); }

.datepoll-settle { margin: 10px 0 0; }
.datepoll-choose {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
}
.datepoll-choose:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .datepoll-btn { min-width: 0; flex-basis: 100%; }
}

/* The open date question, on the events page. Loud enough to be the reason
   somebody opened the page, quiet enough not to outrank the gathering that
   already has a date. */
.datepoll-callout {
  display: block; margin: 0 0 20px; padding: 16px 18px;
  background: var(--brand-soft); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.datepoll-callout:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); text-decoration: none; }
.datepoll-callout-head {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}
.datepoll-callout-title {
  display: block; margin-top: 3px;
  font-family: var(--font-head); font-size: 1.2rem; font-weight: 700;
}
.datepoll-callout-sub { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-soft); }

/* --- files in chat -------------------------------------------------------- */
/* Asked for at Orlando: somewhere to put the policy the room had just been
   told about. An image shows itself, because a screenshot you have to
   download to look at is a screenshot nobody looks at. */
.chat-clip {
  align-self: end;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 44px; flex-shrink: 0;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chat-clip:hover { background: #fff; color: var(--accent); border-color: var(--accent); }
.chat-clip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-dock .chat-clip { width: 38px; height: 40px; }

.chat-file-chip {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  max-width: 100%; padding: 5px 6px 5px 12px;
  background: var(--brand-soft); border: 1px solid var(--border-strong);
  border-radius: 999px; font-size: 13px; color: var(--ink);
}
/* Its display rule would otherwise beat [hidden] and leave an empty pill
   under the box whenever no file is attached. */
.chat-file-chip[hidden] { display: none; }
.chat-file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-chip-x {
  flex-shrink: 0; width: 20px; height: 20px; line-height: 1;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--muted); font-size: 16px;
}
.chat-file-chip-x:hover { background: #fff; color: var(--accent); }

/* A document: an icon, "Open attachment" and an arrow, in a small pill, so it
   reads as a file that is here rather than a button to attach one. The full
   name is the tooltip. */
.chat-attach {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; max-width: 100%; padding: 0 12px 0 10px; flex-shrink: 0; align-self: flex-start;
  background: var(--brand-soft); border: 1px solid var(--border-strong);
  border-radius: 999px; color: var(--ink); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.chat-row-break { flex-basis: 100%; height: 0; }
.chat-attach:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chat-attach:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-attach svg { flex-shrink: 0; }
.chat-attach-open { font-size: 13px; color: var(--accent); }
.chat-attach-name { display: none; }
/* Tapped once on a phone: the label gives way to the full file name. */
.chat-attach.is-open .chat-attach-ext { display: none; }
.chat-attach.is-open .chat-attach-name { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.chat-attach--image { display: block; flex-basis: 100%; width: auto; height: auto; margin-top: 4px; padding: 0; overflow: hidden; border-radius: var(--radius); background: none; border: 0; }
.chat-attach--image img { display: block; max-width: min(320px, 100%); height: auto; }


/* --- where we are in the day --------------------------------------------- */
/* Asked for on the last morning of Orlando. Somebody opening the agenda
   during the gathering wants to know what is on now. */
.agenda-day--today { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.agenda-today-flag,
.agenda-now-flag {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  background: var(--accent); color: #fbfaf6;
  border-radius: 999px;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: middle;
}
.agenda-now-flag { margin: 0 8px 0 0; }
.agenda-row--now > td { background: var(--brand-soft); }
.agenda-row--now .agenda-time { font-weight: 700; color: var(--accent); }
/* Done is quieter, not gone: people still scan back over what has happened. */
.agenda-row--done > td { opacity: .55; }

/* --- the documents library ------------------------------------------------ */
/* Three sources in one list: uploaded here, attached to a gathering, or
   posted in chat. Each row says which, because where a file came from is
   most of what tells you whether it is the one you want. */
.doc-library { list-style: none; margin: 0; padding: 0; }
.doc-row { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; }
.doc-row + .doc-row { border-top: 1px solid var(--border); }
.doc-row-name { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); }
.doc-row-name:hover { color: var(--accent); text-decoration: none; }
.doc-row-meta { font-size: 12.5px; }
.doc-row-note { font-size: 13px; }

/* --- meeting notes -------------------------------------------------------- */
/* They were one undifferentiated column of prose, which is a set of notes
   nobody skims, which is a set of notes nobody reads. The shape was already
   in the text; this gives it to the eye. */
.notes { line-height: 1.65; }
.notes .notes-heading {
  margin: 1.8rem 0 .5rem;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.notes .notes-heading:first-child { margin-top: 0; }
.notes p { margin: 0 0 .85rem; max-width: 68ch; }
.notes .notes-list { margin: 0 0 1rem; padding-left: 1.1rem; max-width: 68ch; }
.notes .notes-list li { margin: .3rem 0; padding-left: .2rem; }
.notes ol.notes-list { list-style: decimal; }

/* --- big rocks, by theme -------------------------------------------------- */
/* Themes rather than people. The heading is the thing being scanned, so it
   carries the weight the name used to. */
.theme-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.theme-card {
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.theme-name {
  margin: 0 0 10px;
  font-family: var(--font-head); font-size: 1.12rem; font-weight: 700;
  color: var(--ink); line-height: 1.25;
}
.theme-rocks { margin: 0; padding-left: 18px; }
.theme-rocks li { margin: 7px 0; font-size: 14px; line-height: 1.55; }
@media (max-width: 640px) {
  .theme-grid { grid-template-columns: 1fr; }
}

/* --- what came out of a gathering ---------------------------------------- */
/* Above the agenda, deliberately. Once a gathering is over the timetable is
   a record of where people stood in a corridor, and the findings are the
   reason anybody opens the page. */
.card--findings { border-left: 3px solid var(--accent); }
.finding-themes {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 6px 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.finding-themes li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0;
}
.finding-themes li + li { border-top: 1px solid var(--border); }
.finding-themes a { font-weight: 600; color: var(--ink); }
.finding-themes a:hover { color: var(--accent); }
.finding-themes span { font-variant-numeric: tabular-nums; font-size: 13px; }

/* --- the file library ----------------------------------------------------- */
/* Adding is the rarer act, so it is a button that opens the form rather than
   the form itself standing between people and what they came to find. */
.add-file { position: relative; }
.add-file > summary { list-style: none; cursor: pointer; }
.add-file > summary::-webkit-details-marker { display: none; }
.add-file[open] > summary { background: var(--accent-dark); }
.add-file-form {
  margin-top: 10px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-hover);
}
@media (min-width: 720px) {
  /* Floated over the page rather than pushing the library down it. */
  .add-file-form { position: absolute; right: 0; z-index: 20; width: 420px; }
}

.file-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.file-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
}
.file-filter:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.file-filter span { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.file-filter.is-on { background: var(--accent); border-color: var(--accent); color: #fbfaf6; }
.file-filter.is-on span { color: #fbfaf6; }

.file-period {
  margin: 0 0 4px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}

/* --- replies -------------------------------------------------------------- */
/* The quote of what a reply answers: a quiet block above the reply's text,
   with a solid bar on its left, and a button that goes to the original. */
.chat-reply-quote {
  flex-basis: 100%; display: flex; gap: 6px; align-items: baseline; min-width: 0;
  margin: 2px 0 2px; padding: 4px 10px; text-align: left;
  background: var(--brand-soft); border: 0; border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer;
}
.chat-reply-quote:hover { border-left-color: var(--accent); }
.chat-reply-quote:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-reply-who { font-weight: 600; color: var(--ink); flex-shrink: 0; }
.chat-reply-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Replies, underneath the message they answer: indented, behind a solid
   rule, so the original reads as the one entry for the conversation. */
.chat-replies { list-style: none; margin: 6px 0 2px 4px; padding: 0 0 0 16px; border-left: 2px solid var(--border-strong); }
.chat-replies .chat-msg-meta { margin-top: 8px; }
.chat-replies .chat-msg:first-child .chat-msg-meta { margin-top: 2px; }
/* The original, briefly lit when a quote is pressed. */
@keyframes chat-flash { from { background: var(--brand-soft); } to { background: transparent; } }
.chat-msg.is-flash { animation: chat-flash 1.6s ease-out; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .chat-msg.is-flash { animation: none; outline: 2px solid var(--accent); } }
/* "Replying to ..." above the box while an answer is being written. */
.chat-replying {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 4px 6px 4px 12px; background: var(--brand-soft);
  border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px;
}
.chat-replying[hidden] { display: none; }
.chat-replying-lead { font-weight: 600; color: var(--ink); flex-shrink: 0; }
.chat-replying-text { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }

/* --- a headline on a message ---------------------------------------------- */
/* Optional, and quiet when absent. The point is scanning a channel and
   seeing what a long post is about without reading it. */
.chat-msg-title[hidden] { display: none; }
/* Leading the message, so it takes the gap above that the author line
   otherwise has, and the author line tucks up under it. */
.chat-msg--titled .chat-msg-title { margin-top: 15px; }
.chat-msg--titled .chat-msg-meta { margin-top: 1px; }
.chat-msg-title {
  display: block; flex-basis: 100%;
  font-family: var(--font-head); font-size: 17px; font-weight: 700;
  color: var(--ink); line-height: 1.3; margin-bottom: 2px;
}
.chat-title-input {
  grid-column: 1 / -1;
  width: 100%; padding: 8px 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
  font-family: var(--font-head); font-size: 14.5px; font-weight: 600;
}
.chat-title-input::placeholder { font-family: var(--font-body); font-weight: 500; color: var(--muted); }
.chat-title-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(110,42,46,.15); }

/* ---------------------------------------------------------------------------
   The guided tour (static/js/tour.js)
   A lit rectangle over the real control, the rest of the page dimmed around
   it, and a card beside it saying what it is.
   --------------------------------------------------------------------------- */
.tour-shade { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.tour-shade--dim { background: rgba(16, 23, 31, .55); }
.tour-light {
  position: fixed; z-index: 1001; pointer-events: none;
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(16, 23, 31, .55);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.tour-card {
  position: fixed; z-index: 1002; width: min(360px, calc(100vw - 24px));
  padding: 18px 20px 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
}
.tour-card--centre { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour-shade[hidden], .tour-light[hidden], .tour-card[hidden] { display: none; }
.tour-count { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tour-title { margin: 0 0 6px; font-family: var(--font-head); font-size: 20px; line-height: 1.25; text-wrap: balance; padding-right: 24px; }
.tour-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.tour-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tour-actions [hidden] { display: none; }
.tour-x {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: none; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.tour-x:hover { background: var(--brand-soft); color: var(--ink); }
.tour-x:focus-visible, .tour-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tour-light { transition: none; } }

/* Files, grouped by who shared them: the person's name leads each box, with
   their organization and a count beside it. */
.file-person-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.file-person-name { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.file-person-org { font-size: 13px; color: var(--accent); font-weight: 600; text-transform: none; letter-spacing: 0; }
.file-person-count { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* "Coming soon: the CTL app", above the footer line. */
.app-teaser { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 6px 14px 6px 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--ink); }
.app-teaser-icon { display: block; width: 28px; height: 28px; border-radius: 8px; }
.app-teaser-flag { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.app-teaser-text { font-family: var(--font-head); font-size: 15px; font-weight: 700; }

/* "Add to your phone or computer" (static/js/install.js). */
.install-dialog {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  padding: 22px 24px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-hover);
}
.install-dialog::backdrop { background: rgba(16, 23, 31, .5); }
.install-head { display: flex; align-items: center; gap: 12px; margin: 0 28px 12px 0; }
.install-head img { border-radius: 11px; flex-shrink: 0; }
.install-head h2 { margin: 0; font-family: var(--font-head); font-size: 20px; line-height: 1.25; text-wrap: balance; }
.install-dialog p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.install-for { margin: 14px 0 6px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) !important; }
.install-steps { margin: 0 0 6px; padding-left: 22px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; }
.install-glyph { vertical-align: -3px; color: var(--accent); }
.install-go { width: 100%; justify-content: center; margin: 4px 0 8px; }
.install-others { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; font-size: 14px; }
.install-others summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.install-done { color: var(--ink) !important; }
.install-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 21px; line-height: 1; cursor: pointer; }
.install-x:hover { background: var(--brand-soft); color: var(--ink); }