/* ══════════════════════ members' board — /collab/ only ══════════════════════
   Loaded through `css: ["css/collab.css"]` in content/collab.md, after main.css,
   on this one page. Everything sits on the tokens main.css defines; the shared
   form vocabulary (.form, .field, .opt, .chip) comes from there too. */

.collab { position: relative; }
/* several things below are display: flex, which would win over the browser's
   own [hidden] rule and un-hide them; this restores what `hidden` means */
.collab [hidden] { display: none !important; }
.collab h1 { scroll-margin-top: 6rem; }
/* headings receive focus after a screen change so assistive tech announces
   it; the visual cue is the new screen itself */
.collab h1:focus { outline: none; }

/* a thin bar along the top while any request is in flight */
.collab.is-busy::before {
  content: ""; position: fixed; top: 0; left: 0; z-index: 70;
  height: 2px; width: 30vw; background: var(--color-blue);
  animation: collab-slide 1.1s var(--ease) infinite;
}
@keyframes collab-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(340%); }
}

/* ══════════════════════ the board's own bar ══════════════════════ */
.collab__bar {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  margin-bottom: var(--space-lg);
}
.collab__bar nav { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.collab__bar nav a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.8rem; border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.collab__bar nav a:hover { background: var(--color-paper-2); }
.collab__bar nav a[aria-current=page] { background: var(--color-blue-soft); color: var(--color-blue); }
.collab__me {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none;
}
.collab__me:hover, .collab__me[aria-current=page] { color: var(--color-blue); }
.collab__badge {
  font-family: var(--font-label); font-size: var(--text-xs); line-height: 1.5;
  padding: 0 0.45rem; border-radius: var(--radius-pill);
  background: var(--color-blue); color: var(--color-accent-ink);
}
@media (max-width: 36rem) { .collab__me-name { display: none; } }

/* ══════════════════════ messages ══════════════════════ */
.collab__alert {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: 0.75rem 1rem; margin-bottom: var(--space-md);
  border-radius: 14px; background: var(--color-amber-soft);
  color: oklch(48% 0.13 40); font-size: var(--text-sm);
}
.collab__alert span { flex: 1; }
.collab__alert button {
  border: 0; background: none; cursor: pointer; padding: 0 0.25rem;
  font-size: 1.15rem; line-height: 1; color: inherit;
}
.collab__status { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); }
.collab__status:empty { display: none; }

/* ══════════════════════ screens ══════════════════════ */
.collab__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md);
}
.collab__head h1 { font-size: var(--text-display-s); }
.collab__head .collab__actions { margin-top: 0; align-items: center; }
.collab__signin { margin-top: var(--space-lg); }
.collab__form { margin-top: 0; }
.collab .page__head p button { margin-left: 0.35rem; vertical-align: middle; }

/* filters: pills, a select and a search box on one wrapping line */
.collab__filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.collab__filters .opts { flex: 0 1 auto; }
.collab__filters select { display: inline-block; width: auto; flex: 0 1 auto; }
.collab__filters input[type=search] { display: inline-block; width: auto; flex: 1 1 14rem; }

/* ══════════════════════ people ══════════════════════ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; vertical-align: middle;
  background: var(--color-paper-2); border: 1px solid var(--color-paper-3);
}
.avatar--sm { width: 22px; height: 22px; }
.avatar--fallback {
  font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.02em;
  color: var(--color-ink-2); background: var(--color-cyan-soft);
}

/* ══════════════════════ the list ══════════════════════ */
.plist { display: grid; gap: var(--space-sm); }
.pcard {
  padding: var(--space-md); border-radius: var(--radius-card);
  background: var(--color-paper-2); border: var(--rule-hair) solid transparent;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.pcard:hover { border-color: var(--color-rule-2); box-shadow: var(--shadow-soft); }
.pcard__top { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-bottom: var(--space-xs); }
.pcard__tag, .pcard__state {
  font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill);
}
.pcard__tag { border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); }
.pcard__num { font-family: var(--font-label); font-size: var(--text-xs); color: var(--color-muted); align-self: center; letter-spacing: 0.04em; }
.pcard__state.is-open { background: var(--color-blue-soft); color: var(--color-blue); }
.pcard__state.is-progress { background: var(--color-cyan-soft); color: var(--color-ink-2); }
.pcard__state.is-closed { background: var(--color-paper-3); color: var(--color-muted); }
.pcard__title { font-size: var(--text-lg); overflow-wrap: anywhere; }
.pcard__title a { text-decoration: none; }
.pcard__title a:hover { color: var(--color-blue); }
.pcard__by, .pcard__goal {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
  margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2);
}
.pcard__goal .label { font-size: 0.65rem; }
.pcard__stats { margin-top: var(--space-xs); font-family: var(--font-label); font-size: var(--text-xs); color: var(--color-muted); }
.collab__more { padding: var(--space-sm); text-align: center; font-size: var(--text-sm); }

