/* Invitation wording helper. Loaded after tools.css on its page only, and
   builds on its form controls, pills, buttons and panels. */

/* The form beside the wording on wide screens, stacked on narrow ones. */
.invite-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 62rem) {
  .invite-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.invite-group + .invite-group {
  margin-top: 1.25rem;
}

.invite-hint {
  margin-top: 0.5rem;
}

.invite-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.invite-section-heading,
fieldset legend.invite-section-heading {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
}

.invite-section-heading .field-hint {
  font-family: var(--font-sans);
  font-weight: normal;
}

.invite-partner {
  margin-top: 1rem;
}

.invite-name-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.75rem 1rem;
}

.invite-subfields {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.invite-short-textarea {
  min-height: 4.25rem;
}

/* The wording */

.invite-results > .tool-panel-heading:focus {
  outline: none;
}

.invite-results > .tool-panel-heading:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.invite-summary {
  margin: 0;
  color: var(--color-text-muted);
}

.invite-results .empty-state {
  margin-top: 0.75rem;
}

.invite-option {
  margin-top: 1.5rem;
}

.invite-option-title {
  margin: 0;
  font-size: 1.0625rem;
}

.invite-option-note {
  margin: 0.2rem 0 0.65rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* A card-like preview, with the line breaks shown as they'd be printed. */
.invite-card {
  padding: clamp(1.25rem, 4vw, 2rem) clamp(0.75rem, 3vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #fffdfb, var(--color-bg-alt));
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, 0.7),
    inset 0 0 0 7px var(--color-border);
  text-align: center;
}

.invite-card-plain {
  background: var(--color-surface);
  box-shadow: none;
}

.invite-card-text {
  margin: 0;
  font-family: var(--font-serif);
  /* A touch smaller on phones, so fewer lines wrap. */
  font-size: clamp(0.9375rem, 0.8rem + 0.6vw, 1.0625rem);
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.invite-option-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.invite-reminders {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-accent-3-soft);
}

.invite-reminders h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.invite-reminders ul {
  margin: 0;
  padding-left: 1.2rem;
}

.invite-reminders li {
  font-size: 0.9375rem;
}

.invite-reminders li + li {
  margin-top: 0.3rem;
}

.invite-details {
  margin-top: 1.75rem;
}

.invite-details h3 {
  margin: 0;
  font-size: 1.0625rem;
}

.invite-proofread {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* The editor, shown above the versions once one is being edited. */
.invite-editor {
  margin-bottom: 2rem;
  padding: 1.25rem;
  border: 1.5px solid var(--color-border-strong);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  scroll-margin-top: 1rem;
}

.invite-editor-text {
  min-height: 18rem;
  font-family: var(--font-serif);
  line-height: 1.55;
}

.invite-editor-actions {
  margin-top: 1rem;
}

/* The example in the page's how-to section. */
.worked-example-wording {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  font-family: var(--font-serif);
  text-align: center;
}

/* Print: just the chosen wording, centred on a card-sized panel (A5 on A4,
   with a light border to trim to). */
.invite-print-card {
  width: 148mm;
  max-width: 100%;
  margin: 20mm auto 0;
  padding: 18mm 12mm;
  border: 0.5pt solid #999;
  text-align: center;
  break-inside: avoid;
}

.invite-print-card p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14pt;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media print {
  .tool-header,
  .invite-layout,
  #invitation-notice {
    display: none !important;
  }
}