/* =====================================================================
   agenda.css — page-scoped styles for the public Agenda & Calendar.
   Theme: "The Open Table" — a calm community bulletin board at dawn.
   Navy structure, teal secondary, warm paper. Coral is reserved for the
   single primary CTA only. Category color comes from content/agenda.json
   (rendered as dots + tinted chips), never as the sole signal for status.
   Reuses the site.css design tokens exclusively — no new color literals
   except a small set of accessible status tints noted inline.
   ===================================================================== */

/* ---- Layout shell --------------------------------------------------- */
/* The calendar section sits directly under the hero; drop its top padding so
   the "See how each member has voted" link isn't marooned above a wide gap. */
.section--flush-top { padding-top: 0; }

.agenda-app { display: grid; gap: var(--sp-7); }
.agenda-app[hidden] { display: none; }

/* Toolbar row: legend + filters share a calm, carded band. */
.agenda-toolbar {
  display: grid;
  gap: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-5);
}
.agenda-toolbar[hidden] { display: none; }

.toolbar-block { display: grid; gap: var(--sp-3); }
.toolbar-label {
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---- Legend --------------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.legend__item {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--step--1); color: var(--ink-soft); font-weight: 600;
}
.legend__dot {
  width: 0.7rem; height: 0.7rem; border-radius: var(--r-pill);
  flex: none; box-shadow: 0 0 0 1px rgba(27,42,68,.08);
}

/* ---- Filter pills --------------------------------------------------- */
.filter-set { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 0.45em;
  min-height: 2.6rem; padding: 0.4rem 0.9rem;
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600;
  color: var(--ink-soft); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.filter-pill:hover { border-color: var(--line-cool); background: var(--sand); }
.filter-pill[aria-pressed="true"] {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.filter-pill[aria-pressed="true"]:hover { background: var(--navy-soft); }
.filter-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.filter-pill__dot {
  width: 0.6rem; height: 0.6rem; border-radius: var(--r-pill); flex: none;
  box-shadow: 0 0 0 1px rgba(27,42,68,.10);
}

/* ---- Status badge (text + icon — never color alone) ----------------- */
.status-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--step--1); font-weight: 700; line-height: 1;
  padding: 0.28rem 0.62rem; border-radius: var(--r-pill);
  white-space: nowrap;
}
.status-badge svg { flex: none; }
/* Accessible tints (all ≥ 4.5:1 text on their own background):            */
.status-badge--approved  { color: #1C6742; background: #E3F1E8; }  /* pine on pale green  */
.status-badge--tentative { color: var(--teal-deep); background: var(--mist); }
.status-badge--cancelled { color: var(--coral-deeper); background: #F9E6DF; }

/* ---- Month calendar ------------------------------------------------- */
.cal {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-5);
}
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.cal__title {
  font-family: var(--font-serif); font-weight: 600; color: var(--navy);
  font-size: var(--step-2); margin: 0;
}
.cal__nav { display: flex; align-items: center; gap: 0.4rem; }
.cal__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); color: var(--navy); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.cal__btn:hover { background: var(--sand); border-color: var(--line-cool); }
.cal__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cal__btn svg { flex: none; }
.cal__today {
  min-height: 2.75rem; padding: 0 0.95rem;
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 700;
  color: var(--teal-deep); background: var(--white);
  border: 1px solid var(--line-cool); border-radius: var(--r-pill); cursor: pointer;
  transition: background .15s var(--ease);
}
.cal__today:hover { background: var(--mist); }
.cal__today:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.cal__grid { display: grid; }
.cal__row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal__row + .cal__row { margin-top: 4px; }
.cal__weekday {
  text-align: center; padding: var(--sp-2) 0;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cal__cell { position: relative; }
.cal__day {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0.28rem; width: 100%; min-height: 2.9rem;
  padding: 0.4rem 0.2rem 0.35rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--step--1);
  cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease);
}
@media (min-width: 40rem) { .cal__day { min-height: 4.6rem; padding-top: 0.55rem; } }
.cal__day:hover { background: var(--sand); }
.cal__day--has { background: var(--mist); }
.cal__day--has:hover { background: #DFEBEE; }
.cal__day--out { color: var(--ink-faint); opacity: 0.45; }
.cal__day--today { box-shadow: inset 0 0 0 2px var(--coral); }
.cal__day[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 2px var(--navy); }
.cal__day[aria-pressed="true"] .cal__day-num { color: #fff; }
.cal__day:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cal__day-num { line-height: 1; }
.cal__dots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; min-height: 0.4rem; }
.cal__dot {
  width: 0.4rem; height: 0.4rem; border-radius: var(--r-pill); flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}
.cal__day[aria-pressed="true"] .cal__dot { box-shadow: 0 0 0 1px rgba(31,58,96,.6); }

/* ---- Upcoming list -------------------------------------------------- */
/* Breathing room between the calendar and the list heading
   ("Events on <date>" / "Upcoming"). */
[data-agenda-list] { margin-top: var(--sp-7); }
.agenda-list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.agenda-list-head h2 { margin: 0; }
.agenda-daynote { font-size: var(--step--1); color: var(--ink-soft); }
.agenda-daynote button {
  border: 0; background: none; color: var(--teal-deep); font-weight: 700;
  cursor: pointer; padding: 0.2rem 0.3rem; border-radius: var(--r-sm); font: inherit;
}
.agenda-daynote button:hover { color: var(--coral-deeper); text-decoration: underline; }
.agenda-daynote button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.agenda-list { display: grid; gap: var(--sp-5); }

.event-card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-5);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: var(--sp-5); transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.event-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--line-cool); }
.event-card--featured { border-top: 4px solid var(--coral); }
.event-card--cancelled { opacity: 0.78; }

