/* Greystone at Boynton Beach -- Fitness Center Survey
   Palette is drawn from the community itself: limestone paving, deep pool
   water, and the brass of the entry gate hardware. */

:root {
  --paper:      #E7E9E2;
  --card:       #FCFCF9;
  --ink:        #1A1F1D;
  --ink-soft:   #5B635F;
  --ink-faint:  #8A918C;
  --teal:       #0C5350;
  --teal-deep:  #08403D;
  --brass:      #A5762A;
  --rule:       #CDD0C6;
  --rule-soft:  #DEE0D8;
  --alert:      #963226;

  /* Answer colours. Deep teal and warm clay differ in hue and in lightness, so
     they stay distinguishable in greyscale, on a projector, and to anyone with
     red-green colour blindness. Neither reads as approval or disapproval, which
     matters on a question about raising dues. */
  --yes:        #0C5350;
  --no:         #CE9A5C;
  --na:         #A9AFA6;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --w: 44px;   /* numeral rail width */
}

* { box-sizing: border-box; }

/* The hidden attribute is how every screen in this app is shown and hidden, so
   it has to beat the layout rules below. The browser implements it as
   [hidden] { display: none }, a single attribute selector, which any class rule
   such as .shell { display: grid } overrides. Without this, a signed-out
   visitor sees the dashboard frame before the session check has even run. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Type ---------- */

.display {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2rem, 5.2vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 0.5rem;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.9rem;
}

.lede {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 1.4rem;
}

.muted { color: var(--ink-soft); }
.small { font-size: 0.87rem; }

/* ---------- Shell ---------- */

.progress-rail {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rule-soft);
  z-index: 10;
}
.progress-rail span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--teal);
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.15rem, 4vw, 2rem) 3rem;
}

.panel.center {
  text-align: center;
  padding: 3rem 0;
}
.panel.center .lede { margin-inline: auto; }

.masthead { margin-bottom: 3rem; }

.address-chip {
  display: inline-block;
  margin: 0;
  padding: 0.55rem 0.95rem;
  background: var(--card);
  border-left: 3px solid var(--brass);
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.address-chip strong { color: var(--ink); font-weight: 600; }

/* ---------- Question spine (the signature element) ---------- */

.questions {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.questions::before {
  content: "";
  position: absolute;
  left: calc(var(--w) / 2 - 1px);
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--rule);
}

.q {
  display: grid;
  grid-template-columns: var(--w) 1fr;
  gap: 0 1.35rem;
  padding: 0 0 2.6rem;
  position: relative;
}
.q:last-child { padding-bottom: 1.75rem; }

.q-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brass);
  text-align: center;
  padding: 0.35rem 0;
  background: var(--paper);
  align-self: start;
  position: relative;
  z-index: 1;
}
.q.is-answered .q-num { color: var(--teal); }

.q fieldset { border: 0; margin: 0; padding: 0; }

.q legend {
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink);
  padding: 0;
  margin-bottom: 0.9rem;
}

.q-note {
  margin: -0.55rem 0 0.9rem;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

/* Yes and No are given identical visual weight on purpose. A survey that
   makes one answer look like the expected answer is not worth running. */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  max-width: 21rem;
}

.choices label {
  position: relative;
  display: block;
  cursor: pointer;
}

.choices input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choices span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

.choices label:hover span { border-color: var(--teal); color: var(--ink); }

