/* ═══════════════════════════════════════════════════════════════════════
   playdate.css — /playdate/ only.

   Every colour, radius and spacing value comes from the token layer in
   bloom.css, then pages.css, then forms.css. This file adds nothing to the
   palette: the three pages are a form, a state card and a link to copy, and
   none of them has any business raising its voice.

   One family, Heebo, differentiated by weight — the site's own convention.
   Logical properties throughout (inline-start / block-end), like forms.css
   and reserve.css.

   THE PAGES HAVE ONE IDEA BETWEEN THEM: a mother sends one link, and everyone
   who taps it pays for her own children. So the one element styled to be
   noticed is the share link on created.html, and the one styled to be noticed
   and NOT acted on is the cancel link beneath it. Everything else borrows the
   register grid from forms.css unchanged.

   What is genuinely new here, and why:
     .btn-whatsapp    there is no share button anywhere else on the site
     .field-optional  no other form has a field a parent may skip
     .pd-share .hint  forms.css scopes .hint to `.field .hint`, and the copy
                      state lines sit outside a .field
   ═══════════════════════════════════════════════════════════════════════ */


/* ── States ──────────────────────────────────────────────────────────────
   /playdate/ resolves to one of six blocks: loading, open, full, cancelled,
   past, unknown. Five of them are this card. A friend who taps a link must
   never meet a 404 — "she sent me something broken" is the one failure this
   feature cannot absorb — so every state that is not `open` is a page with a
   heading, a sentence and somewhere to go next. */

.pd-state { padding-block: calc(var(--header-h) + 72px) 96px; }

.pd-loading {
  text-align: center;
  font-family: 'Heebo', sans-serif;
  color: rgba(43, 43, 43, 0.7);
}

.pd-card {
  max-width: 620px;
  margin-inline: auto;
  padding: 40px 32px;
  text-align: center;
  background: var(--ivory);
  border: 1px solid rgba(140, 90, 54, 0.16);
  border-radius: 18px;
}
/* h1 on /playdate/, where the card IS the page; h2 on new.html, where the card
   is an error inside a page that already has an h1. Same size either way — the
   heading level follows the document outline, not the visual weight. */
.pd-card h1,
.pd-card h2 {
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.03em;
  margin-block-end: 14px;
}
.pd-card p {
  font-family: 'Heebo', sans-serif;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.76);
  margin-block-end: 10px;
}

/* A second, quieter line: the consolation on a full playdate, the policy note
   on a completed one. Never the same weight as the sentence above it. */
.pd-card-note {
  font-size: 14px;
  color: rgba(43, 43, 43, 0.66);
  padding-block-start: 6px;
}

.pd-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-block-start: 26px;
}

/* The booking succeeded. Bordered rather than filled: this is a receipt, and a
   celebratory block behind a list of figures makes the figures harder to read. */
.pd-card-done { text-align: start; border-color: rgba(152, 160, 122, 0.5); }
.pd-card-done h1 { text-align: center; }
.pd-card-done .summary-rows { margin-block: 20px; }


/* ── The head of an open playdate ────────────────────────────────────────
   Her first name and the date, then the count. The count is a live region:
   it changes under the reader when the document is re-read after a refusal,
   and a number that changes silently is worse than one that is announced. */

.pd-head { padding-block-end: 8px; }

.pd-places {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 16px;
  padding: 7px 15px;
  border-radius: 999px;
  font-family: 'Heebo', sans-serif;
  font-weight: 600;
  font-size: 14px;
  background: rgba(152, 160, 122, 0.22);
  color: #4B5039;
}
/* Two states, and they are not decoration: "one place left" is the moment a
   parent decides, and "full" is the moment she stops reading. */
.pd-places.is-few { background: rgba(232, 180, 184, 0.34); color: var(--mocha-deep); }
.pd-places.is-full { background: var(--error-soft); color: var(--error); }


/* ── The calendar on new.html ────────────────────────────────────────────
   createCalendar() writes into .cal-head / .cal-grid / .bk-slots, which are
   already styled in bloom.css and pages.css. This is only the box around it,
   so the picker sits inside a fieldset rather than floating in the panel. */

.pd-cal {
  padding: 16px;
  background: var(--ivory);
  border: 1px solid rgba(140, 90, 54, 0.14);
  border-radius: 14px;
}

