/* =====================================================================
   RAFA Shrewsbury & District — design system
   Look & feel inspired by rafa.org.uk: sky blue, clean, charity-but-RAF.
   ===================================================================== */
:root{
  --brand:#0072CE;        /* RAF blue */
  --brand-dark:#005299;
  --sky:#00A3E0;          /* sky-blue accent */
  --navy:#0B2545;         /* headings / footer */
  --navy-soft:#13315c;
  --gold:#E8A800;         /* Wings / accent (used sparingly) */
  --red:#C8102E;          /* roundel red */
  --ink:#1c2733;
  --muted:#5b6b7b;
  --line:#e3eaf1;
  --bg:#f4f8fc;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 6px 24px rgba(11,37,69,.08);
  --shadow-lg:0 14px 40px rgba(11,37,69,.14);
  --maxw:1160px;
  --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--navy);line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.hide{display:none}
.section{padding:64px 0}
.section--tight{padding:40px 0}
.lead{font-size:1.2rem;color:var(--muted)}
.center{text-align:center}
.muted{color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--brand)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--brand);color:#fff;
  padding:.72em 1.3em;border-radius:999px;font-weight:700;border:0;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;font-size:1rem;text-decoration:none}
.btn:hover{background:var(--brand-dark);text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn--ghost:hover{background:var(--brand);color:#fff}
.btn--gold{background:var(--gold);color:#3a2c00}
.btn--gold:hover{background:#cf9700}
.btn--light{background:#fff;color:var(--brand)}
.btn--light:hover{background:#eef6ff;color:var(--brand-dark)}
.btn--sm{padding:.5em .95em;font-size:.9rem}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand:hover{text-decoration:none}
.brand img{width:88px;height:50px}
.brand b{display:block;color:var(--navy);font-size:1.02rem;line-height:1.1;font-weight:800}
.brand span{display:block;color:var(--muted);font-size:.78rem}
.nav-links{display:flex;gap:6px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--navy);font-weight:600;padding:.5em .8em;border-radius:8px;font-size:.96rem;text-align:center;white-space:nowrap}
.nav-links a:hover{background:#eaf3fb;text-decoration:none}
.nav-links a.active{color:var(--brand)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;transition:.2s}
@media(max-width:900px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;border-bottom:1px solid var(--line);padding:8px 14px 16px;
    box-shadow:var(--shadow);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:.8em .6em;border-radius:8px}
}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;background:
  radial-gradient(1200px 500px at 80% -10%,rgba(0,163,224,.55),transparent),
  linear-gradient(135deg,var(--navy) 0%,var(--brand-dark) 60%,var(--brand) 100%);
  overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:none;pointer-events:none}
.hero .container{position:relative;z-index:2;padding-top:80px;padding-bottom:84px;max-width:820px}
.hero h1{color:#fff}
.hero p{font-size:1.25rem;color:#dcebff;color:rgba(255,255,255,.9)}
.hero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-roundel{position:absolute;right:-60px;top:calc(50% - 30px);transform:translateY(-50%);
  width:380px;opacity:.18;z-index:1}
body.wings-appeal .hero-roundel{right:-3px}
body.wings-appeal .hero-reflection{position:absolute;right:-3px;top:calc(50% + 30px);width:380px;height:140px;
  background:url("../img/Wings_Appeal_Logo_Alpha.png") center top / contain no-repeat;
  transform:scaleY(-1);
  opacity: 0.35;filter:brightness(.85) saturate(0.75);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);
  pointer-events:none;z-index:0}
@media(max-width:700px){.hero-roundel{display:none}}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:840px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);transition:transform .14s ease,box-shadow .14s ease}
.card--link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card h3{margin-top:.2em}
.card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:#e8f3fc;color:var(--brand);margin-bottom:14px;font-size:1.4rem}
.card--accent{border-top:4px solid var(--brand)}

/* ---------- panels ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-pad{padding:28px}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
@media(max-width:840px){.split{grid-template-columns:1fr}}
.bg-white{background:#fff}
.notice{background:#fff7e6;border:1px solid #f3dca3;border-left:4px solid var(--gold);
  padding:16px 18px;border-radius:10px;color:#5b4a17}

/* ---------- diary ---------- */
.diary-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}
.diary-controls input,.diary-controls select{padding:.6em .8em;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:#fff}
.event{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);margin-bottom:14px}
.event__date{flex:0 0 78px;text-align:center;background:linear-gradient(160deg,var(--brand),var(--sky));
  color:#fff;border-radius:12px;padding:10px 6px;align-self:flex-start}
.event__date .d{font-size:1.7rem;font-weight:800;line-height:1}
.event__date .m{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.event__date .y{font-size:.7rem;opacity:.85}
.event__body{flex:1;min-width:0}
.event__body h3{margin:.1em 0 .3em}
.event__meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:.92rem;margin-bottom:.4em}
.event__meta span{display:inline-flex;align-items:center;gap:.4em}
.event__add{margin-top:.4em}
.month-head{margin:26px 0 12px;color:var(--brand);font-size:1rem;text-transform:uppercase;
  letter-spacing:.1em;font-weight:800;border-bottom:2px solid var(--line);padding-bottom:6px}
.empty{padding:40px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:var(--radius)}

/* subscribe bar */
.subbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);margin-bottom:26px}
.subbar .txt{margin-right:auto}
.subbar h3{margin:0 0 2px}
.subbar p{margin:0;color:var(--muted);font-size:.92rem}

/* ---------- documents ---------- */
.docfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{border:1px solid var(--line);background:#fff;color:var(--navy);padding:.45em 1em;border-radius:999px;
  cursor:pointer;font-weight:600;font-size:.9rem}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.doc{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:14px 18px;box-shadow:var(--shadow);margin-bottom:12px}
.doc__ico{flex:0 0 44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:#fdece1;color:var(--red);font-weight:800;font-size:.78rem}
.doc__ico.is-news{background:#e8f3fc;color:var(--brand)}
.doc__ico.is-min{background:#eafaf0;color:#1f8a4c}
.doc__main{flex:1;min-width:0}
.doc__main b{color:var(--navy);font-size:1.04rem}
.doc__main .meta{color:var(--muted);font-size:.86rem}
.tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.2em .6em;border-radius:6px;background:#eaf3fb;color:var(--brand-dark);margin-left:6px}

/* ---------- history timeline ---------- */
.timeline{position:relative;margin:30px 0;padding-left:30px}
.timeline::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--brand),var(--sky));border-radius:3px}
.tl-item{position:relative;margin-bottom:26px}
.tl-item::before{content:"";position:absolute;left:-28px;top:5px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--brand)}
.tl-year{font-weight:800;color:var(--brand);font-size:1.1rem}

