/* Direct Debit (decision 3). Owner: methods lane. Loaded by My membership (public/member/index.html) and by the club screens that show
   the Direct Debit (useStyles('methods')). Uses the shared tokens only: no colour is written here, so light and dark both follow the theme.

   The Direct Debit is a third kind of label beside Status (.m-tag, square caps) and Payment (.p-pill, round): a soft-cornered outline
   with a SHAPE glyph, so the state reads without colour. Its colours are the shared status tones (components.css, "STATUS SYSTEM"), set
   by a .tone-* class from core/direct-debit.js: in place is green, not set up yet or a card that expires soon amber, setting up or
   clearing blue, failed red. */

.dd-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px 2px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: normal; max-width: 100%;
  background: var(--t-bg, var(--neu-bg)); color: var(--t-fg, var(--neu-fg)); border: 1.5px solid var(--t-line, var(--neu-line));
  --glyph: var(--t-line, var(--neu-line));
}
.dd-pill::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--glyph); }
.dd-pill--active::before { clip-path: polygon(12% 50%, 0 64%, 38% 100%, 100% 22%, 86% 8%, 38% 70%); }              /* a tick */
.dd-pill--clearing::before { border-radius: 50%; background: conic-gradient(var(--glyph) 0 70%, transparent 0); box-shadow: inset 0 0 0 1.5px var(--glyph); } /* a clock face filling up */
.dd-pill--waiting::before { background: none; border: 2px solid var(--glyph); border-radius: 50%; border-top-color: transparent; } /* a ring, still turning */
.dd-pill--setup { border-style: dashed; }
.dd-pill--setup::before { background: none; border: 2px dashed var(--glyph); border-radius: 50%; }                    /* an empty dashed ring */
.dd-pill--expiring::before { background: none; border: 2px solid var(--glyph); border-radius: 2px; rotate: 45deg; width: 9px; height: 9px; } /* a hollow diamond */
.dd-pill--failed::before { width: 12px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }                                /* a triangle */

/* My membership: the Direct Debit is a full-width fact under Membership, Status and Payment, so its sentence has room. */
.mem-fact--dd { grid-column: 1 / -1; }
.dd-checking { margin: 0 0 var(--sp-4); }

/* The set-up sheet: three short steps, then the one button. */
.dd-sheet { display: grid; gap: var(--sp-4); }
.dd-sheet__intro { margin: 0; font-weight: var(--fw-medium); color: var(--text); }
.dd-steps { list-style: none; counter-reset: dd; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.dd-steps li { counter-increment: dd; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; }
.dd-steps li::before {
  content: counter(dd); grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); background: var(--info-bg); color: var(--info-fg);
}
.dd-steps strong { font-weight: var(--fw-semibold); color: var(--text); }
.dd-steps span { color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.dd-sheet__note { margin: 0; font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }

/* The club's Payments screens and member page. */
.dd-note { display: block; font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.dd-note--bad { color: var(--bad-fg); }
.dd-line { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* "How members pay": a quiet reference card on Payments, closed by default. */
.pay-methods { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.pay-methods__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.pay-methods__line { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.pay-methods details > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent-text, var(--text)); min-height: 44px; display: flex; align-items: center; }
.pay-methods dl { margin: 0; display: grid; gap: var(--sp-3); }
.pay-methods dt { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.pay-methods dd { margin: 0; font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.pay-methods__check { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.pay-methods__check label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.pay-methods__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.pay-methods__result { margin: 0; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--neu-bg); color: var(--neu-fg); }
.pay-methods__result--ok { background: var(--ok-bg); color: var(--ok-fg); }
.pay-methods__result--cash { background: var(--info-bg); color: var(--info-fg); }

/* Needs action: members whose Direct Debit itself has failed or been cancelled, so they are not paying until it is set up again. */
.pay-group--dd .pay-item__what strong { color: var(--bad-fg); }

/* When members choose card or Direct Debit (Grant, 20 Oct 2026): the two ways to pay, each one large button with what it means. Neither
   is pushed: the same fee either way. */
.pay-choice__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pay-choice__btn { display: grid; gap: var(--sp-1); width: 100%; min-height: 64px; padding: var(--sp-4); text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); color: var(--text); font: inherit; }
.pay-choice__btn strong { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.pay-choice__btn span { color: var(--text-2); }
.pay-choice__btn:hover { border-color: var(--primary); }
.pay-choice__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }