/* members.css: page-specific styles for the member pages. Use ex2.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 { white-space: nowrap; }
.form-note { margin-top: 20px; font-size: 0.8125rem; line-height: 1.5; color: var(--faint); }
.form-note a { color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.form-alt { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font-size: 0.875rem; color: var(--muted); }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; max-width: 60ch; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--hair); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before { content: counter(step); color: var(--signal); font-variant-numeric: tabular-nums lining-nums; }

/* the month's result beside its share of the opening equity */
.brief { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 8px; }
.brief__pct { color: var(--muted); font-size: 0.9375rem; }

/* On screen a statement is a document: its head and mark, the three figures that matter in a ruled
   strip, then the parties and the sums. Printed it is black on white on one A4 page (the print
   blocks in ex2.css and below). */
.statement__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.statement__kind { font-size: 0.875rem; color: var(--muted); margin: 0 0 6px; }
.statement__mark { width: 56px; height: 56px; flex: none; color: var(--signal); }
.statement__period { margin-top: 4px; }
.statement__summary {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 32px;
  margin-top: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.statement__summary p { margin: 0; }
.statement__label { color: var(--muted); font-size: 0.8125rem; margin-bottom: 6px; }
.statement__summary .figure { overflow-wrap: anywhere; }
/* a code to copy into a bank transfer: one unbroken line */
.statement__ref { font-weight: 500; font-size: 0.9375rem; white-space: nowrap; padding-top: 8px; font-variant-numeric: tabular-nums lining-nums; }
.statement__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 56px; margin-top: 40px; }
.statement__parties { font-size: 0.875rem; line-height: 1.5; }
.statement__parties p { margin: 0 0 12px; overflow-wrap: anywhere; }
.statement__parties .statement__label { margin: 0 0 2px; }
.statement__sums { min-width: 0; }
.statement__currency { margin: 0 0 12px; }
.statement__pay .dl { max-width: 34rem; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
.statement__pay h2 { font-size: 1.0625rem; font-weight: 500; margin-bottom: 8px; }
.statement__pay { margin-top: 40px; }
@media (min-width: 960px) {
  .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: 8px 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); margin-top: 28px; }
  .statement__mark { width: 40px; height: 40px; }
}
@media print {
  .statement__mark { width: 40px; height: 40px; color: #111; }
  .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; }
}