/* ---------- contact ---------- */
.contact-grid{--contact-cols:4;--contact-gap:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--contact-gap);}
.contact-grid > *{flex:0 0 auto;width:calc((100% - (var(--contact-cols) - 1) * var(--contact-gap)) / var(--contact-cols));}
@media(max-width:1000px){.contact-grid{--contact-cols:3}}
@media(max-width:640px){.contact-grid{--contact-cols:2}}
@media(max-width:420px){.contact-grid{--contact-cols:1}}
.person{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.person .role{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);font-weight:700}
.person .name{font-weight:700;color:var(--navy)}
.person .ph{color:var(--muted);font-size:.9rem}
/* Committee card as a direct-contact button (Contact page, where the form exists) */
a.person--link{display:block;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
a.person--link:hover,a.person--link:focus-visible{border-color:var(--brand);box-shadow:0 8px 22px rgba(0,0,0,.10);transform:translateY(-2px);outline:none}
a.person--link .person__cta{display:inline-block;margin-top:.5em;font-size:.8rem;font-weight:700;color:var(--brand);opacity:.85}
a.person--link:hover .person__cta{opacity:1}

/* ---------- adaptive centered grid ----------
   Equal columns that drop 4 -> 3 -> 2 as the screen narrows.
   A partial last row (e.g. the final 2 of 8) is CENTRED, not left-aligned,
   because the row is a centred flex line rather than CSS-grid tracks.
   Usage:
     <div class="acgrid"> <div class="card">…</div> … </div>
   Optional: add acgrid--2up / acgrid--5up to change the widest column count.
*/
.acgrid{--cols:4;--acgap:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--acgap)}
.acgrid > *{flex:0 0 auto;width:calc((100% - (var(--cols) - 1) * var(--acgap)) / var(--cols));margin:0}
.acgrid--5up{--cols:5}
.acgrid--3up{--cols:3}
.acgrid--2up{--cols:2}
@media(max-width:1000px){
  .acgrid{--cols:3}
  .acgrid--5up{--cols:4}
  .acgrid--2up{--cols:2}
}
@media(max-width:640px){
  .acgrid{--cols:2}
  .acgrid--5up{--cols:2}
}
@media(max-width:420px){
  .acgrid{--cols:1}
  .acgrid--5up,.acgrid--3up,.acgrid--2up{--cols:1}
}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#c8d6e6;margin-top:40px}
.site-footer a{color:#cfe3f6}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;padding:54px 0 30px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:.8em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.5em}
.foot-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.foot-brand img{width:75px;height:101.25px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:.85rem;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* ---------- misc ---------- */
.kv{display:flex;gap:10px;margin-bottom:.5em}
.kv .k{flex:0 0 26px;color:var(--brand)}
.tablewrap{overflow:auto}
.career-table {width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;color:var(--ink);}
.career-table th,.career-table td {padding:.65rem .85rem;border:1px solid var(--line);vertical-align:top;text-align:left;}
.career-table th {background:#f4f8fc;color:var(--navy);font-weight:700;white-space:nowrap;}
.career-table tbody tr:nth-child(even){background:#f9fbff;}

.badge{display:inline-block;background:var(--red);color:#fff;font-size:.7rem;font-weight:700;
  padding:.18em .6em;border-radius:6px;vertical-align:middle}

/* ---------- members careers: neutralise legacy fixed WYSIWYG layout ---------- */
/* These pages were exported from an old 1024x768 canvas where the career table,
   notes and photos were absolutely positioned, causing the gallery to overlap
   them. Let everything flow normally and auto-size the container instead. */
body.members-careers #divMain{
  width:100% !important;max-width:1024px;height:auto !important;
  margin:0 auto;position:relative;padding:18px
}
body.members-careers #divMain [style*="position:absolute"]{
  position:static !important;left:auto !important;top:auto !important
}
/* legacy block boxes (table wrapper, notes) span the column and stack */
body.members-careers #divMain > div[style*="position:absolute"]{
  width:auto !important;height:auto !important;margin:0 auto 16px
}
/* stray inline station photos become small inline thumbnails */
body.members-careers #divMain img[style*="position:absolute"]{
  display:inline-block;margin:4px;vertical-align:top
}
body.members-careers #divMain > img, body.members-careers #divMain img{max-width:100%;height:auto}
body.members-careers .tablewrap{overflow:auto}
/* hide the old "last modified" date stamps from the WYSIWYG export */
body.members-careers #divMain div[style*="top:748px"]{display:none}