.choices input:checked + span {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.choices input:focus-visible + span {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

.q-conditional { animation: reveal 260ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Comments and submit ---------- */

.comment-block {
  margin: 0.5rem 0 2rem;
  padding-left: calc(var(--w) + 1.35rem);
}
.comment-block label {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 0.6rem;
}
.optional {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.comment-block textarea {
  width: 100%;
  padding: 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  resize: vertical;
}
.comment-block textarea:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 1px;
  border-color: var(--teal);
}

.submit-row {
  padding-left: calc(var(--w) + 1.35rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.btn-primary {
  font: inherit;
  font-weight: 600;
  font-size: 1.03rem;
  color: #fff;
  background: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 3px;
  padding: 0.95rem 2rem;
  min-height: 3.25rem;
  cursor: pointer;
  transition: background 130ms ease;
}
.btn-primary:hover { background: var(--teal-deep); }
.btn-primary:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.btn-primary[disabled] { opacity: 0.55; cursor: default; }

.form-error {
  margin: 0 0 1.25rem;
  padding: 0.8rem 1rem;
  margin-left: calc(var(--w) + 1.35rem);
  background: #F6EAE8;
  border-left: 3px solid var(--alert);
  color: var(--alert);
  font-size: 0.94rem;
  font-weight: 500;
}

.q.is-missing legend { color: var(--alert); }
.q.is-missing .choices span { border-color: var(--alert); }

.site-foot {
  border-top: 1px solid var(--rule);
  margin: 0 auto;
  max-width: 46rem;
  padding: 1.75rem clamp(1.15rem, 4vw, 2rem) 3rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.site-foot p { margin: 0 0 0.3rem; }

/* ---------- Board dashboard ---------- */

.board-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
}
.board-head .display { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 0.2rem; }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.btn-ghost {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  padding: 0.6rem 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-ghost:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

.rate {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.ring {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--teal) calc(var(--pct) * 1%), var(--rule-soft) 0);
}
.ring i {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--card);
  display: grid;
  place-items: center;
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
}
.rate-copy h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 0.3rem;
}
.rate-copy p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.result {
  padding: 0 0 2.2rem;
  display: grid;
  grid-template-columns: var(--w) 1fr;
  gap: 0 1.35rem;
}
.result h3 {
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0.3rem 0 0.9rem;
}
.result-scope {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 0.3rem;
}

.bar {
  display: grid;
  grid-template-columns: 3rem 1fr 5.5rem;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.bar b { font-weight: 600; }
.bar-track { background: var(--rule-soft); height: 1.6rem; border-radius: 2px; overflow: hidden; }
/* display:block is load-bearing. A span is inline by default, and width and
   height do not apply to inline boxes, so the fill rendered at zero size and
   the bars looked empty. */
.bar-fill {
  display: block;
  height: 100%;
  background: var(--yes);
  width: 0;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bar.no .bar-fill { background: var(--no); }
.bar-val { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bar-val strong { color: var(--ink); font-weight: 600; }

.readout {
  background: var(--card);
  border-left: 3px solid var(--brass);
  padding: 1.25rem 1.4rem;
  margin: 0 0 2.5rem;
}
.readout h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 0.75rem;
}
.readout ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }
.readout li { margin-bottom: 0.45rem; }
.readout strong { color: var(--ink); font-weight: 600; }

.comments-list {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}
.comments-list h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 1.2rem;
}
.comment {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  padding: 1rem 1.15rem;
  margin-bottom: 0.75rem;
  font-size: 0.97rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* ---------- Sign in ---------- */

.signin {
  max-width: 24rem;
  margin: clamp(3rem, 12vh, 7rem) auto;
  padding: 0 1.15rem;
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
.field input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
}
.field input:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; border-color: var(--teal); }
.signin .btn-primary { width: 100%; justify-content: center; }

@media (max-width: 32rem) {
  :root { --w: 34px; }
  body { font-size: 16px; }
  .q { gap: 0 0.9rem; }
  .q-num { font-size: 1.25rem; }
  .comment-block, .submit-row { padding-left: 0; }
  .form-error { margin-left: 0; }
  .submit-row .btn-primary { width: 100%; }
  .choices { max-width: none; }
  .rate { flex-direction: column; align-items: flex-start; }
  .bar { grid-template-columns: 2.5rem 1fr 4.5rem; gap: 0.5rem; font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Multi-survey additions ---------- */

.survey-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  margin-bottom: 1.5rem;
}
.survey-switch > label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brass);
}
.survey-switch select {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  padding: 0.5rem 0.7rem;
  max-width: 100%;
}
.survey-switch select:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.status-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }

.status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  border: 1.5px solid;
}
.status-pill.is-open   { color: var(--teal); border-color: var(--teal); }
.status-pill.is-closed { color: var(--ink-faint); border-color: var(--rule); }
.status-pill.is-draft  { color: var(--brass); border-color: var(--brass); }

