*{box-sizing:border-box}
body{margin:0;background:#eef2f6;color:#1a1a1a;font:17px/1.5 Arial,Helvetica,sans-serif}
a{color:#003366}
.bar{display:flex;align-items:center;gap:10px;background:#003366;color:#fff;padding:12px 16px;font-weight:bold}
.bar__logo{border-radius:4px;background:#fff;flex:none}
.nav{display:flex;flex-wrap:wrap;gap:0 12px;align-items:center;max-width:720px;margin:0 auto;padding:6px 16px;font-size:15px}
/* Each link and Sign out a 44px tap target; "Sign out" never breaks over two lines. */
.nav a,.nav .link{color:#003366;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.nav a[aria-current=page]{font-weight:bold;text-decoration-thickness:3px}
.inline{display:inline;margin:0}
.link{font:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
main{max-width:720px;margin:0 auto;padding:16px;background:#fff}
@media(min-width:760px){main{margin:16px auto;border-radius:8px;padding:28px 32px;box-shadow:0 1px 3px rgba(0,0,0,.08)}}
h1{color:#003366;font-size:26px;line-height:1.25;margin:4px 0 12px;overflow-wrap:anywhere}
h2{color:#003366;font-size:20px;margin:24px 0 8px}
.stack{display:flex;flex-direction:column;gap:8px;margin:12px 0}
label{font-weight:bold}
input[type=text],input[type=email],input[type=tel],input[type=date],select{width:100%;max-width:100%;font:inherit;padding:12px;border:1px solid #8a96a6;border-radius:6px;background:#fff;color:inherit}
input:focus,button:focus,a:focus{outline:3px solid #f2b705;outline-offset:1px}
.button{display:inline-block;font:inherit;font-weight:bold;background:#003366;color:#fff;border:2px solid #003366;border-radius:6px;padding:12px 20px;
  cursor:pointer;text-decoration:none;text-align:center;min-height:48px}
.button--secondary{background:#fff;color:#003366}
.muted{color:#4a5a6e;font-size:15px}
.notice{border-left:4px solid #003366;background:#eef4fb;padding:10px 14px;margin:12px 0;border-radius:4px}
.notice--error{border-left-color:#b3261e;background:#fbeeee}
.notice--warning{border-left-color:#c98a00;background:#fff4d6}
.lines{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.line{border:1px solid #d5dbe3;border-radius:8px;padding:12px 14px}
.line__head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.facts{display:grid;grid-template-columns:1fr;gap:4px;margin:8px 0 0}
@media(min-width:480px){.facts{grid-template-columns:1fr 1fr}}
.facts dt{color:#4a5a6e;font-size:14px}.facts dd{margin:0}
.badge{display:inline-block;font-size:13px;font-weight:bold;border-radius:12px;padding:2px 10px}
.badge--current{background:#e3f2e8;color:#1e5b31}
.badge--due{background:#fff4d6;color:#7a5200}
.badge--lapsed{background:#f1f1f1;color:#4a4a4a}
.cf-turnstile{margin:8px 0;max-width:100%;overflow:hidden}
.foot{max-width:720px;margin:0 auto;padding:16px;color:#4a5a6e;font-size:14px;overflow-wrap:anywhere}
/* Hidden until the passkey script shows it: a class that sets display must not undo it. */
[hidden]{display:none!important}
.button[disabled],input[disabled]{opacity:.55;cursor:not-allowed}
/* MP3: contact details, the address search and licences. */
.stack--tight{gap:4px;margin:8px 0}
.facts--wide{grid-template-columns:1fr!important}
.facts dd{overflow-wrap:anywhere}
.suggestions{list-style:none;padding:0;margin:0;border:1px solid #d5dbe3;border-radius:6px}
.suggestion{display:block;width:100%;text-align:left;font:inherit;background:#fff;border:0;border-bottom:1px solid #eef2f6;padding:12px;cursor:pointer;color:inherit;min-height:48px}
.suggestion:hover{background:#eef4fb}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:normal}
.check input{width:22px;height:22px;flex:none;margin-top:2px}
fieldset{border:1px solid #d5dbe3;border-radius:6px;padding:8px 12px;margin:0;min-width:0}
legend{font-weight:bold;padding:0 4px}
.plain{list-style:none;padding:0;margin:0}
select{appearance:auto}
/* UI review: an error tied to the box it is about. */
.field-error{color:#b3261e;font-weight:bold;margin:0}
input[aria-invalid=true]{border-color:#b3261e;border-width:2px}
/* MP4: preferences and the forms, surveys and events page. */
.pref{margin:16px 0}
.pref legend{font-size:18px;color:#003366}
.pref__cell{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid #eef2f6}
.pref__cell:first-of-type{border-top:0}
.check--big{min-height:44px;align-items:center}
.check--big input{width:26px;height:26px;margin-top:0}
/* UI review: a cell that cannot be changed lines up with a switch, its note close beneath, and a card ends without a gap. */
.pref__cell p{margin:0}
.pref__state{min-height:44px;display:flex;align-items:center;gap:6px}
.line p:last-child{margin-bottom:0}