@media (max-width:900px){
  body.members-careers #divMain{padding:12px}
}

@media (max-width:700px){
  body.members-careers #divMain{padding:8px}
  body.members-careers #divMain img[style*="position:absolute"]{display:block;margin:0 auto 12px}
}

/* Members careers gallery: adaptive, centers partial rows */
.mc-gallery{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-start;margin:18px 0}
.mc-gallery img{flex:0 0 auto;width:96px;height:auto;align-self:flex-start;border-radius:6px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,0.04);background:#fff}
@media(min-width:900px){.mc-gallery img{width:110px}}
@media(min-width:1200px){.mc-gallery img{width:130px}}

.skip{position:absolute;left:-999px}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}

/* ---------- responsive adjustments ---------- */
@media(max-width:900px){
  .brand img{width:72px;height:40px}
  .container{padding:0 16px}
  .hero .container{padding-top:60px;padding-bottom:60px}
  .btn{padding:.6em .95em;font-size:.95rem}
}

@media(max-width:700px){
  .brand img{width:56px;height:32px}
  .nav-links{position:static;display:none}
  .nav-links.open{display:flex}
  .nav{padding:10px 0}
  .section{padding:36px 0}
  .card{padding:18px}
  .panel-pad{padding:18px}
  .foot-brand img{width:56px;height:76px}
  .hero .container{padding-top:48px;padding-bottom:48px}
  .hero h1{font-size:1.8rem}
}

@media(max-width:480px){
  html{font-size:15px}
  .brand b{font-size:.95rem}
  .brand span{font-size:.72rem}
  .nav-links a{font-size:.92rem;padding:.6em .5em}
  .grid{gap:16px}
  .section{padding:28px 0}
  .hero .container{padding-top:40px;padding-bottom:40px}
  .hero-roundel{width:240px}
  body.wings-appeal .hero-reflection{width:240px;height:100px;top:calc(50% + 60px);right:8px}
  .foot-grid{gap:20px;padding:36px 0 20px}
  .foot-bottom{font-size:.8rem;gap:8px}
  .event{flex-direction:column}
  .event__date{flex:0 0 auto;margin-bottom:10px}
}