.crosstab {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
}
.crosstab h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
}
.crosstab > .muted { max-width: 58ch; margin: 0 0 1.1rem; }

.crosstab-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.crosstab-controls select {
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  padding: 0.55rem 0.7rem;
  max-width: min(100%, 26rem);
}
.crosstab-controls select:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }

.ct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  background: var(--card);
}
.ct-table th, .ct-table td {
  border: 1px solid var(--rule-soft);
  padding: 0.65rem 0.8rem;
  text-align: left;
}
.ct-table thead th { font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); background: var(--paper); }
.ct-table tbody th { font-weight: 600; background: var(--paper); }
.ct-table td { font-variant-numeric: tabular-nums; }
.ct-table .ct-total { font-weight: 600; }
.ct-corner { line-height: 1.35; }
.ct-corner .ct-a, .ct-corner .ct-b { display: block; font-size: 0.76rem; font-weight: 600; }
.ct-corner .ct-a { color: var(--ink); }
.ct-corner .ct-a::before { content: "Rows: "; color: var(--ink-faint); font-weight: 400; }
.ct-corner .ct-b { color: var(--ink); margin-top: 0.2rem; }
.ct-corner .ct-b::before { content: "Columns: "; color: var(--ink-faint); font-weight: 400; }

@media (max-width: 40rem) {
  .status-actions { margin-left: 0; }
  .ct-table { font-size: 0.82rem; }
  .ct-table th, .ct-table td { padding: 0.45rem 0.5rem; }
}

/* ---------- Accounts and permissions ---------- */

.accounts {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
}
.accounts h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
}
.accounts > .muted { max-width: 58ch; margin: 0 0 1.4rem; }

.acct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  margin-bottom: 0.6rem;
}
.acct-who { min-width: 12rem; flex: 1 1 14rem; }
.acct-who strong { display: block; font-weight: 600; }
.acct-who span { font-size: 0.86rem; color: var(--ink-faint); }
.acct-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-left: auto; }
.acct-actions .btn-ghost { font-size: 0.82rem; padding: 0.45rem 0.7rem; }
.acct.is-you { border-color: var(--brass); }

.role-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
  border: 1.5px solid;
  white-space: nowrap;
}
.role-pill.is-admin  { color: var(--teal); border-color: var(--teal); }
.role-pill.is-member { color: var(--ink-faint); border-color: var(--rule); }

.flag {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--brass);
  white-space: nowrap;
}
.flag.is-locked { color: var(--alert); }

.new-user-banner {
  background: var(--card);
  border-left: 3px solid var(--teal);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.4rem;
}
.new-user-banner h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}
.new-user-banner p { margin: 0 0 0.8rem; color: var(--ink-soft); font-size: 0.94rem; }

.credential {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 0.9rem;
  padding: 0.8rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
}
.credential dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); align-self: center; }
.credential dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  user-select: all;
}

.add-user {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  padding: 1.25rem 1.4rem;
  margin-top: 1.4rem;
}
.add-user h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 1rem;
}
.add-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1rem;
}
.add-user select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
}
.add-user select:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }

.field-hint { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--ink-faint); }

