/* members.css: page-specific styles for the member pages. Use coe.css components first. */

.confirm-notice { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.confirm-notice p { margin: 0; }
.confirm-notice form { margin: 0; }
.ledger__pct { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.form-note { margin-top: 12px; font-size: 0.8125rem; color: var(--muted); }
.form-alt { margin-top: 12px; font-size: 0.875rem; text-align: center; color: var(--muted); }

.steps { margin: 0; padding-left: 1.3em; max-width: 62ch; }
.steps li + li { margin-top: 6px; }

/* On screen a statement is two cards; printed it is black on white on one A4 page (the print block
   in coe.css and the one below). What is owed, by when and under which reference comes first, not
   as the last of eight rows. */
.statement__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.statement__kind { font-size: 0.9375rem; font-weight: 500; color: var(--muted); margin: 0 0 2px; }
.statement__seal { width: 92px; height: 92px; flex: none; }
/* the exact period under the month the statement is titled by (Fable 5.1 review) */
.statement__period { margin-top: 2px; }
.statement__summary, .statement__body {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r);
  padding: 24px 28px;
  margin-top: var(--gap);
}
.statement__summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; }
.statement__summary p { margin: 0; }
.statement__label { color: var(--muted); font-size: 0.8125rem; margin-bottom: 3px; }
.statement__summary .figure { overflow-wrap: anywhere; }
/* a code to copy into a bank transfer: one unbroken line */
.statement__ref { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; padding-top: 6px; }
.statement__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 36px; }
.statement__parties { font-size: 0.875rem; line-height: 1.45; }
.statement__parties p { margin: 0 0 10px; overflow-wrap: anywhere; }
.statement__parties .statement__label { margin: 0; }
.statement__sums { min-width: 0; }
.statement__currency { margin: 0 0 10px; }
.statement__pay .dl { max-width: 34rem; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
.statement__pay h2 { font-size: 1.1875rem; margin-bottom: 8px; }
.statement__pay { margin-top: 24px; }
@media (min-width: 900px) {
  .statement__body { grid-template-columns: 13rem minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* these stay two columns on a phone, so label and value keep one rule and one baseline */
  .statement__pay .dl dt, .statement__pay .dl dd { padding: 7px 0; border-top: 1px solid var(--hair); }
  .statement__pay .dl > :nth-child(-n+2) { border-top: 0; }
  .statement__summary { grid-template-columns: minmax(0, 1fr); }
  .statement__summary, .statement__body { padding: 18px; }
  .statement__seal { width: 72px; height: 72px; }
}
@media print {
  .statement__seal { width: 72px; height: 72px; }
  .statement__summary, .statement__body { border: 0; border-radius: 0; padding: 0; background: none; }
  .statement__summary { border-top: 2px solid #111; border-bottom: 1px solid #111; padding: 6px 0 8px; margin-top: 8px; }
  .statement .table td { padding-top: 3px; padding-bottom: 3px; }
  .statement__summary .figure { font-size: 1.6rem; }
  .statement__summary .figure--sm { font-size: 1.15rem; }
  .statement__body { grid-template-columns: 11rem minmax(0, 1fr); margin-top: 10px; }
  .statement__pay { margin-top: 12px; }
  .statement__pay h2 { font-size: 1rem; }
}