.date-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 4.75rem; min-height: 4.75rem; padding: 0.5rem;
  background: var(--mist); border-radius: var(--r-md); color: var(--navy); text-align: center;
}
.date-block__mon {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal-deep);
}
.date-block__day { font-family: var(--font-serif); font-size: var(--step-3); line-height: 1; }
.date-block__year { font-size: 0.68rem; color: var(--ink-faint); font-weight: 600; }
.date-block--allday .date-block__day { font-size: var(--step-1); }

.event-card__body { display: grid; gap: var(--sp-2); min-width: 0; }
.event-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: var(--sp-1); }
.event-card__title { font-size: var(--step-1); color: var(--navy); margin: 0; }
.event-card__when { font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; }
.event-card__summary { color: var(--ink-soft); margin: 0; }
.event-card__link { align-self: start; margin-top: var(--sp-1); }

/* Category chip — tinted from the JSON category color via color-mix so the
   background is always a pale wash and the text stays ink (AA on any tint).
   The colored dot carries the hue; text never relies on color alone. */
.cat-chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--step--1); font-weight: 700; line-height: 1;
  padding: 0.28rem 0.62rem; border-radius: var(--r-pill);
  color: var(--ink); background: var(--mist); border: 1px solid var(--line-cool);
}
.cat-chip__dot {
  width: 0.6rem; height: 0.6rem; border-radius: var(--r-pill); flex: none;
  box-shadow: 0 0 0 1px rgba(27,42,68,.12);
}

/* ---- No-JS / SEO fallback list -------------------------------------- */
.agenda-fallback { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.agenda-fallback li {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1);
  display: grid; gap: var(--sp-2);
}
.agenda-fallback time { font-size: var(--step--1); color: var(--ink-faint); font-weight: 600; }
.agenda-fallback h3 { font-size: var(--step-1); margin: 0; }
.agenda-fallback p { margin: 0; color: var(--ink-soft); }

.agenda-empty {
  text-align: center; padding: var(--sp-7) var(--sp-5);
  background: var(--white); border: 1px dashed var(--line-cool);
  border-radius: var(--r-lg); color: var(--ink-soft);
}

/* ===================================================================== */
/* DETAIL PAGE                                                             */
/* ===================================================================== */
.detail-back {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 700; color: var(--teal-deep); text-decoration: none;
  margin-bottom: var(--sp-5);
}
.detail-back:hover { color: var(--coral-deeper); }
.detail-back svg { flex: none; }

