/* Pledge layer 15 — Oct 30, 2026. "Open when neighbors ask": the guest's ask
   on a cafe with no set hours, the announced pop-up, and the host's panel.

   Rollback is deleting the one <link> line in layout.php. Everything here
   styles a plain .panel, paragraph, list, <details> or form that already says
   and does the same thing without it: the meter degrades to a row of inert
   empty spans (the count is in words directly above it and in the element's
   aria-label), and every button degrades to an ordinary button. Nothing
   functional lives in this file.

   Direction 05 throughout: hairline boxes, one accent, no radius, no shadow.
   Reading text stays at or above the .9rem floor (Dallas, Sep 18), and every
   tap target clears 44px at phone width (Oct 5 finding 1, re-learned Oct 29).

   Deliberately no new emoji: the chrome already carries more than the system
   wants (see the roadmap's emoji debt), and a cheer does not need one. */

/* ---------- the guest's ask ---------- */
.panel.pledge {
  border-left: 3px solid var(--rule-soft, #e2ded8);
}
/* An announced pop-up is the one piece of actual news on the page. */
.panel.pledge.pledge-announced {
  border-left-color: var(--accent, #c8511f);
}
.pledge-line {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0 0 6px;
}
.panel.pledge .small,
.pledge-host .small {
  font-size: .9rem;
  line-height: 1.45;
}

/* The social line — Dallas's sentence, and the warmest thing on the page. */
.pledge-social {
  font-size: .95rem;
  line-height: 1.45;
  margin: 6px 0 2px;
  color: var(--accent-ink, #a8430f);
}

/* One mark per neighbour the host asked for, lit as they arrive. A count of
   people, not a progress bar toward a deadline — nothing happens at the end
   of it, which is the point. */
.pledge-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 12px;
}
.pledge-dot {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid var(--rule, #111);
  background: transparent;
}
.pledge-dot.on {
  background: var(--accent, #c8511f);
  border-color: var(--accent, #c8511f);
}

/* ---------- the forms, both sides ---------- */
.pledge-form label,
.pledge-fields label,
.pledge-wrap label,
.pledge-announce label {
  display: block;
  font-size: .9rem;
  margin: 8px 0 0;
}
.pledge-form input[type=text],
.pledge-form select,
.pledge-wrap input[type=text],
.pledge-announce input,
.pledge-announce select,
.pledge-fields input {
  display: block;
  width: 100%;
  max-width: 24rem;
  margin-top: 3px;
}
.pledge-form label.chk,
.pledge-wrap label.chk {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;        /* a consent box is a tap target like any other */
  max-width: 24rem;
}
.pledge-form button,
.pledge-wrap button,
.pledge-announce button {
  margin-top: 10px;
}
/* Oct 5 finding 1, re-learned Oct 29: .btn is 40px tall, which is under the
   thumb floor. Every button in this panel is one somebody taps on a phone —
   the sign-up door included, since that is the whole ask for a stranger. */
.panel.pledge .btn,
.panel.pledge button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pledge-mine > summary,
.pledge-who > summary,
.pledge-announce > summary {
  cursor: pointer;
  font-size: .9rem;
  padding: 11px 0;         /* 44px of row for a thumb, without a box around it */
  min-height: 44px;
  box-sizing: border-box;
}
.pledge-mine > summary {
  font-weight: 600;
}

/* ---------- the host's panel on the dashboard ---------- */
.pledge-host {
  border: 1px solid var(--rule-soft, #e2ded8);
  border-left: 3px solid var(--rule-soft, #e2ded8);
  background: var(--paper, #fff);
  padding: 10px 12px;
  margin: 10px 0 12px;
}
.pledge-host.pledge-met {
  border-left-color: var(--accent, #c8511f);
}
.pledge-host .pledge-line {
  font-size: .95rem;
  margin: 0;
}
.pledge-host p {
  margin: 4px 0 0;
}
.pledge-ok {
  color: var(--accent-ink, #a8430f);
}
.pledge-tally {
  margin: 4px 0 2px;
}
.pledge-note {
  font-style: italic;
}

/* The announced pop-up, and the wrap-up question after it. Both are hairline
   boxes inside the host's panel: a quiet shelf, not an alarm. */
.pledge-opening,
.pledge-wrap {
  border-top: 1px solid var(--rule-soft, #e2ded8);
  margin-top: 10px;
  padding-top: 8px;
}
.pledge-opening p,
.pledge-wrap p {
  margin: 0 0 4px;
}
.pledge-wrap .btn-wide {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
}
.pledge-announce .btn-wide {
  display: block;
  width: 100%;
  max-width: 24rem;
  min-height: 44px;
}

/* ---------- the one-click answer page ---------- */
.intent {
  max-width: 34rem;
}
.panel.pledge-intent {
  border-left: 3px solid var(--rule-soft, #e2ded8);
}
.panel.pledge-intent.pledge-coming {
  border-left-color: var(--accent, #c8511f);
}
.panel.pledge-intent .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: 6px 6px 0 0;
}

@media (max-width: 640px) {
  .pledge-form input[type=text],
  .pledge-form select,
  .pledge-announce input,
  .pledge-announce select,
  .pledge-fields input,
  .pledge-wrap input[type=text] {
    max-width: none;
  }
  .panel.pledge-intent .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }
}