.btn-link {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.btn-link:hover { color: var(--ink); }
.btn-link:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

@media (max-width: 40rem) {
  .acct-actions { margin-left: 0; width: 100%; }
}

/* ---------- Dashboard shell with sidebar navigation ---------- */

body.board { background: var(--paper); }

.shell {
  display: grid;
  grid-template-columns: 16rem 1fr;
  min-height: 100vh;
}

.sidebar {
  background: #16201E;
  color: #C8CFCB;
  padding: 1.6rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-head .eyebrow { color: var(--brass); margin: 0 0 0.2rem; }
.sidebar-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.sidebar-survey label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7E8A85;
  margin-bottom: 0.4rem;
}
.sidebar-survey select {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: #223029;
  background: #22302D;
  border: 1px solid #3A4643;
  border-radius: 3px;
  padding: 0.5rem 0.6rem;
}
.sidebar-survey select:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar-nav button {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  color: #C8CFCB;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  border-radius: 0 3px 3px 0;
}
.sidebar-nav button:hover { background: #1F2B28; color: #fff; }
.sidebar-nav button[aria-current="true"] {
  background: #1F2B28;
  border-left-color: var(--brass);
  color: #fff;
}
.sidebar-nav button:focus-visible { outline: 3px solid var(--brass); outline-offset: -3px; }
.sidebar-nav button[hidden] { display: none; }

.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid #2C3835;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.sidebar-foot .muted { color: #7E8A85; margin: 0 0 0.3rem; }
.sidebar-foot .btn-link { color: #C8CFCB; }
.sidebar-foot .btn-link:hover { color: #fff; }

.content {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.15rem, 4vw, 3rem) 4rem;
  max-width: 62rem;
  min-width: 0;
}

.nav-toggle {
  display: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  padding: 0.55rem 1rem;
  margin-bottom: 1.25rem;
  cursor: pointer;
}

.view-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}
.view-head .display { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin-bottom: 0.25rem; }
.view-head .muted { max-width: 56ch; margin: 0; }
.view-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ---------- Survey editor ---------- */

.survey-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.95rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  margin-bottom: 0.6rem;
}
.survey-row-main { flex: 1 1 16rem; min-width: 0; }
.survey-row-main strong { display: block; font-weight: 600; }
.survey-row-main span { font-size: 0.86rem; color: var(--ink-faint); }
.survey-row .btn-ghost { font-size: 0.82rem; padding: 0.45rem 0.7rem; }
.survey-row.is-open { border-left: 3px solid var(--teal); }

.panel-form {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  padding: 1.35rem 1.5rem;
  margin: 1.25rem 0;
}
.panel-form h2, .panel-form h4 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0 0 1rem;
}
.panel-form h2 { font-size: 1.2rem; }
.panel-form h4 { font-size: 1.05rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 1.1rem;
}
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }

.editor-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
  padding-top: 1.5rem;
}
.editor-head h2 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin: 0 0 0.25rem; }

.editor-block {
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.5rem;
  margin-top: 1.75rem;
}
.editor-block h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}
.editor-block.danger { border-top-color: var(--rule); }
.editor-block.danger .btn-ghost:hover { border-color: var(--alert); color: var(--alert); }

.frozen-notice {
  background: #F6F0E4;
  border-left: 3px solid var(--brass);
  padding: 1rem 1.2rem;
  margin-top: 1.25rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.q-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 1rem;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  margin-bottom: 0.5rem;
}
.q-row-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--brass);
  min-width: 1.5rem;
}
.q-row-main { flex: 1 1 18rem; min-width: 0; }
.q-row-main strong { font-weight: 600; display: block; line-height: 1.4; }
.q-row-main span { font-size: 0.84rem; color: var(--ink-faint); }
.q-row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.q-row-actions .btn-ghost { font-size: 0.8rem; padding: 0.35rem 0.55rem; }

.insight-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
}
.insight-row p { margin: 0; flex: 1; color: var(--ink-soft); }

.cond-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.cond-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cond-row select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  max-width: 22rem;
}

.view select, .panel-form select {
  font: inherit;
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  width: 100%;
}
.view select:focus-visible, .panel-form select:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }

