/* Planning-surface layer: the availability-poll builder, the proposal form,
   and the discussion mention picker and form. It lives beside app.css instead of inside
   it so the shared shell keeps its own byte budget, exactly as social.css and
   calendar.css already do. */

.availability-poll-slots { display: grid; gap: 1rem; }

.availability-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.availability-slot-card .form-field { margin-bottom: 1rem; }
.availability-slot-card .form-field:last-child { margin-bottom: 0; }

.poll-create-shell { max-width: 66rem; }

.poll-create-form { display: grid; gap: 1.25rem; }

.poll-create-section {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  background: var(--vp-surface);
  box-shadow: 0 0.5rem 1.5rem rgb(31 48 42 / 5%);
}

.poll-create-section .section-heading-row { align-items: flex-start; margin-bottom: 1.5rem; }

.poll-create-section h2 {
  margin: 0.2rem 0 0.45rem;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: -0.02em;
}

.section-heading-copy { max-width: 42rem; margin: 0; color: var(--vp-muted); }

.poll-meta-grid { display: grid; gap: 0 1.25rem; }
.poll-meta-grid__wide { grid-column: 1 / -1; }
.poll-meta-grid .form-field { margin-bottom: 1.1rem; }
.poll-meta-grid .form-field:last-child { margin-bottom: 0; }
.poll-meta-grid textarea { min-height: 7.5rem; resize: vertical; }

.availability-slot-card { padding: clamp(1rem, 2vw, 1.35rem); border: 1px solid var(--vp-border-strong); border-radius: var(--vp-radius); background: var(--vp-canvas); box-shadow: 0 0.25rem 0.8rem rgb(31 48 42 / 4%); }
.availability-slot-card__heading { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.2rem; }
.availability-slot-card__heading h3 { flex: 1; margin: 0; font-size: 1rem; }
.slot-number { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: var(--vp-radius-sm); color: var(--vp-accent-dark); background: var(--vp-accent-soft); font-size: 0.8rem; font-weight: 800; }

.slot-time-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.slot-date-field .form-field, .slot-time-grid .form-field { margin-bottom: 0; }

.poll-create-form:has(input[name="schedule_kind"][value="all_day"]:checked) .slot-time-grid {
  display: none;
}

.availability-slot-card .form-label { font-size: 0.86rem; }
.availability-slot-card .form-control { min-height: 2.6rem; }

.availability-slot-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.poll-create-form > .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.mention-picker {
  position: relative;
}

.mention-picker__suggestions {
  position: static;
  width: min(100%, 24rem);
  max-height: 14rem;
  margin-top: 0.35rem;
  overflow-y: auto;
  border: 1px solid var(--vp-border);
  border-radius: 0.5rem;
  background: var(--vp-surface);
  box-shadow: var(--vp-shadow-sm);
}

.mention-picker__suggestion {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
}

.mention-picker__suggestion:hover,
.mention-picker__suggestion[aria-selected="true"]:focus {
  background: var(--vp-surface-muted);
}

@media (max-width: 35rem) {
  .availability-slot-grid { grid-template-columns: 1fr; }
  .slot-time-grid { grid-template-columns: 1fr; }
  .poll-create-form > .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .poll-create-form > .form-actions .btn { width: 100%; }
}

.candidate-form:has([name="kind"][value="location"]:checked) [data-kind="date"],
.candidate-form:has([name="kind"][value="date"]:checked) [data-kind="location"],
.candidate-form:has([name="schedule_kind"][value="all_day"]:checked) [data-schedule="timed"],
.candidate-form:has([name="schedule_kind"][value="timed"]:checked) [data-schedule="all_day"] { display: none; }
.candidate-form:has([name="schedule_kind"]:checked) .candidate-form__subheading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.candidate-form__times { margin-top: 1rem; }
/* Discussion: the read banner is one text line; the hidden mention picker adds no gap. */
.read-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 0.75rem; margin-bottom: 0.5rem; }
.read-banner__label { margin: 0; }
.comment-form.content-stack { gap: 0.75rem; }
.comment-form > .form-field { margin-bottom: 0; }
.comment-form > .mention-picker { display: contents; }