/* =====================================================================
   MEMBERS AREA — subtle red scheme (vs blue public site).
   Applied by adding class="members-area" to <body> on members pages.
   It only re-points the existing colour tokens, so every component
   (header, hero, cards, buttons, footer) turns red automatically.
   ===================================================================== */
body.members-area{
  --brand:#C8102E;        /* RAFA red */
  --brand-dark:#9b0c23;
  --sky:#e8556b;
  --navy:#4d1018;         /* deep red for headings/hero/footer */
  --navy-soft:#5e1722;
  --bg:#fdf6f7;           /* faint red-tinted page background */
  --line:#f0dbe0;
}
body.members-area .ico,
body.members-area .card .ico{background:#fde9ec;color:var(--brand)}
body.members-area .doc__ico{background:#fde9ec;color:var(--brand)}
body.members-area .doc__ico.is-news{background:#fdeef0;color:var(--brand-dark)}
body.members-area .doc__ico.is-min{background:#fbe7ea;color:#9b0c23}
body.members-area .tag{background:#fde9ec;color:var(--brand-dark)}

/* Members menu item — red pill, shown red even on the blue public pages */
.nav-links a.nav-members{background:var(--red);color:#fff;border-radius:999px;
  padding:.5em 1.05em;font-weight:800;display:inline-flex;align-items:center;gap:.4em}
.nav-links a.nav-members::before{content:"\1F512";font-size:.92em;line-height:0} /* lock */
.nav-links a.nav-members:hover{background:#9b0c23;color:#fff;text-decoration:none}
.nav-links a.nav-members.active{background:#9b0c23}
@media(max-width:900px){
  .nav-links a.nav-members{justify-content:flex-start;border-radius:10px}
}

/* ---- Members-area top bar: fast in-area nav, boxed in red ---- */
body.members-area .site-header{border-bottom:3px solid var(--brand);background:rgba(255,247,248,.96)}
body.members-area .nav-links{border:1.5px solid var(--brand);border-radius:12px;padding:4px;gap:4px;background:#fff}
body.members-area .nav-links a{color:var(--brand-dark);font-weight:700}
body.members-area .nav-links a:hover{background:#fde9ec}
body.members-area .nav-links a.active{background:var(--brand);color:#fff}
body.members-area .nav-links a.nav-signout{color:#9b0c23}
/* On the mobile hamburger dropdown, drop the pill box — use a clean red-topped
   dropdown with the standard spacing so it reads as a proper menu. */
@media(max-width:900px){
  body.members-area .nav-links{border:0;border-radius:0;padding:8px 14px 16px;gap:4px}
  body.members-area .nav-links a.active{border-radius:8px}
}

/* Members auth pages: tidy centred card */
.auth-wrap{max-width:440px;margin:0 auto;padding:0 20px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:30px 28px;margin-top:8px}
.auth-card h1{font-size:1.6rem}
/* "New here?" call-to-action card (sign-in + sign-up pages) */
.help-cta{display:flex;align-items:center;gap:.85em;text-decoration:none;background:transparent;border:2px solid var(--brand);border-radius:14px;padding:14px 16px;margin:.2em 0 18px;transition:background .12s,transform .12s,box-shadow .12s}
.help-cta:hover{background:#fff4f6;transform:translateY(-1px);box-shadow:var(--shadow)}
.help-cta__i{font-size:1.7rem;flex:none;line-height:1}
.help-cta__txt b{display:block;font-size:1.05rem;color:var(--navy)}
.help-cta__txt span{display:block;font-size:.9rem;color:var(--muted);margin-top:2px}
.help-cta__arrow{margin-left:auto;font-size:1.5rem;font-weight:800;color:var(--brand);flex:none}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-weight:700;color:var(--navy);font-size:.9rem;margin-bottom:.35em}
/* Full-width applies to text-like inputs only — never checkboxes/radios,
   which must keep their natural size (otherwise they stretch and squash
   their label text). */
.auth-field input:not([type="checkbox"]):not([type="radio"]){width:100%;border:1px solid var(--line);border-radius:10px;padding:.7em .85em;font:inherit;background:#fff}
.auth-field input:not([type="checkbox"]):not([type="radio"]):focus{outline:2px solid var(--brand);outline-offset:1px}
.auth-actions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;margin:18px 0;text-transform:uppercase;letter-spacing:.08em}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-msg{border-radius:10px;padding:.7em .9em;font-size:.92rem;margin-bottom:14px;display:none}
.auth-msg.show{display:block}
.auth-msg.err{background:#fdeaea;border:1px solid #f3c4c4;color:#9b0c23}
.auth-msg.ok{background:#eafaf0;border:1px solid #bfe6cd;color:#1f7a44}
.auth-meta{font-size:.86rem;color:var(--muted);text-align:center;margin-top:16px}
/* Sign in / Create — an obvious segmented tab control */
.auth-tabs{display:flex;border:2px solid var(--brand);border-radius:12px;overflow:hidden;margin:0 0 22px}
.auth-tab{flex:1;text-align:center;padding:.78em .8em;font-weight:800;font-size:1rem;color:var(--brand);background:#fff;letter-spacing:.01em}
.auth-tab + .auth-tab{border-left:2px solid var(--brand)}
.auth-tab:hover{text-decoration:none;background:#fde9ec}
.auth-tab.active{background:var(--brand);color:#fff}
.auth-tab.active:hover{background:var(--brand-dark);color:#fff}
/* dashed divider between the two sign-in steps */
.auth-step-divider{border:0;border-top:1px dashed var(--line);margin:22px 0}
/* step 2 is visible but dimmed & locked until the password step is done */
.step-inactive{opacity:.5}
/* disabled buttons: obvious grey */
.btn:disabled,.btn[disabled]{background:#cfd3d9;border-color:#cfd3d9;color:#6b7078;cursor:not-allowed;box-shadow:none}
/* "Done" state for the Sign-in button — overrides the disabled grey */
.btn--done,.btn--done:disabled,.btn--done[disabled]{background:#1f7a44;border-color:#1f7a44;color:#fff;cursor:default;box-shadow:none}
.method-pick{display:grid;gap:12px;margin-top:10px}
.method{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;cursor:pointer;background:#fff;text-align:left;width:100%;font:inherit}
.method:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.method.selected{border-color:var(--brand);background:#fff4f6;box-shadow:inset 0 0 0 2px var(--brand)}
.method .mi{font-size:1.5rem;line-height:1}
.method b{color:var(--navy);display:block}
.method.selected b{color:var(--brand)}
.method.selected b::after{content:" ✓";font-weight:800}
.method span{color:var(--muted);font-size:.88rem}
.members-lock-note{display:inline-flex;align-items:center;gap:.45em;background:#fde9ec;color:#9b0c23;
  border-radius:999px;padding:.3em .8em;font-size:.8rem;font-weight:700}

/* ---------- Back button (header, top-left) ---------- */
.nav-back{display:inline-flex;align-items:center;gap:.3em;background:#eef5fc;color:var(--brand-dark);
  border:1px solid var(--line);border-radius:999px;padding:.42em .9em;font:inherit;font-weight:700;
  font-size:.9rem;line-height:1;cursor:pointer;margin-right:10px;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.nav-back:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.nav-back span{font-size:1.2em;line-height:0}
@media(max-width:480px){.nav-back{padding:.42em .7em}}

/* ---------- external links: visually distinct + new-tab cue ---------- */
a.ext-link::after{content:"\2197";font-size:.78em;margin-left:.18em;line-height:0;
  display:inline-block;opacity:.85;font-weight:700}
.nav-links a.ext-link::after,.brand.ext-link::after{content:none} /* keep nav/brand clean */

/* ---------- "leaving the site" alert modal ---------- */
.extmodal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;
  background:rgba(11,37,69,.55);animation:extfade .14s ease}
@keyframes extfade{from{opacity:0}to{opacity:1}}
.extmodal__box{background:#fff;border-radius:16px;max-width:430px;width:100%;padding:28px;
  box-shadow:var(--shadow-lg);text-align:center;animation:extpop .16s ease}
@keyframes extpop{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}
.extmodal__ico{width:54px;height:54px;border-radius:50%;background:#e8f3fc;color:var(--brand);
  display:grid;place-items:center;font-size:1.5rem;font-weight:800;margin:0 auto 12px}
.extmodal__box h3{margin:.1em 0 .5em}
.extmodal__box p{margin:.3em 0}
.extmodal__url{font-weight:800;color:var(--navy);background:#f4f8fc;border:1px solid var(--line);
  border-radius:8px;padding:.5em .8em;word-break:break-all}
.extmodal__btns{display:flex;gap:10px;justify-content:center;margin-top:20px}
.extmodal__btns .btn{flex:0 1 auto}
@media(max-width:430px){.extmodal__btns{flex-direction:column-reverse}.extmodal__btns .btn{width:100%}}