@media (max-width: 56rem) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    display: none;
  }
  .sidebar.is-open { display: flex; }
  .nav-toggle { display: block; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-nav button { border-left: 0; border-bottom: 3px solid transparent; border-radius: 3px; }
  .sidebar-nav button[aria-current="true"] { border-left-color: transparent; border-bottom-color: var(--brass); }
}

/* ---------- Homes ---------- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.stat {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  padding: 0.85rem 1rem;
}
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--ink);
}
.stat span {
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

.home-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.home-filters input[type="search"] {
  flex: 1 1 16rem;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 0.95rem;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
}
.home-filters input:focus-visible, .home-filters select:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 1px;
}
.home-filters select { flex: 0 1 16rem; width: auto; font-size: 0.95rem; padding: 0.65rem 0.7rem; }

.home-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.8rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid transparent;
  margin-bottom: 0.45rem;
}
.home-row.is-done { border-left-color: var(--teal); }
.home-main { flex: 1 1 18rem; min-width: 0; }
.home-main strong { display: block; font-weight: 600; }
.home-main span { font-size: 0.85rem; color: var(--ink-faint); word-break: break-word; }
.home-flags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.home-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-left: auto; }
.home-actions .btn-ghost { font-size: 0.8rem; padding: 0.38rem 0.6rem; }

.flag.is-done { color: var(--teal); }
.flag.is-warn { color: var(--brass); }

.checkline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  margin: 0.5rem 0 0.25rem;
  cursor: pointer;
}
.checkline input { width: 1.1rem; height: 1.1rem; accent-color: var(--teal); }

.import-preview {
  background: var(--paper);
  border-left: 3px solid var(--brass);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  font-size: 0.93rem;
}
.import-preview h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
}
.import-preview ul { margin: 0 0 0.5rem; padding-left: 1.1rem; color: var(--ink-soft); }
.import-preview li { margin-bottom: 0.3rem; }

.panel-form textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  resize: vertical;
}
.panel-form textarea:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
#imCsv { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }

@media (max-width: 40rem) {
  .home-actions { margin-left: 0; width: 100%; }
}


/* ---------- Stacked response bars ---------- */

.split {
  display: flex;
  height: 2.1rem;
  border-radius: 2px;
  overflow: hidden;
  background: var(--rule-soft);
  margin-bottom: 0.6rem;
}
.split span {
  display: block;
  height: 100%;
  min-width: 0;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.split .seg-yes { background: var(--yes); }
.split .seg-no  { background: var(--no); }
.split .seg-na  { background: var(--na); }

/* The percentage sits inside its own segment when there is room for it, and
   drops out rather than overflowing when there is not. */
.split span i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Label colour follows its own segment, so both clear 4.5:1 against it. */
.split .seg-yes i { color: #fff; }
.split .seg-no i  { color: var(--ink); }
.split .seg-na i  { color: var(--ink-soft); }
.split span[data-narrow="true"] i { display: none; }

.split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.split-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.split-legend strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.split-legend .key {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 2px;
  flex: 0 0 auto;
  /* A hairline so a pale swatch still reads against the card behind it. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.split-legend .key.yes { background: var(--yes); }
.split-legend .key.no  { background: var(--no); }
.split-legend .key.na  { background: var(--na); }

.no-answers {
  height: 2.1rem;
  border: 1.5px dashed var(--rule);
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}


/* Hidden for board members; the [hidden] rule near the top does the work. */
.admin-only { display: contents; }

/* ---------- Footer credit ---------- */

/* The rule lives on .credit rather than on the footer, so the separating line
   sits directly above the line it separates on every page, whether the credit
   stands alone or joins an existing footer. */
.app-foot {
  margin-top: 3rem;
}
.app-foot.standalone {
  max-width: 46rem;
  margin: 3rem auto 0;
  padding: 0 clamp(1.15rem, 4vw, 2rem) 2.5rem;
}

.credit {
  margin: 1.5rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.credit a {
  color: var(--ink-faint);
  text-decoration: none;
}
.credit a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.credit a:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 2px; }