.detail-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.detail-head__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.detail-head h1 { margin: 0; }
.detail-statusnote { font-size: var(--step--1); color: var(--ink-soft); font-style: italic; }

.detail-meta {
  display: grid; gap: var(--sp-3);
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: var(--r-md);
  padding: var(--sp-5); box-shadow: var(--sh-1); margin-bottom: var(--sp-6);
}
.meta-row { display: flex; gap: 0.6em; align-items: flex-start; color: var(--ink); }
.meta-row svg { flex: none; color: var(--teal-deep); margin-top: 0.15em; }
.meta-row a { font-weight: 600; }

.detail-body { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.detail-body p { margin: 0; }

.detail-section { margin-bottom: var(--sp-6); }
.detail-section h2 { font-size: var(--step-2); margin: 0 0 var(--sp-4); }

.agenda-items {
  list-style: upper-alpha; padding-left: 1.6em; display: grid; gap: var(--sp-3);
  counter-reset: none;
}
.agenda-items li { padding-left: 0.3em; color: var(--ink); }
.agenda-items li::marker { color: var(--teal-deep); font-weight: 700; }

.doc-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.doc-link {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 700; color: var(--teal-deep); text-decoration: none;
}
.doc-link:hover { text-decoration: underline; color: var(--coral-deeper); }
.doc-link svg { flex: none; }

.detail-contact {
  background: var(--mist); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); color: var(--ink-soft); margin-bottom: var(--sp-6);
}
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ===================================================================== */
/* VOTES & RESOLUTIONS (detail page)                                      */
/* ===================================================================== */
.detail-section h2 svg { vertical-align: -3px; margin-right: 0.35em; color: var(--teal-deep); }

.res-list { display: grid; gap: var(--sp-5); }
.res-card {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: var(--sp-5); display: grid; gap: var(--sp-2);
}
.res-card--failed    { border-left-color: var(--coral); }
.res-card--tabled    { border-left-color: #B5701F; }
.res-card--withdrawn { border-left-color: var(--ink-faint); }
.res-card__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem var(--sp-4);
}
.res-card__title { font-size: var(--step-1); color: var(--navy); margin: 0; }
.res-card__tally { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.res-card__byline { font-size: var(--step--1); color: var(--ink-soft); margin: 0; display: flex; flex-wrap: wrap; gap: 0.35em 0.6em; }
.res-card__sep { color: var(--line-cool); }
.res-card__notes { font-size: var(--step--1); color: var(--ink-soft); font-style: italic; margin: 0; }
.res-list__foot { margin-top: var(--sp-4); }

/* A resolution nested directly under its agenda item (sub-list). */
.agenda-item-votes { margin: var(--sp-3) 0 var(--sp-2); }
.agenda-items li .res-card--inline { box-shadow: none; background: var(--sand); }
.res-card--inline .res-card__title { font-size: var(--step-0); }

/* Result badge (text + icon, never color alone) */
.result-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--step--1); font-weight: 700; line-height: 1;
  padding: 0.28rem 0.62rem; border-radius: var(--r-pill); white-space: nowrap;
}
.result-badge svg { flex: none; }
.result-badge--passed    { color: #1C6742; background: #E3F1E8; }
.result-badge--failed    { color: var(--coral-deeper); background: #F9E6DF; }
.result-badge--tabled    { color: #8A5A1F; background: #F4E7CF; }
.result-badge--withdrawn { color: var(--ink-soft); background: var(--sand); }

/* Per-member roll call */
.vote-roll { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.vote-roll__head {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--sand); padding: 0.45rem 0.75rem;
}
.vote-roll__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 0.5rem 0.75rem; border-top: 1px solid var(--line);
}
.vote-roll__name { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ink); font-weight: 600; min-width: 0; }
.vote-roll__name svg { flex: none; color: var(--ink-faint); }

/* Vote badge */
.vote-badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: var(--step--1); font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 0.24rem 0.55rem; border-radius: var(--r-pill);
}
.vote-badge svg { flex: none; }
.vote-badge--yea     { color: #1C6742; background: #E3F1E8; }
.vote-badge--nay     { color: var(--coral-deeper); background: #F9E6DF; }
.vote-badge--abstain { color: var(--teal-deep); background: var(--mist); }
.vote-badge--recused { color: #8A5A1F; background: #F4E7CF; }
.vote-badge--absent  { color: var(--ink-soft); background: var(--sand); }

/* ===================================================================== */
/* VOTING-RECORD PAGE                                                      */
/* ===================================================================== */
.vr-head h1 { margin: 0 0 var(--sp-3); }
.vr-intro { margin-bottom: var(--sp-5); }
.vr-empty { margin-bottom: var(--sp-6); }

.vr-search { margin-bottom: var(--sp-5); }
.vr-search__input {
  width: 100%; font: inherit; padding: 0.7rem 0.95rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); color: var(--ink);
}
.vr-search__input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--teal); }

