/* Membership module — extends styles.css (loaded first, supplies the colour tokens).
   Written unminified so text, spacing and colours stay easy to edit. */

.page-head{background:linear-gradient(135deg,#022d1b,#056b39 60%,#0a8b4f);color:#fff;padding:64px 0 72px}
.page-head h1{font-family:Arial Black,Arial,sans-serif;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.1;letter-spacing:-1.5px;margin:0 0 16px}
.page-head p{color:rgba(255,255,255,.88);max-width:640px;margin:0;font-size:1.06rem}

/* ---- tabs ---- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:-34px auto 0;position:relative;z-index:2}
.tab{flex:1 1 240px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:18px 22px;
     text-align:left;cursor:pointer;font:inherit;color:inherit;box-shadow:0 12px 30px rgba(0,0,0,.09);transition:border-color .15s,transform .15s}
.tab strong{display:block;font-size:1.02rem;color:var(--gd)}
.tab span{display:block;font-size:.84rem;color:#6b7280;margin-top:3px}
.tab[aria-selected="true"]{border-color:var(--g);transform:translateY(-2px)}
.tab[aria-selected="true"] strong{color:var(--g)}
.tab:hover{border-color:var(--g)}

/* ---- form shell ---- */
.form-wrap{padding:56px 0 90px}
.form-panel[hidden]{display:none}
fieldset{border:0;padding:0;margin:0 0 34px}
legend{font-family:Arial Black,Arial,sans-serif;font-size:1.18rem;color:var(--gd);margin-bottom:6px;padding:0}
.legend-note{color:#6b7280;font-size:.9rem;margin:0 0 20px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.span-2{grid-column:span 2}
.span-full{grid-column:1/-1}

/* min-width:0 stops a grid/flex child refusing to shrink below its intrinsic
   width, which is the usual cause of a form scrolling sideways on a phone. */
.field{display:flex;flex-direction:column;min-width:0}
.field label{font-weight:700;font-size:.88rem;margin-bottom:7px}
.field .opt{font-weight:400;color:#6b7280}
.req{color:#b42318}
.hint{font-size:.79rem;color:#6b7280;margin-top:6px}
.hint,.error,.legend-note{overflow-wrap:break-word}

/* line-height and min-height are set explicitly on all three: browsers size a
   <select> from its font-size and ignore line-height, so without this the
   dropdowns render several pixels shorter than the text inputs beside them. */
input,select,textarea{font:inherit}
/* Box model only for text-entry controls. Checkboxes and radios are excluded:
   min-height beats height, so including them would stretch the consent box to
   50px tall while leaving it 24px wide. */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
       line-height:1.45;color:var(--ink);background-color:#fff;
       border:1.5px solid var(--line);border-radius:9px;padding:12px 13px;width:100%;
       min-height:50px;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:88px;line-height:1.55}

/* Own chevron, so the control is the same height and shape on every browser. */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:40px;
       background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23056b39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
       background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
input:focus,select:focus,textarea:focus,.tab:focus-visible,.button:focus-visible{
       outline:none;border-color:var(--g);box-shadow:0 0 0 3px rgba(5,107,57,.18)}
.tab:focus-visible,.button:focus-visible{box-shadow:0 0 0 3px rgba(5,107,57,.35)}
/* background-COLOR only — the shorthand would wipe out the chevron image above. */
select:disabled,input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}
select:disabled{opacity:.7}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#b42318}
.error{display:none;color:#b42318;font-size:.8rem;margin-top:6px;font-weight:600}
.error.show{display:block}

/* phone with dial-code prefix */
.phone{display:flex;min-width:0}
.phone .dial{display:flex;align-items:center;padding:0 13px;background:var(--soft);border:1.5px solid var(--line);
       border-right:0;border-radius:9px 0 0 9px;font-weight:700;white-space:nowrap;min-width:74px;
       flex:0 0 auto;justify-content:center}
.phone input{border-radius:0 9px 9px 0;min-width:0}

/* consent + submit */
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--soft);border-left:6px solid var(--gold);
       border-radius:12px;padding:18px 20px;margin-bottom:26px}
/* 24px square is the minimum comfortable touch target (WCAG 2.5.8). */
.consent input{width:24px;height:24px;min-height:0;flex:0 0 auto;margin:1px 0 0;accent-color:var(--g)}
.consent label{font-size:.9rem;font-weight:400;line-height:1.55}
.actions-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
button.button{border:0;cursor:pointer;font-family:inherit;font-size:1rem}
button.button[disabled]{opacity:.6;cursor:progress}

/* messages */
.form-error{display:none;border-left:6px solid #b42318;background:#fef3f2;color:#912018;
       padding:16px 20px;border-radius:12px;margin-bottom:24px;font-size:.92rem}
.form-error.show{display:block}
.form-error ul{margin:8px 0 0;padding-left:20px}

.success{background:var(--soft);border-left:6px solid var(--g);border-radius:16px;padding:38px}
.success h2{font-family:Arial Black,Arial,sans-serif;color:var(--gd);margin:0 0 12px;font-size:1.7rem}
.success .ref{display:inline-block;background:var(--gd);color:var(--gold);font-weight:900;letter-spacing:2px;
       padding:12px 22px;border-radius:9px;margin:14px 0 20px;font-size:1.1rem}
.success .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.success .mailnote{background:#fff;border:1px dashed var(--g);border-radius:10px;padding:12px 16px;
       font-size:.88rem;color:var(--gd);overflow-wrap:break-word}
.success .mailnote:empty{display:none}

/* The site header is sticky and 82px tall, so anything the script scrolls or
   focuses — an invalid field, the error banner, the success panel — must keep
   clear of it or it lands underneath. */
input,select,textarea,.form-error,.success,.tabs{scroll-margin-top:98px}

/* ------------------------------------------------------------------ mobile */

/* Tablets and small laptops: three columns is too tight for these labels. */
@media(max-width:900px){
  .grid,.grid.two{grid-template-columns:repeat(2,1fr)}
  .span-2{grid-column:span 2}
  .page-head{padding:56px 0 66px}
  .form-wrap{padding:48px 0 76px}
}

/* Large phones and small tablets. */
@media(max-width:720px){
  .grid,.grid.two{grid-template-columns:1fr;gap:15px}
  .span-2,.span-full{grid-column:auto}
  .page-head{padding:44px 0 58px}
  .page-head p{font-size:1rem}
  .form-wrap{padding:40px 0 64px}
  fieldset{margin-bottom:28px}
  .success{padding:26px}
  .success h2{font-size:1.45rem}
  .success .actions .button{flex:1 1 100%;text-align:center}

  /* Full-width primary action — easier to hit with a thumb. */
  .actions-row{flex-direction:column;align-items:stretch;gap:12px}
  .actions-row .button{width:100%;text-align:center;padding:16px 22px}
  .actions-row .hint{text-align:center;margin-top:0}
}

/* Phones: turn the two tab cards into a segmented control so the form starts
   higher up the screen. The descriptions are dropped — the labels carry it. */
@media(max-width:560px){
  .tabs{gap:8px;margin-top:-24px}
  .tab{flex:1 1 0;min-width:0;padding:13px 10px;text-align:center;border-radius:12px;
       box-shadow:0 8px 20px rgba(0,0,0,.08)}
  .tab span{display:none}
  .tab strong{font-size:.9rem;line-height:1.3}
  .tab[aria-selected="true"]{transform:none;background:var(--soft)}

  .page-head{padding:38px 0 52px}
  .form-wrap{padding:34px 0 56px}
  legend{font-size:1.08rem}
  .legend-note{font-size:.86rem;margin-bottom:16px}
  .consent{padding:16px;gap:11px}
  .consent label{font-size:.86rem}
  .success{padding:22px;border-radius:14px}
  .success .ref{font-size:1rem;letter-spacing:1.5px;padding:11px 16px;word-break:break-all}
  .form-error{padding:14px 16px;font-size:.88rem}
}

/* Small phones (iPhone SE and similar, 320–380px). */
@media(max-width:400px){
  .tab strong{font-size:.84rem}
  .phone .dial{min-width:62px;padding:0 9px;font-size:.94rem}
  .field label{font-size:.85rem}
  input,select,textarea{padding:11px 12px}
  select{padding-right:36px;background-position:right 11px center}
  .success h2{font-size:1.3rem}
}

/* Stop iOS inflating text when a phone is rotated to landscape. */
@media(max-width:900px){
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
}

/* Fallback toggle for wards and polling units missing from INEC's register. */
.manual-toggle{display:flex;gap:10px;align-items:center;font-weight:500;cursor:pointer}
.manual-toggle input{width:20px;height:20px;min-height:0;flex:0 0 auto;margin:0;accent-color:var(--g)}

/* Type-to-filter polling unit picker. Some LGAs carry over a thousand units,
   which is unusable as a plain dropdown. */
.combo{position:relative}
.combo-list{position:absolute;z-index:30;top:100%;left:0;right:0;margin:4px 0 0;padding:4px;
  list-style:none;max-height:260px;overflow-y:auto;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.14)}
.combo-list li{padding:9px 11px;border-radius:7px;cursor:pointer;font-size:.95rem;line-height:1.35}
.combo-list li .code{display:block;font-size:.8rem;opacity:.6;font-variant-numeric:tabular-nums}
.combo-list li[aria-selected="true"],.combo-list li:hover{background:var(--soft)}
.combo-list .none{cursor:default;opacity:.7}
.combo-list .none:hover{background:none}
.combo-matched{margin:6px 0 0;font-size:.85rem;color:var(--g);font-weight:600}

/* ---- verification ---- */
/* Field, action and code box share one row, so the next thing to do is always
   where the last thing was. It wraps on narrow screens rather than shrinking the
   number field to something unusable. */
.control-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.control-row .phone{flex:1 1 220px;min-width:0;margin:0}
.control-row > input[type="email"]{flex:1 1 240px;min-width:0}

.verify-send,.verify-resend{font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
  padding:0 18px;border-radius:10px;border:2px solid var(--g);background:#fff;color:var(--g);
  white-space:nowrap;flex:0 0 auto}
.verify-send:hover:not(:disabled),.verify-resend:hover:not(:disabled){background:var(--g);color:#fff}
/* A disabled button here is the normal resting state, not an error — it is
   waiting for the field beside it. Muted, not alarming. */
.verify-send:disabled,.verify-resend:disabled{opacity:.5;cursor:not-allowed;
  border-color:var(--line);color:#6b7280;background:#fff}

.verify-entry{display:flex;gap:10px;align-items:stretch;flex:1 1 240px;min-width:0}
/* Wide, centred and spaced: a code read off a lock screen is checked against
   this box character by character. */
.verify-code{flex:1 1 auto;min-width:0;max-width:190px;text-align:center;letter-spacing:.42em;
  text-indent:.42em;font-weight:700;font-size:1.12rem;padding:12px 10px;
  border:2px solid var(--g);border-radius:10px;background:#fff}
.verify-code:focus{outline:none;box-shadow:0 0 0 3px rgba(4,30,19,.12)}
.verify-code:disabled{opacity:.6}
.verify-resend{font-size:.78rem;padding:0 13px}

/* The end state. A tick as well as the colour: roughly one man in twelve cannot
   rely on green alone to tell him this step is finished. */
.verify-done{display:inline-flex;align-items:center;gap:7px;padding:0 16px;border-radius:10px;
  background:#dcfce7;color:#166534;font-weight:700;font-size:.85rem;white-space:nowrap;flex:0 0 auto}
.verify-done::before{content:"\2713";font-size:1rem}

.verify{margin-top:7px}
.verify-status{font-size:.8rem;margin:0;color:#6b7280;min-height:1.15em;line-height:1.45}
.verify[data-state="verified"] .verify-status{color:var(--g);font-weight:700}
.verify[data-state="error"] .verify-status{color:#b91c1c;font-weight:700}
.verify[data-state="sending"] .verify-status,
.verify[data-state="checking"] .verify-status{color:var(--gd);font-weight:700}
/* While a code is outstanding the instruction is the most important text on the
   screen, so it stops looking like a hint. */
.verify[data-state="sent"] .verify-status{color:var(--gd);font-weight:700}

/* Says where in the sequence this field sits, so the order is visible rather
   than only implied by position. */
.step-tag{display:inline-block;font-family:Arial,sans-serif;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:20px;
  background:var(--g);color:#fff;margin-left:8px;vertical-align:middle}
.step-tag-soft{background:#e5e7eb;color:#4b5563}

.optional{font-family:Arial,sans-serif;font-size:.72rem;font-weight:400;color:#6b7280;
  text-transform:uppercase;letter-spacing:.06em;margin-left:8px;vertical-align:middle}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:560px){
  .control-row{gap:8px}
  .control-row .phone,.control-row > input[type="email"]{flex:1 1 100%}
  .verify-send,.verify-done{flex:1 1 100%;text-align:center;justify-content:center;padding:12px 18px}
  .verify-entry{flex:1 1 100%}
  .verify-code{max-width:none}
}

/* ---- donation amounts ---- */
.amount-presets{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.amount-preset{font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;padding:10px 16px;
  border-radius:10px;border:2px solid var(--line);background:#fff;color:var(--gd)}
.amount-preset:hover{border-color:var(--g);color:var(--g)}
/* The chosen amount is filled, not just outlined: an outline alone reads as
   hover on a touch screen, where there is no hover to distinguish it from. */
.amount-preset.is-on{background:var(--g);border-color:var(--g);color:#fff}

/* ---- donation: the transfer details ---- */
.pay-title{font-family:Arial Black,Arial,sans-serif;font-size:1.3rem;color:var(--gd);margin:0 0 18px}
.pay-subtitle{font-family:Arial Black,Arial,sans-serif;font-size:1.05rem;color:var(--gd);margin:0 0 6px}
.bank{margin:0 0 22px;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.bank-row{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  padding:13px 16px;border-bottom:1px solid var(--line)}
.bank-row:last-child{border-bottom:0}
.bank dt{flex:0 0 130px;font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#6b7280}
.bank dd{margin:0;font-weight:700;font-size:1rem;min-width:0;overflow-wrap:break-word}
/* Big and spaced: this gets read off a screen and typed into a banking app, and
   a transposed digit sends the money to a stranger. */
.bank-number{font-size:1.35rem;letter-spacing:.1em}

.copy{font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;margin-left:10px;
  padding:5px 11px;border-radius:7px;border:2px solid var(--line);background:#fff;color:var(--gd);
  text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.copy:hover{border-color:var(--g);color:var(--g)}
.copy.copied{background:var(--g);border-color:var(--g);color:#fff}

/* The reference is the one thing that makes a transfer reconcilable, so it is
   the loudest element in the panel. */
.reference-box{border:2px solid var(--gd);border-radius:12px;padding:18px;text-align:center;margin-bottom:18px}
.reference-label{margin:0 0 8px;font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:#6b7280}
.reference-value{margin:0 0 10px;font-size:1.25rem;font-weight:700;letter-spacing:.05em;color:var(--gd)}
.reference-why{margin:0;font-size:.82rem;color:#6b7280;line-height:1.55}

.rule{border:0;border-top:1px solid var(--line);margin:26px 0 22px}
.pay-footnote{margin-top:18px}
.ok-box{border:2px solid var(--g);border-radius:12px;padding:18px;background:#f0fdf4}
.ok-box p{margin:0;font-size:.95rem;line-height:1.6;color:var(--gd)}

@media (max-width:520px){
  .bank dt{flex:0 0 100%}
  .bank-number{font-size:1.2rem}
}

/* ============================ member portal =============================== */
/* member.html — looking up your own record and asking for a correction.

   These are separate from .form-error on purpose. That one is display:none
   until .show is added and is styled red, which is right for "you have got the
   form wrong" and wrong for "we sent you a code": it would be invisible until
   given a class the status line never gets, and alarming once it appeared. */

.member-note{margin:16px 0 0;font-size:.92rem;color:var(--gd);min-height:1.2em}
.member-note.error{color:#912018}
.member-note:empty{margin:0}

/* The record itself. A two-column list on a wide screen, stacked on a phone —
   most of these values (a polling unit, an address) are longer than a narrow
   column can hold without wrapping into nonsense. */
.member-details{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 24px;margin:22px 0 26px}
.member-details dt{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;margin-top:14px}
.member-details dd{margin:0;font-size:1rem;color:var(--gd);overflow-wrap:anywhere}

@media (min-width:640px){
  .member-details{grid-template-columns:minmax(140px,auto) minmax(0,1fr)}
  .member-details dt{margin-top:10px;align-self:baseline}
  .member-details dd{margin-top:10px}
}

#record h2,#correction h2{font-family:Arial Black,Arial,sans-serif;color:var(--gd);margin:0 0 6px;font-size:1.5rem}
#correction-fields{display:grid;gap:0;margin-top:18px}
#correction .button.outline.small,#verify .button.outline.small{margin-left:10px}

/* The way back in, for somebody who registered months ago and wants to check
   what we have. Sits under the intro rather than in the nav: the nav is for
   people who have not joined yet, and this is only meaningful once you have. */
.already-member{margin-top:14px;font-size:.95rem}
.already-member a{color:var(--gd);font-weight:700;text-decoration:underline}

/* The way back in, for somebody who registered months ago and wants to check
   what we hold. Under the intro rather than in the nav: the nav is for people
   who have not joined yet, and this only means anything once you have. */
.already-member{margin-top:14px;font-size:.95rem}
.already-member a{color:var(--gd);font-weight:700;text-decoration:underline}