.pd-slots-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-block: 18px 10px;
  font-family: 'Heebo', sans-serif;
  font-weight: 600;
  color: var(--ink);
}
.pd-slots-count { font-weight: 400; font-size: 13.5px; color: var(--mocha-deep); }

/* The one field on the site a parent may leave empty. Said in the label
   rather than inferred from the absence of an asterisk.

   The alpha is .75, not .6. At .6 this composites to #7a7773 on the ivory
   panel — a measured 3.72:1 at 12.5px, which axe fails against the 4.5 floor.
   .75 lands near 6.3:1, clearing it with the same margin the rest of the site
   was corrected to rather than sitting on the line. */
.field-optional {
  font-weight: 400;
  font-size: 12.5px;
  color: rgba(43, 43, 43, 0.75);
}


/* ── The share link ──────────────────────────────────────────────────────
   The whole reason created.html exists, so it is the one block on these three
   pages that is allowed to be loud: a filled panel, the link in a monospaced
   LTR field, and the copy button attached to it.

   The URL renders LTR inside an RTL page. Without `direction: ltr` a link
   ending in a token would have its punctuation reordered on screen — still
   correct in the clipboard, and visibly wrong to the person checking it. */

.pd-share { border-color: rgba(140, 90, 54, 0.3); }
.pd-share h2,
.pd-next h2,
.pd-manage h2 {
  font-size: 19px;
  letter-spacing: -0.02em;
  margin-block-end: 8px;
}
.pd-share-lead {
  font-family: 'Heebo', sans-serif;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.76);
  margin-block-end: 18px;
}

.pd-share-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-share-input {
  flex: 1 1 260px;
  min-width: 0;              /* or a long token forces the row wider than the page */
  direction: ltr;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.pd-copy { flex: 0 0 auto; }

/* forms.css scopes .hint to `.field .hint`; these two sit outside a field. */
.pd-share .hint,
.pd-manage .hint {
  display: block;
  min-height: 18px;          /* reserve the line so copying does not shift the page */
  margin-block-start: 8px;
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  color: var(--mocha-deep);
}

.pd-share-actions { margin-block-start: 18px; }

/* The only share button on the site. Olive rather than WhatsApp's own green:
   the brand board has no green in it, and a foreign brand colour on a Bloom
   page reads as a bolted-on widget. Ivory on olive is the pairing .follow-btn
   already uses, and it clears AA comfortably. */
.btn-whatsapp {
  background: var(--olive);
  border: 1px solid var(--olive);
  color: var(--ivory);
}
.btn-whatsapp:hover { background: #42472E; border-color: #42472E; color: var(--ivory); }
.btn-whatsapp:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.pd-mailed {
  margin-block-start: 16px;
  font-family: 'Heebo', sans-serif;
  font-size: 13.5px;
  color: rgba(43, 43, 43, 0.66);
}


/* ── What happens next ───────────────────────────────────────────────────
   Numbered because it genuinely is a sequence — she sends, they join, she
   joins — and the third step is the one everybody gets wrong: opening a
   playdate does not book her own children into it. */

.pd-next { margin-block-start: 20px; }

.pd-steps {
  margin: 0 0 4px;
  padding-inline-start: 20px;
  list-style: decimal;
  font-family: 'Heebo', sans-serif;
  line-height: 1.8;
  color: rgba(43, 43, 43, 0.78);
}
.pd-steps li { padding-inline-start: 4px; }
.pd-steps strong { color: var(--ink); }

.pd-summary { margin-block: 24px; }


/* ── The cancel link ─────────────────────────────────────────────────────
   Last on the page, and deliberately not beside the share button. Handing out
   the invitation must not hand out the cancel button, which is why it is a
   second token — and the layout has to say so, not just the copy. */

.pd-manage {
  margin-block-start: 20px;
  background: var(--neutral);
  border-color: rgba(43, 43, 43, 0.12);
}
.pd-manage-warn {
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(43, 43, 43, 0.74);
  margin-block-end: 16px;
}
.pd-manage-warn strong { color: var(--error); }


/* ── Narrow ──────────────────────────────────────────────────────────────
   The copy button drops under the field rather than squeezing it: a link box
   narrower than the token it holds is unreadable, and the button is the part
   that can afford the width. */

@media (max-width: 520px) {
  .pd-state { padding-block: calc(var(--header-h-sm) + 48px) 64px; }
  .pd-card { padding: 30px 20px; }
  .pd-copy { flex: 1 1 100%; justify-content: center; }
  .pd-card-actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-whatsapp { transition: none; }
}