.vr-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.vr-card {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--sp-4) var(--sp-5); text-decoration: none; color: inherit;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.vr-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--line-cool); }
.vr-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vr-card__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: var(--r-pill); overflow: hidden;
  background: var(--mist); color: var(--teal-deep); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em;
}
.vr-card__avatar img, .vr-member-head__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vr-card__avatar--photo, .vr-member-head__avatar--photo { background: var(--line); }
.vr-card__body { display: grid; gap: 0.15rem; min-width: 0; flex: 1; }
.vr-card__name { font-weight: 700; color: var(--navy); }
.vr-card__role { font-size: var(--step--1); color: var(--ink-faint); }
.vr-card__line { font-size: var(--step--1); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; margin-top: 0.15rem; }
.vr-card__count { font-weight: 700; color: var(--teal-deep); }
.vr-card__count--none { color: var(--ink-faint); font-weight: 600; }
.vr-card__bd { color: var(--ink-soft); }
.vr-card__arrow { color: var(--teal-deep); flex: none; font-weight: 700; }

/* Single-member view */
.vr-member-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.vr-member-head__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 3.4rem; height: 3.4rem; border-radius: var(--r-pill); overflow: hidden;
  background: var(--mist); color: var(--teal-deep); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em;
}
.vr-member-head h1 { margin: 0; }
.vr-member-head__role { margin: 0.1rem 0 0; color: var(--ink-faint); font-weight: 600; }

.vr-tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, 1fr); margin-bottom: var(--sp-6); }
@media (min-width: 40rem) { .vr-tiles { grid-template-columns: repeat(6, 1fr); } }
.vr-tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: var(--sp-4) var(--sp-3); text-align: center; display: grid; gap: 0.2rem;
}
.vr-tile__n { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1; color: var(--navy); }
.vr-tile__l { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); }
.vr-tile--total { border-color: var(--line-cool); background: var(--mist); }
.vr-tile--yea .vr-tile__n     { color: #1C6742; }
.vr-tile--nay .vr-tile__n     { color: var(--coral-deeper); }
.vr-tile--abstain .vr-tile__n { color: var(--teal-deep); }
.vr-tile--recused .vr-tile__n { color: #8A5A1F; }
.vr-tile--absent .vr-tile__n  { color: var(--ink-faint); }

.vr-record { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.vr-record__item {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-5);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--sp-5);
}
.vr-record__main { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 16rem; }
.vr-record__meeting { font-weight: 700; color: var(--teal-deep); text-decoration: none; }
.vr-record__meeting:hover { color: var(--coral-deeper); text-decoration: underline; }
.vr-record__date { font-size: var(--step--1); color: var(--ink-faint); font-weight: 600; }
.vr-record__res { color: var(--ink); margin-top: 0.15rem; }
.vr-record__side { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Reduced-motion: neutralize the lift/slide transitions. */
@media (prefers-reduced-motion: reduce) {
  .event-card, .filter-pill, .cal__btn, .cal__day, .cal__today, .vr-card { transition: none; }
  .event-card:hover, .vr-card:hover { transform: none; }
}