/* ══════════════════════ one proposal ══════════════════════ */
.pdetail__by {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.pdetail__sec { margin-top: var(--space-xl); }
.pdetail__sec h2 {
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted);
  padding-bottom: var(--space-xs); margin-bottom: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.collab__text { max-width: var(--measure); color: var(--color-ink-2); overflow-wrap: anywhere; }
.collab__text p + p { margin-top: var(--space-sm); }
.collab__text a {
  color: var(--color-blue); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--color-blue) 32%, transparent);
}
.collab__text a:hover { border-bottom-color: var(--color-blue); }
.collab__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-md); }

/* roles */
.roles { display: grid; gap: var(--space-xs); }
.role {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0.75rem 1rem; border-radius: 14px;
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule);
}
.role__body { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.role__title { color: var(--color-ink); }
.role__desc { font-size: var(--text-sm); color: var(--color-ink-2); overflow-wrap: anywhere; }
.role__who { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); white-space: nowrap; }
.role__act { flex: 0 0 auto; }
@media (max-width: 36rem) {
  .role { flex-wrap: wrap; }
  .role__act { width: 100%; }
}

/* interest */
.interest__row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; font-size: var(--text-sm); }
.interest__list { display: grid; gap: 0.3rem; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.interest__list a { color: var(--color-blue); text-decoration: none; }
.interest__list a:hover { text-decoration: underline; }

/* comments */
.comments { display: grid; gap: var(--space-md); }
.comment { padding: var(--space-sm) var(--space-md); border-radius: 14px; background: var(--color-paper-2); }
.comment__head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: var(--space-2xs); font-size: var(--text-sm); }
.comment__x {
  margin-left: auto; border: 0; background: none; cursor: pointer; padding: 0 0.25rem;
  font-size: 1.15rem; line-height: 1; color: var(--color-muted);
}
.comment__x:hover { color: var(--color-ink); }
.comment__body { font-size: var(--text-base); }
.comment__form textarea { margin-bottom: var(--space-xs); }
.comment__form .form__submit { margin-top: 0; }

/* ══════════════════════ the proposal form's role rows ══════════════════════ */
.rolerows { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-xs); }
.rolerow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: var(--space-2xs); align-items: center;
}
.rolerow__who { font-size: var(--text-xs); white-space: nowrap; padding-inline: 0.4rem; }
.rolerow__x {
  border: 0; background: none; cursor: pointer; padding: 0 0.4rem;
  font-size: 1.15rem; line-height: 1; color: var(--color-muted);
}
.rolerow__x:hover { color: var(--color-ink); }
@media (max-width: 36rem) {
  .rolerow { grid-template-columns: minmax(0, 1fr) auto; }
  .rolerow input[name=role_desc] { grid-row: 2; grid-column: 1 / -1; }
  .rolerow__x { grid-row: 1; grid-column: 2; }
  /* "taken by …" is too long to share a line with the title on a phone */
  .rolerow__who { grid-row: 3; grid-column: 1 / -1; white-space: normal; }
  .rolerow.is-claimed input[name=role_title] { grid-column: 1 / -1; }
}

/* ══════════════════════ members (admin) ══════════════════════ */
.tabs { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-bottom: var(--space-md); }
.tabs a[aria-current=page] { border-color: var(--color-blue); background: var(--color-blue-soft); }
.urows { display: grid; gap: var(--space-xs); }
.urow {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0.75rem 1rem; border-radius: 14px;
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule);
}
.urow__body { flex: 1 1 12rem; min-width: 0; }
.urow__name { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.urow__login { font-family: var(--font-label); font-size: var(--text-xs); color: var(--color-muted); }
.urow__meta { font-size: var(--text-sm); color: var(--color-ink-2); overflow-wrap: anywhere; }
.urow__meta a { color: var(--color-blue); text-decoration: none; }
.urow__meta a:hover { text-decoration: underline; }
.urow__act { display: flex; gap: var(--space-2xs); flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 36rem) {
  .urow { flex-wrap: wrap; }
  .urow__act { width: 100%; }
}

/* ══════════════════════ chip variants ══════════════════════ */
.chip--sm { padding: 0.4rem 0.85rem; font-size: var(--text-xs); }
.chip--quiet { border-color: var(--color-rule); color: var(--color-muted); }
.chip--quiet:hover { border-color: var(--color-rule-2); background: var(--color-paper-2); color: var(--color-ink); }
.chip[aria-pressed=true] { border-color: transparent; background: var(--color-blue); color: var(--color-accent-ink); }