/* Panjabi Sports & Social Club - premium members dashboard, events and calendar.
   Loaded on top of style.css. */

:root{
  --pro-grad:linear-gradient(135deg,#1049a9 0%,#0d2350 55%,#c8102e 140%);
  --pro-grad-soft:linear-gradient(135deg,#eef3ff 0%,#f7f9fe 60%,#fdf0f2 100%);
  --pro-ring:0 0 0 1px rgba(16,73,169,.08);
  --pro-sh:0 18px 44px -28px rgba(13,35,80,.55);
  --pro-sh-lg:0 30px 70px -36px rgba(13,35,80,.6);
}

/* ---------- wide members shell ---------- */
.m-wrap.wide{max-width:1140px}
.m-wrap.wide .m-card{padding:26px}

/* ---------- hero ---------- */
.dash-hero{position:relative;overflow:hidden;border-radius:22px;background:var(--pro-grad);color:#fff;
  padding:30px 32px;margin:0 0 22px;box-shadow:var(--pro-sh-lg)}
.dash-hero::after{content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
.dash-hero::before{content:"";position:absolute;left:-60px;bottom:-140px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(200,16,46,.35),rgba(200,16,46,0) 70%)}
.dash-hero>*{position:relative;z-index:1}
.dash-hero .eyebrow{color:#fff;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;opacity:.82;margin:0 0 8px}
.dash-hero h1{color:#fff;font-size:clamp(1.6rem,3.6vw,2.3rem);margin:0 0 6px;letter-spacing:-.01em}
.dash-hero p.sub{color:rgba(255,255,255,.86);margin:0;font-size:.96rem;max-width:62ch}
.dash-top{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.dash-top .who-big{margin-left:auto;display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);padding:10px 14px;border-radius:16px;backdrop-filter:blur(6px)}
.dash-top .who-big .avatar{background:#fff;color:#0d2350}
.dash-top .who-big b{display:block;font-size:.95rem;line-height:1.2}
.dash-top .who-big small{display:block;font-size:.74rem;opacity:.85;letter-spacing:.04em}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero-actions a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:.88rem;
  padding:11px 18px;border-radius:999px;background:#fff;color:#0d2350;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease}
.hero-actions a.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
.hero-actions a:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.6)}
.hero-actions a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:0 0 22px}
.stat{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;
  box-shadow:var(--pro-sh);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.stat:hover{transform:translateY(-3px);box-shadow:var(--pro-sh-lg)}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--pro-grad)}
.stat.red::before{background:linear-gradient(180deg,#c8102e,#7a0a1c)}
.stat.green::before{background:linear-gradient(180deg,#16a34a,#0f6f34)}
.stat.amber::before{background:linear-gradient(180deg,#d97706,#92400e)}
.stat .k{display:flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:var(--muted);margin:0 0 6px}
.stat .k svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat .v{display:block;font-size:1.9rem;font-weight:800;color:var(--navy);line-height:1.05;letter-spacing:-.02em}
.stat .v small{display:block;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:5px;line-height:1.4}
.stat a.more{position:absolute;inset:0;text-indent:-9999px;overflow:hidden}

/* ---------- quick action grid ---------- */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.qa{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);border-radius:16px;
  background:#fff;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.qa:hover{transform:translateY(-2px);box-shadow:var(--pro-sh);border-color:#cfdaee}
.qa .ic{flex:none;width:38px;height:38px;border-radius:12px;background:var(--pro-grad-soft);border:1px solid #e2e9f7;
  display:flex;align-items:center;justify-content:center}
.qa .ic svg{width:19px;height:19px;fill:none;stroke:#1049a9;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qa.red .ic{background:#fdeef0;border-color:#f6ccd3}
.qa.red .ic svg{stroke:#c8102e}
.qa b{display:block;color:var(--navy);font-size:.94rem;line-height:1.3}
.qa small{display:block;color:var(--muted);font-size:.79rem;line-height:1.45;margin-top:2px}
.qa .n{margin-left:auto;flex:none;background:var(--red);color:#fff;font-size:.7rem;font-weight:800;
  border-radius:999px;padding:2px 8px;align-self:center}

/* ---------- section headings inside the dashboard ---------- */
.dash-h{display:flex;align-items:center;gap:12px;margin:26px 0 12px}
.dash-h h2{margin:0;font-size:1.12rem;letter-spacing:-.01em}
.dash-h .line{flex:1;height:1px;background:var(--line)}
.dash-h a{font-size:.84rem;font-weight:700;text-decoration:none;white-space:nowrap}

/* ---------- next event strip ---------- */
.next-ev{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border:1px solid #dbe5f6;border-radius:18px;
  padding:18px 20px;background:var(--pro-grad-soft);box-shadow:var(--pro-sh)}
.next-ev .cal{flex:none;width:66px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:8px 0;box-shadow:var(--sh-1)}
.next-ev .cal b{display:block;font-size:1.5rem;font-weight:800;color:var(--navy);line-height:1}
.next-ev .cal i{display:block;font-style:normal;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--red);margin-top:2px}
.next-ev .cal u{display:block;text-decoration:none;font-size:.66rem;color:var(--muted);font-weight:700}
.next-ev .txt{flex:1 1 260px;min-width:0}
.next-ev .txt b{display:block;color:var(--navy);font-size:1.05rem}
.next-ev .txt small{display:block;color:var(--body);font-size:.86rem;margin-top:2px}

/* ---------- event cards ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.ev-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--pro-sh);transition:transform .2s ease,box-shadow .2s ease}
.ev-card:hover{transform:translateY(-3px);box-shadow:var(--pro-sh-lg)}
.ev-card .shot{display:block;aspect-ratio:16/10;background:var(--pro-grad-soft);position:relative;overflow:hidden}
.ev-card .shot img{width:100%;height:100%;object-fit:cover;display:block}
.ev-card .shot .none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ev-card .shot .none svg{width:54px;height:54px;fill:none;stroke:#b9c8e4;stroke-width:1.3}
.ev-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.ev-card h3{margin:0;font-size:1.05rem;line-height:1.3}
.ev-card h3 a{text-decoration:none;color:var(--navy)}
.ev-card h3 a:hover{color:var(--blue)}
.ev-card .meta{font-size:.82rem;color:var(--muted);margin:0;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.ev-card p.sum{margin:2px 0 0;font-size:.9rem;color:var(--body);line-height:1.55}
.ev-card .foot{margin-top:auto;padding-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ev-kind{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#1049a9;background:#eef3ff;border:1px solid #d5e2fb;border-radius:999px;padding:3px 10px}
.ev-kind.camp{color:#c8102e;background:#fdeef0;border-color:#f6ccd3}
.ev-badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:3px 10px;
  background:var(--soft);border:1px solid var(--line);color:var(--body)}
.ev-badge.draft{background:#fff7e6;border-color:#f3ddb0;color:#92400e}
.ev-badge.feat{background:#eef3ff;border-color:#c8d9f7;color:#1049a9}
.ev-badge.aud{background:#f3f0ff;border-color:#ddd6fe;color:#5b21b6}
.ev-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:58px;
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:7px 0;line-height:1.1;box-shadow:var(--sh-1)}
.ev-chip b{font-size:1.25rem;font-weight:800;color:var(--navy)}
.ev-chip i{font-style:normal;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--red)}
.ev-chip u{text-decoration:none;font-size:.6rem;color:var(--muted);font-weight:700}

/* ---------- event list rows ---------- */
.ev-rows{display:flex;flex-direction:column;gap:10px}
.ev-row{display:flex;gap:14px;align-items:center;padding:13px 15px;border:1px solid var(--line);border-radius:15px;
  background:#fff;transition:box-shadow .18s ease,border-color .18s ease}
.ev-row:hover{box-shadow:var(--pro-sh);border-color:#cfdaee}
.ev-row .txt{flex:1;min-width:0}
.ev-row .txt b{display:block;font-size:.98rem;color:var(--navy)}
.ev-row .txt b a{text-decoration:none;color:inherit}
.ev-row .txt small{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.ev-row .act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- calendar ---------- */
.cal-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.cal-head h2{margin:0;font-size:1.25rem}
.cal-nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.cal-nav a,.cal-nav span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 12px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--navy);
  text-decoration:none;font-weight:700;font-size:.85rem}
.cal-nav a:hover{background:var(--soft);border-color:#cfdaee}
.cal-nav a.now{background:var(--navy);color:#fff;border-color:var(--navy)}
.cal-wrap{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--pro-sh)}
.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);background:var(--soft);border-bottom:1px solid var(--line)}
.cal-dows span{padding:9px 6px;text-align:center;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:800;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-cell{min-height:104px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 7px 9px;
  display:flex;flex-direction:column;gap:4px;background:#fff}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell.out{background:#fcfdff;color:#aab7cd}
.cal-cell.out .d{color:#b6c2d6}
.cal-cell.today{background:linear-gradient(180deg,#eef3ff,#fff)}
.cal-cell .d{font-size:.78rem;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:5px}
.cal-cell.today .d{color:#1049a9}
.cal-cell.today .d::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.cal-ev{display:block;text-decoration:none;font-size:.73rem;line-height:1.25;font-weight:700;color:#0d2350;
  background:#eef3ff;border:1px solid #d5e2fb;border-left:3px solid #1049a9;border-radius:7px;padding:3px 6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev:hover{background:#e2ebff}
.cal-ev.camp{background:#fdeef0;border-color:#f6ccd3;border-left-color:#c8102e;color:#7a0a1c}
.cal-ev.cleanup{background:#eefaf1;border-color:#c7e9d3;border-left-color:#16a34a;color:#14532d}
.cal-ev.draft{background:#fff7e6;border-color:#f3ddb0;border-left-color:#d97706;color:#92400e}
.cal-more{font-size:.68rem;color:var(--muted);font-weight:700}
@media(max-width:760px){
  .cal-cell{min-height:74px;padding:5px 4px 6px}
  .cal-ev{font-size:.62rem;padding:2px 4px}
  .cal-dows span{font-size:.6rem}
}

/* ---------- legend ---------- */
.cal-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0 0;font-size:.78rem;color:var(--muted)}
.cal-legend i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:6px;vertical-align:-1px}

/* ---------- photo album ---------- */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.album figure{margin:0;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--soft)}
.album figure img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .3s ease}
.album figure:hover img{transform:scale(1.05)}
.album figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 7px;font-size:.72rem;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));line-height:1.35}
.album .rm{position:absolute;top:6px;right:6px}
.album .rm button{border:0;background:rgba(15,27,51,.78);color:#fff;border-radius:9px;font-size:.7rem;font-weight:700;
  padding:4px 8px;cursor:pointer}
.album .rm button:hover{background:#c8102e}
.album .setc{position:absolute;top:6px;left:6px}
.album .setc button{border:0;background:rgba(255,255,255,.9);color:#0d2350;border-radius:9px;font-size:.68rem;
  font-weight:800;padding:4px 8px;cursor:pointer}
.album .setc button:hover{background:#fff}
.album figure.is-cover{outline:3px solid #1049a9;outline-offset:-3px}

/* ---------- forms in the committee event editor ---------- */
.ev-form .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.ev-form .field label{display:block;font-size:.78rem;font-weight:800;letter-spacing:.04em;color:var(--navy);margin:0 0 5px}
.ev-form input[type=text],.ev-form input[type=date],.ev-form input[type=time],.ev-form input[type=url],
.ev-form input[type=file],.ev-form select,.ev-form textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:11px;font:inherit;font-size:.92rem;background:#fff;color:var(--ink)}
.ev-form textarea{resize:vertical;line-height:1.6}
.ev-form input:focus,.ev-form select:focus,.ev-form textarea:focus{outline:2px solid #b9cdf3;outline-offset:1px;border-color:#9dbaee}
.ev-form .hint{display:block;font-size:.77rem;color:var(--muted);margin-top:4px;line-height:1.45}
.ev-form .row-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}

/* ---------- misc ---------- */
.pro-note{border:1px dashed #cfdaee;background:#fbfcff;border-radius:14px;padding:14px 16px;font-size:.87rem;color:var(--body)}
.mini-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--navy);font-size:.8rem;font-weight:700;text-decoration:none;cursor:pointer}
.mini-btn:hover{background:var(--soft);border-color:#cfdaee}
.mini-btn.danger{color:#c8102e;border-color:#f0c9d0}
.mini-btn.danger:hover{background:#fdeef0}
.mini-btn.solid{background:var(--navy);color:#fff;border-color:var(--navy)}
.mini-btn.solid:hover{background:#1049a9}
@media(max-width:640px){
  .dash-hero{padding:24px 20px;border-radius:18px}
  .dash-top .who-big{margin-left:0}
}


/* ==========================================================================
   v28 - calendar in a right-hand rail, listings that follow the picture
   ========================================================================== */
.ev-layout{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:34px;align-items:start}
.ev-main{min-width:0}
.ev-rail{position:sticky;top:92px;display:flex;flex-direction:column;gap:18px;min-width:0}
.rail-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 26px rgba(13,35,80,.06);padding:16px 16px 15px}
.cal-card .cal-head{margin:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.cal-card .cal-head h2{font-size:1.06rem;margin:0;white-space:nowrap}
.cal-card .cal-nav{margin-left:auto;display:flex;gap:4px}
.cal-card .cal-nav a{padding:5px 9px;font-size:.74rem;border-radius:9px}
.cal-wrap.compact{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal-wrap.compact .cal-dows span{font-size:.62rem;padding:6px 0;letter-spacing:.04em}
.cal-wrap.compact .cal-cell{min-height:46px;padding:4px 3px 6px}
.cal-wrap.compact .cal-cell .d{font-size:.72rem}
.cal-wrap.compact .cal-cell.has{background:#f6f9ff}
.cal-wrap.compact .cal-cell.has .d{font-weight:800;color:var(--navy)}
.cal-wrap.compact .cal-ev{display:block;height:5px;margin:3px 1px 0;padding:0;border-radius:3px;font-size:0;line-height:0;overflow:hidden;text-indent:-9999px;background:#1049a9;border:0}
.cal-wrap.compact .cal-ev.camp{background:#c8102e}
.cal-wrap.compact .cal-ev.cleanup{background:#16a34a}
.cal-wrap.compact .cal-ev:hover{filter:brightness(1.25)}
.cal-wrap.compact .cal-more{display:block;font-size:.57rem;color:var(--muted);margin-top:3px;text-align:center}
.cal-card .cal-legend{margin:12px 2px 0;font-size:.72rem;gap:8px 14px}
.rail-note h3{margin:0 0 6px;font-size:1.02rem;color:var(--navy)}
.rail-note p{margin:0 0 6px;font-size:.88rem;line-height:1.55}
.rail-links{display:flex;flex-direction:column;gap:6px;margin:12px 0 0 !important}
.rail-links a{font-size:.86rem;font-weight:700;text-decoration:none;color:var(--navy);padding:9px 12px;border-radius:11px;background:var(--soft)}
.rail-links a:hover{background:#eaf0fa}
.ev-sec2{margin-top:48px}

/* event cards size themselves to the photo instead of cropping it */
.ev-grid.flow{display:block;column-width:290px;column-count:auto;column-gap:22px}
.ev-grid.flow .ev-card{display:inline-block;width:100%;margin:0 0 22px;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
.ev-grid.flow .ev-card .shot{aspect-ratio:auto;height:auto;min-height:0;display:block;background:var(--soft);overflow:hidden}
.ev-grid.flow .ev-card .shot img{width:100%;height:auto;max-height:none;object-fit:contain;display:block;transform:none}
.ev-grid.flow .ev-card:hover .shot img{transform:none}
.ev-grid.flow .ev-card .shot .none{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}

/* dashboard: pages that live outside the menus */
.side-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.side-links a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--soft);color:var(--navy);font-weight:600;font-size:.9rem;text-decoration:none}
.side-links a:hover{background:#eaf0fa}
.side-links svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.65;flex:none}
.m-app .lede{margin-left:0;margin-right:0;max-width:68ch}

@media(max-width:1180px){.ev-layout{grid-template-columns:minmax(0,1fr) 292px;gap:26px}}
@media(max-width:980px){
  .ev-layout{grid-template-columns:minmax(0,1fr);gap:26px}
  .ev-rail{position:static;order:-1}
  .cal-card .cal-head h2{font-size:1.15rem}
}
@media(max-width:700px){.ev-grid.flow{column-width:auto;column-count:1}}

/* --- pictures at a decent size, never cropped --- */
.ev-hero-shot{margin:0 0 26px;cursor:zoom-in}
.ev-hero-shot img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--sh-2)}
.ev-hero-shot figcaption{margin-top:9px;font-size:.8rem;color:var(--muted);text-align:center}
/* v64 - every photo album is the same uniform grid of 4, square crops, on every page */
.album,.album.flow,.album-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;column-count:auto;column-width:auto}
.album figure,.album.flow figure,.album-4 figure{display:block;width:auto;margin:0;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--soft)}
.album figure img,.album.flow figure img,.album-4 figure img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in;transition:transform .35s ease,opacity .2s ease}
.album figure:hover img,.album.flow figure:hover img,.album-4 figure:hover img{transform:scale(1.05);opacity:1}
.album figcaption,.album.flow figcaption,.album-4 figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 9px;font-size:.78rem;line-height:1.35;color:#fff;background:linear-gradient(to top,rgba(9,17,38,.8),rgba(9,17,38,0))}
.album a,.album.flow a,.album-4 a{display:block}
@media(max-width:1000px){.album,.album.flow,.album-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.album,.album.flow,.album-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.shot-hint{margin:-14px 0 26px;font-size:.82rem;color:var(--muted);text-align:center}
/* --- phone polish for the members' area --- */
@media(max-width:560px){
  .dash-hero{padding:22px 18px}
  .dash-hero h1{font-size:1.6rem;line-height:1.15}
  .dash-hero p.sub{font-size:.94rem}
  .dash-top{flex-direction:column;align-items:flex-start;gap:14px}
  .dash-top .who-big{width:100%}
  .hero-actions{width:100%}
  .hero-actions a{flex:1 1 auto;justify-content:center}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .stat{padding:14px 15px}
  .stat .v{font-size:1.6rem}
  .qa-grid{grid-template-columns:minmax(0,1fr)}
  .next-ev{padding:16px;gap:12px}
  .next-ev>div[style]{margin-left:0 !important;width:100%}
  .ev-form .grid3{grid-template-columns:minmax(0,1fr)}
  .row-btns{flex-wrap:wrap}
  .row-btns .cta,.row-btns .mini-btn{flex:1 1 auto;justify-content:center}
  .cal-card .cal-head{flex-wrap:wrap}
  .cal-card .cal-nav{margin-left:0}
  .side-links{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  .ev-row{flex-wrap:wrap;gap:10px 12px;padding:13px 14px}
  .ev-row .txt{flex:1 1 170px}
  .ev-row .act{flex:1 1 100%;justify-content:flex-start}
  .ev-row .txt b{font-size:1rem;line-height:1.3}
}

/* ==========================================================================
   v45 - fees page: receipts get the full width, the guidance sits underneath.
   A wide table in a two-column page also scrolls in its own column now; before
   this it overflowed right and the sticky rail painted over the last column.
   ========================================================================== */
@media(min-width:1001px){
.m-app .m-layout .table-scroll,
.m-app .ev-layout .table-scroll{overflow-x:auto;overscroll-behavior-x:contain}
}
.fee-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin:30px 0 0;align-items:start}
.fee-help .rail-card{padding:17px 19px 16px}

/* ---- v47 : digital ID -- card and counter QR side by side ---- */
.m-app .id-two{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;margin:0 0 26px}
.m-app .id-two .idcard-wrap{max-width:100%;margin:0 0 18px}
.m-app .id-two .card-actions{margin:0}
.m-app .id-two .scanbox{max-width:100%;margin:0}
.m-app .id-two .sb-qr svg{width:100%;max-width:250px;height:auto}
@media(min-width:760px){.m-app .id-two{grid-template-columns:minmax(0,1fr) 300px;gap:24px}}
@media(min-width:1240px){.m-app .id-two{grid-template-columns:minmax(0,1fr) 330px;gap:28px}}

/* ---------- v48 : scannable membership QR ---------- */
.m-app .id-two .scanbox .sb-qr{display:block;width:100%;max-width:300px;margin:0 auto 12px;padding:0;border:0;background:#fff;border-radius:14px;cursor:pointer;line-height:0;-webkit-appearance:none;appearance:none}
.m-app .id-two .scanbox .sb-qr svg{display:block;width:100%;height:auto;max-width:300px}
.m-app .id-two .scanbox .sb-qr:focus-visible{outline:3px solid #1049a9;outline-offset:3px}
.sb-hint{margin:10px 0 0;font-size:.82rem;line-height:1.45;color:#5b6b86;text-align:center}
body.qr-open{overflow:hidden}
.qrfull{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center;padding:18px}
.qrfull[hidden]{display:none}
.qrfull-in{width:100%;max-width:620px;text-align:center}
.qf-qr svg{display:block;width:min(88vw,70vh);height:auto;margin:0 auto}
.qf-code{margin:16px 0 6px;font-size:1.5rem;font-weight:800;letter-spacing:.24em;color:#0d2350}
.qf-name{margin:0 0 10px;color:#33465f;font-weight:600}
.qf-stat{margin:0 0 18px}
.qf-note{margin:16px auto 0;max-width:430px;font-size:.8rem;line-height:1.5;color:#6b7a91}
@media (max-width:760px){.m-app .id-two .scanbox .sb-qr,.m-app .id-two .scanbox .sb-qr svg{max-width:340px}}
/* ---------- v50 : on a phone the scan code comes first ---------- */
.sb-full{margin:12px 0 0;text-align:center}
.sb-full .cta.sm{width:100%;max-width:300px}
@media (max-width:760px){
  .m-app .id-two{display:flex;flex-direction:column;gap:18px}
  .m-app .id-two .scanbox{order:-1}
  .m-app .id-two .id-main{order:0}
}

/* ================= v51 ================= */
/* Past events read as a record, not a gallery: words and a way in. */
.ev-past{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:12px}
.ev-past li{position:relative;background:#fff;border:1px solid #e2e9f7;border-radius:16px;padding:16px 18px 14px 22px;box-shadow:var(--pro-ring)}
.ev-past li::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(#1049a9,#c8102e)}
.ev-past .w{margin:0 0 4px;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:#5b6b86;font-weight:700}
.ev-past h3{margin:0 0 7px;font-size:1.08rem;line-height:1.3}
.ev-past h3 a{color:#0d2350;text-decoration:none}
.ev-past h3 a:hover{color:#1049a9;text-decoration:underline}
.ev-past .m{margin:0 0 7px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ev-past .m .v{font-size:.82rem;color:#5b6b86}
.ev-past .s{margin:0 0 9px;color:#33465f;font-size:.94rem;line-height:1.5;max-width:72ch}
.ev-past .l{margin:0;font-size:.88rem;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ev-past .l a{color:#1049a9;font-weight:700;text-decoration:none}
.ev-past .l a:hover{text-decoration:underline}
.ev-past.tight li{padding:13px 15px 12px 18px}
.ev-past.tight h3{font-size:1rem;margin-bottom:5px}
.ev-past.tight .s{font-size:.88rem;margin-bottom:7px}

/* ---------- the dashboard ---------- */
.px-hero{position:relative;overflow:hidden;border-radius:24px;padding:30px 32px 22px;margin:0 0 22px;background:var(--pro-grad);color:#fff;box-shadow:var(--pro-sh-lg)}
.px-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(760px 260px at 84% -30%,rgba(255,255,255,.24),transparent 68%);pointer-events:none}
.px-hero-in{position:relative;display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.px-hero-l{flex:1 1 380px;min-width:0}
.px-hero .px-e{margin:0 0 7px;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.74);font-weight:800}
.px-hero h1{margin:0 0 9px;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.12;color:#fff;letter-spacing:-.01em}
.px-hero .px-lede{margin:0 0 13px;max-width:64ch;color:rgba(255,255,255,.87);font-size:.97rem;line-height:1.55}
.px-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.px-chips .pill{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.24)}
.px-chips .pill.num{background:#fff;color:#0d2350;border-color:#fff;font-variant-numeric:tabular-nums}
.px-hero-r{flex:0 0 auto}
.px-ring{position:relative;width:136px;height:136px;display:grid;place-items:center}
.px-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.px-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.px-ring .trk{stroke:rgba(255,255,255,.18)}
.px-ring .bar{stroke:#fff}
.px-ring.warn .bar{stroke:#ffd479}
.px-ring.bad .bar{stroke:#ff9aa8}
.px-ring .px-t{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.px-ring .px-t b{font-size:1.75rem;line-height:1;color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.px-ring .px-t small{display:block;margin:5px auto 0;max-width:104px;font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.76);line-height:1.25}
.px-quick{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.17)}
.px-quick a{display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:.87rem;font-weight:600;text-decoration:none;transition:transform .16s,background .16s,color .16s}
.px-quick a:hover{background:#fff;color:#0d2350;border-color:#fff;transform:translateY(-1px)}
.px-quick a:first-child{background:#fff;color:#0d2350;border-color:#fff;font-weight:700}
.px-quick a:first-child:hover{background:rgba(255,255,255,.86)}

.px-deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(234px,1fr));gap:14px;margin:0 0 26px}
.px-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e2e9f7;border-radius:18px;padding:18px 18px 16px;box-shadow:var(--pro-sh);overflow:hidden}
.px-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#1049a9}
.px-card.good::before{background:#16a34a}
.px-card.warn::before{background:#d97706}
.px-card.bad::before{background:#c8102e}
.px-card .px-i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#eef3ff;color:#1049a9;margin-bottom:12px}
.px-card .px-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.px-card.good .px-i{background:#eefaf1;color:#0f6f34}
.px-card.warn .px-i{background:#fff7e6;color:#92400e}
.px-card.bad .px-i{background:#fdeef0;color:#7a0a1c}
.px-card .px-e{margin:0 0 4px;font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;color:#5b6b86;font-weight:800}
.px-card .px-v{margin:0 0 7px;font-size:1.5rem;line-height:1.12;color:#0d2350}
.px-card .px-v b{font-weight:800}
.px-card .px-s{margin:0 0 13px;font-size:.85rem;line-height:1.45;color:#5b6b86}
.px-card .px-a{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:8px}
.px-card .px-a a{font-size:.83rem;font-weight:700;text-decoration:none;padding:7px 13px;border-radius:999px;transition:background .16s}
.px-card .px-a a.go{background:#1049a9;color:#fff}
.px-card .px-a a.go:hover{background:#0d2350}
.px-card .px-a a.alt{background:#eef3ff;color:#1049a9}
.px-card .px-a a.alt:hover{background:#dbe5f6}

.px-ops{margin:26px 0;padding:22px;border-radius:22px;background:linear-gradient(180deg,#fcfdff,#f6f9ff);border:1px solid #dbe5f6}
.px-ops-h{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.px-ops-h .px-e{margin:0 0 5px;font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:#c8102e;font-weight:800}
.px-ops-h h2{margin:0 0 7px;font-size:1.32rem;line-height:1.2;color:#0d2350}
.px-ops-h .px-s{margin:0;max-width:76ch;color:#5b6b86;font-size:.9rem;line-height:1.5}
.px-ops-cta{flex:0 0 auto;padding:11px 18px;border-radius:999px;background:#0d2350;color:#fff;font-weight:700;font-size:.9rem;text-decoration:none}
.px-ops-cta:hover{background:#1049a9;color:#fff}
.px-ops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.px-tile{display:block;background:#fff;border:1px solid #e2e9f7;border-left:3px solid #b9cdf3;border-radius:14px;padding:13px 14px;text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s}
.px-tile:hover{transform:translateY(-2px);box-shadow:var(--pro-sh);border-color:#9dbaee}
.px-tile .k{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#5b6b86;font-weight:800}
.px-tile .v{display:block;margin:4px 0 3px;font-size:1.42rem;line-height:1.15;color:#0d2350;font-weight:800;font-variant-numeric:tabular-nums}
.px-tile .s{display:block;font-size:.77rem;color:#5b6b86;line-height:1.35}
.px-tile.good{border-left-color:#16a34a}
.px-tile.good .v{color:#0f6f34}
.px-tile.amber{border-left-color:#d97706;background:#fff9ee}
.px-tile.amber .v{color:#92400e}
.px-tile.red{border-left-color:#c8102e;background:#fdf3f4}
.px-tile.red .v{color:#7a0a1c}
.px-ops-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:1px dashed #cfdaee}
.px-ops-links a{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #cfdaee;color:#1049a9;font-weight:600;font-size:.85rem;text-decoration:none}
.px-ops-links a:hover{background:#1049a9;color:#fff;border-color:#1049a9}

/* ---------- the committee inbox ---------- */
.eq-bar{background:#fff;border:1px solid #e2e9f7;border-radius:18px;padding:16px;margin:0 0 18px;box-shadow:var(--pro-ring)}
.eq-search{display:flex;gap:8px}
.eq-search input{flex:1 1 auto;min-width:0;padding:12px 14px;border:1px solid #cfdaee;border-radius:12px;font:inherit;font-size:.95rem;background:#fff}
.eq-search input:focus{outline:none;border-color:#1049a9;box-shadow:0 0 0 3px rgba(16,73,169,.12)}
.eq-bar-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:flex-end}
.eq-f{display:flex;flex-direction:column;gap:4px;flex:1 1 152px;min-width:0}
.eq-f>span{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:#5b6b86;font-weight:800}
.eq-f select,.eq-f input,.eq-f textarea{width:100%;padding:9px 11px;border:1px solid #cfdaee;border-radius:10px;font:inherit;font-size:.9rem;background:#fff;color:#0d2350}
.eq-f select:focus,.eq-f input:focus,.eq-f textarea:focus{outline:none;border-color:#1049a9;box-shadow:0 0 0 3px rgba(16,73,169,.12)}
.eq-f.full{flex:1 1 100%}
.eq-f.btns{flex:0 0 auto;flex-direction:row;gap:8px;align-items:center}
.eq-card{position:relative}
.eq-card.hot{border-color:#f0c9d0;box-shadow:0 0 0 3px rgba(200,16,46,.06)}
.eq-top{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.eq-pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.eq-st{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#eef3ff;color:#1049a9}
.eq-st.new{background:#0d2350;color:#fff}
.eq-st.live{background:#e2ebff;color:#1049a9}
.eq-st.warn{background:#fff7e6;color:#92400e}
.eq-st.ok{background:#eefaf1;color:#0f6f34}
.eq-when{text-align:right;line-height:1.3;margin-left:auto}
.eq-when b{display:block;font-size:.85rem;color:#0d2350}
.eq-when small{font-size:.75rem;color:#5b6b86}
.eq-name{margin:13px 0 3px;font-size:1.18rem;line-height:1.25;color:#0d2350}
.eq-contact{display:flex;flex-wrap:wrap;gap:5px 14px;margin:0 0 14px;font-size:.85rem;color:#5b6b86}
.eq-contact .ref{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.eq-contact .own{color:#1049a9;font-weight:700}
.eq-grid{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:18px;align-items:start}
.eq-body{min-width:0}
.eq-side{display:grid;gap:15px;background:#f6f9ff;border:1px solid #e2e9f7;border-radius:14px;padding:14px}
.eq-lbl{margin:0 0 7px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#5b6b86;font-weight:800}
.eq-btns{display:flex;flex-wrap:wrap;gap:6px}
.eq-btns form{margin:0}
.eq-pick{display:inline-block;padding:7px 12px;border-radius:999px;border:1px solid #cfdaee;background:#fff;color:#1049a9;font:inherit;font-size:.79rem;font-weight:700;line-height:1.2;cursor:pointer;text-decoration:none}
.eq-pick:hover{background:#1049a9;color:#fff;border-color:#1049a9}
.eq-pick.on{background:#0d2350;color:#fff;border-color:#0d2350;cursor:default}
.eq-pick.hot{background:#c8102e;color:#fff;border-color:#c8102e}
.eq-pick.wide{display:block;width:100%;text-align:center;margin-top:6px}
.eq-inline{display:flex;gap:6px;margin:0}
.eq-inline select,.eq-inline input{flex:1 1 auto;min-width:0;padding:8px 10px;border:1px solid #cfdaee;border-radius:9px;font:inherit;font-size:.83rem;background:#fff}
.eq-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.eq-tagf{margin:0}
.eq-tagf button{border:1px solid #ddd6fe;background:#f3f0ff;color:#5b21b6;border-radius:999px;padding:4px 9px;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer}
.eq-tagf button:hover{background:#ddd6fe}
.eq-tag{display:inline-block;border:1px solid #ddd6fe;background:#f3f0ff;color:#5b21b6;border-radius:999px;padding:3px 9px;font-size:.73rem;font-weight:700}
.eq-links{display:grid;gap:6px}
.eq-links a{font-size:.83rem;color:#1049a9;font-weight:600;text-decoration:none}
.eq-links a:hover{text-decoration:underline}
.eq-thread{margin:16px 0 0;padding:14px;border-radius:14px;background:#fbfcff;border:1px solid #e2e9f7}
.eq-msg{padding:11px 0;border-top:1px solid #eaf0fa}
.eq-msg-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 5px;font-size:.84rem;color:#0d2350}
.eq-msg-t{margin-left:auto;font-size:.75rem;color:#5b6b86;font-weight:400}
.eq-subj{margin:0 0 5px;font-size:.85rem;font-weight:700;color:#33465f}
.eq-msg.note{background:#fff7e6;border:1px solid #f3ddb0;border-radius:11px;padding:11px 13px;margin-top:9px}
pre.mailcopy.soft{background:transparent;border:0;padding:0;margin:0;font-size:.86rem}
.eq-do{margin-top:14px;border:1px solid #cfdaee;border-radius:14px;background:#fff;overflow:hidden}
.eq-do>summary{cursor:pointer;padding:12px 15px;font-weight:700;font-size:.92rem;color:#1049a9;background:#f6f9ff;list-style:none}
.eq-do>summary::-webkit-details-marker{display:none}
.eq-do>summary::before{content:"+";display:inline-block;width:16px;font-weight:800}
.eq-do[open]>summary::before{content:"\2212"}
.eq-form{padding:14px 15px 16px;display:flex;flex-direction:column;gap:11px}
.eq-form-row{display:flex;flex-wrap:wrap;gap:11px}
.eq-form textarea{resize:vertical;min-height:100px;line-height:1.55}
.eq-form-foot{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.eq-form-foot .hint{flex:1 1 260px;font-size:.78rem;color:#5b6b86;line-height:1.45}

@media (max-width:980px){
.eq-grid{grid-template-columns:1fr}
.eq-side{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}
}
@media (max-width:760px){
.px-hero{padding:24px 20px 18px;border-radius:20px}
.px-ring{width:114px;height:114px}
.px-ring .px-t b{font-size:1.5rem}
.px-deck{grid-template-columns:1fr 1fr;gap:10px}
.px-card{padding:15px 14px 14px}
.px-card .px-v{font-size:1.32rem}
.px-ops{padding:16px;border-radius:18px}
.px-ops-grid{grid-template-columns:1fr 1fr}
.px-ops-cta{width:100%;text-align:center}
.eq-side{display:grid;grid-template-columns:1fr}
}
@media (max-width:460px){
.px-deck{grid-template-columns:1fr}
.px-ops-grid{grid-template-columns:1fr}
}

/* ============================================================
   v52 - the members' area on a phone
   Most members open this on a handset, so the phone layout is
   the one that has to be right: fields you can tap, text you
   can read without pinching, tables that stop being tables.
   ============================================================ */

/* the way out, always in reach */
@media (max-width: 1000px) {
  .m-topbar { gap: 8px; }
  .m-topbar-out {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    height: 42px; padding: 0 13px; border-radius: 12px;
    border: 1px solid #f3c6ce; background: #fff5f7; color: #a80c25;
    font-weight: 800; font-size: .82rem; text-decoration: none; white-space: nowrap;
  }
  .m-topbar-out svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .m-topbar-out:hover { background: #ffe9ee; border-color: #e6a9b6; }
  .m-topbar-out:active { transform: translateY(1px); }
  .m-topbar-me .avatar.sm { width: 38px; height: 38px; }
}
@media (max-width: 520px) {
  .m-topbar-out { width: 44px; padding: 0; justify-content: center; }
  .m-topbar-out span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .m-topbar-t { font-size: .94rem; }
}

/* fields: 16px or the phone zooms in on its own */
@media (max-width: 700px) {
  .m-shell input, .m-shell select, .m-shell textarea { font-size: 16px; }
  .m-shell select,
  .m-shell input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]) { min-height: 46px; }
  .m-shell textarea { min-height: 120px; }
  .m-shell input[type=checkbox], .m-shell input[type=radio] { width: 21px; height: 21px; }
  .m-shell label { line-height: 1.45; }
}

/* tables become a stack of labelled cards */
@media (max-width: 620px) {
  .m-shell .table-scroll { overflow: visible; border: 0; background: none; box-shadow: none; padding: 0; margin: 0; }
  .m-shell table.mtable {
    min-width: 0; width: 100%; display: block; border: 0; background: none;
    border-radius: 0; box-shadow: none; font-size: .92rem;
  }
  .m-shell table.mtable thead { display: none; }
  .m-shell table.mtable tbody, .m-shell table.mtable tr, .m-shell table.mtable td { display: block; width: auto; }
  .m-shell table.mtable tr {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 13px 15px; margin: 0 0 10px; box-shadow: 0 1px 2px rgba(13, 35, 80, .05);
  }
  .m-shell table.mtable td {
    border: 0; padding: 6px 0;
    display: grid; grid-template-columns: minmax(92px, 38%) 1fr; gap: 4px 12px; align-items: baseline;
  }
  .m-shell table.mtable td[data-l]::before {
    content: attr(data-l);
    font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
    font-weight: 800; color: var(--muted);
  }
  .m-shell table.mtable td:not([data-l]) { display: block; }
  .m-shell table.mtable td:first-child {
    display: block; font-weight: 800; color: var(--navy); font-size: 1.02rem;
    padding: 0 0 9px; margin: 0 0 5px; border-bottom: 1px solid var(--line);
  }
  .m-shell table.mtable td:first-child::before { display: block; margin: 0 0 3px; }
  .m-shell table.mtable tr:last-child td { border-bottom: 0; }
  .m-shell table.mtable tr:last-child td:first-child { border-bottom: 1px solid var(--line); }
  .m-shell table.mtable td:empty { display: none; }
  .m-shell table.mtable tr.rowpanel { padding: 0; margin: -6px 0 12px; border: 0; background: none; box-shadow: none; }
  .m-shell table.mtable tr.rowpanel td { padding: 0; }
  .m-shell table.mtable tr.voided { opacity: .72; }
}

/* room to breathe, and something to aim at */
@media (max-width: 620px) {
  .px-hero { padding: 22px 18px 18px; border-radius: 20px; }
  .px-hero h1 { font-size: 1.52rem; }
  .px-lede { font-size: .94rem; }
  .px-card { padding: 16px; }
  .px-ops { padding: 18px 16px; }
  .px-ops-h { flex-direction: column; align-items: flex-start; gap: 12px; }
  .px-ops-cta { width: 100%; text-align: center; justify-content: center; }
  .dash-h a { min-height: 36px; display: inline-flex; align-items: center; }
  .m-shell .chip, .m-shell .mini-btn, .m-shell .pg, .m-shell .eq-pick {
    min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
  }
  .m-shell .cta, .m-shell .cta.sm, .m-shell .px-a a, .m-shell button.cta {
    min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
  }
  .m-shell .pager { flex-direction: column; align-items: flex-start; gap: 10px; }
  .m-shell .pager-nav { flex-wrap: wrap; }
  .m-shell .rail-links a { min-height: 46px; }
}
/* v53 - volunteer sign-ups screen (committee) */
.m-shell .su-acts{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:center}
.m-shell .su-acts form{display:inline;margin:0}
.m-shell .su-acts .linkbtn{white-space:nowrap}
.m-shell .pill.ok{background:#e6f4ea;color:#12603a;border-color:#bfe3cc}
.m-shell .pill.bad{background:#fdeaea;color:#8a1420;border-color:#f3c9cd}
.m-shell .cta.ghost{background:transparent;color:#8b0e1f;border:1.5px solid #d9b9bf;box-shadow:none}
.m-shell .cta.ghost:hover{background:#fdf3f4}
@media (max-width:620px){
  .m-shell .su-acts{gap:.5rem 1rem}
  .m-shell .su-acts .linkbtn{min-height:34px}
}
/* v53b - one grid cell per value, so two-line cells line up */
.m-shell table.mtable td > .tdv{min-width:0}
@media (max-width:620px){
  .m-shell table.mtable td > .tdv{display:block;min-width:0;overflow-wrap:anywhere}
  .m-shell table.mtable td:first-child > .tdv{display:block}
  .m-shell table.mtable td:first-child .muted,
  .m-shell table.mtable td:first-child .small{font-weight:600;font-size:.82rem;color:var(--muted)}
}
/* v55 - sign-ups tables sit inside the column without side-scrolling */
.m-shell .su-tbl table.mtable{min-width:0;width:100%}
.m-shell .su-tbl th{white-space:nowrap}
.m-shell .su-tbl th:first-child{white-space:normal}
.m-shell .su-tbl .su-acts .linkbtn{white-space:nowrap;text-align:left}
.m-shell .su-tbl td:last-child{min-width:8.5rem}
@media (max-width:620px){
  .m-shell .su-tbl td:last-child{width:auto}
  .m-shell .su-tbl th{white-space:normal}
}
/* v56 - give the name and the interests room to breathe */
.m-shell .su-tbl th:first-child, .m-shell .su-tbl td:first-child{min-width:6.5rem}
.m-shell .su-tbl .tdv{overflow-wrap:anywhere}
.m-shell .su-tbl .su-acts{flex-direction:column;align-items:flex-start;gap:.3rem}
@media (max-width:620px){
  .m-shell .su-tbl th:first-child, .m-shell .su-tbl td:first-child{min-width:0}
  .m-shell .su-tbl .su-acts{flex-direction:row;flex-wrap:wrap;gap:.5rem 1rem}
}
/* v58 - what they offered to help with, quietly under the name */
.m-shell .su-int{display:inline-block;margin-top:3px;font-size:.82rem;color:var(--navy);opacity:.85}
/* ---------- v62: posters, and photographs four across ---------- */
/* Every album is a tidy grid of four. The pictures are cropped to a square by
   the browser, so a mixture of portrait and landscape still lines up. */
.album, .album-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.album figure img, .album-4 figure img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.album-4 figure{margin:0;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--soft)}
.album-4 figure a{display:block}
.album-4 figure:hover img{transform:scale(1.05)}
.album-4 figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 12px 9px;font-size:.8rem;color:#fff;
  background:linear-gradient(to top,rgba(9,17,38,.78),rgba(9,17,38,0))}
.album-4 figcaption a{color:#fff;text-decoration:none}
.album-4 figcaption a:hover{text-decoration:underline}
.album-more{margin-top:18px}
@media (max-width:1000px){ .album, .album-4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:720px){ .album, .album-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }

/* the poster: a flyer, shown whole and never cropped */
.ev-poster{margin:0 auto;max-width:760px;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--soft);box-shadow:var(--pro-sh);cursor:zoom-in}
.ev-poster img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;background:#fff}
.ev-card .shot img.is-poster{object-fit:contain;background:#fff}

/* the poster on the committee form */
.ev-poster-now{display:flex;gap:14px;align-items:flex-start;margin:0 0 10px;flex-wrap:wrap}
.ev-poster-now img{width:132px;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.ev-poster-now .check{display:flex;gap:8px;align-items:center;font-size:.9rem}
/* v63 - the committee photographs page */
.m-shell .ph-head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.m-shell .ph-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:end;margin:0 0 16px}
.m-shell .ph-form p{grid-column:1/-1;margin:0}
.m-shell .ph-album figcaption{position:static;background:none;padding:6px 8px;text-align:center}
.m-shell .ph-album figcaption .linkbtn{font-size:.82rem}
.m-shell .ph-album figure{background:#fff}
@media (max-width:700px){ .m-shell .ph-form{grid-template-columns:1fr} }
/* v67 - getting somebody started, straight from their enquiry */
.eq-ob{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 12px 14px;margin-bottom:14px}
.eq-ob .eq-lbl{margin-top:0}
.eq-ob-say{margin:.35rem 0 .75rem;font-size:.86rem;line-height:1.5}
.eq-ob-link{margin:.1rem 0 .6rem;padding:7px 9px;background:#fff;border:1px solid var(--line);border-radius:10px;
  font-size:.74rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.eq-go{display:block;width:100%;border:0;border-radius:999px;background:#1049a9;color:#fff;
  font:inherit;font-weight:700;font-size:.88rem;padding:10px 14px;cursor:pointer;text-align:center}
.eq-go:hover{background:#0d3d8f}
.eq-ob .eq-links{margin-bottom:.5rem}
/* v68 - an enquiry the world has already answered */
.eq-settled{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;justify-content:space-between;
  background:#eef7ee;border:1px solid #bcdfbc;border-left:4px solid #2e7d32;border-radius:12px;
  padding:11px 13px;margin:0 0 12px}
.eq-settled p{margin:0;font-size:.88rem;line-height:1.5;color:#204a22}
.eq-settled-do{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eq-settled form{margin:0}
.eq-settled-see{font-size:.82rem;font-weight:600;color:#1049a9}
.eq-clear{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  background:#fff;border:1px solid var(--line);border-left:4px solid #2e7d32;border-radius:14px;
  padding:12px 14px;margin:0 0 16px}
.eq-clear p{margin:0;font-size:.88rem;line-height:1.5}
.eq-clear .eq-lbl{margin:0 0 .2rem}
.eq-clear form{margin:0}
@media (max-width:640px){
  .eq-settled,.eq-clear{flex-direction:column;align-items:stretch}
  .eq-settled .cta,.eq-clear .cta{width:100%}
}
/* v69 - fees: who owes, a searchable picker, donations */
.owe-years{margin:-4px 0 14px;display:flex;flex-wrap:wrap;gap:6px}
.owe-years .chip.on{background:#1049a9;border-color:#1049a9;color:#fff}
.owe-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:12px}
.owe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;
  background:#fff;border:1px solid var(--line);border-left:4px solid #e8a33d;border-radius:14px;padding:12px 14px}
.owe.bad{border-left-color:#c62828}
.owe-who{display:flex;flex-direction:column;min-width:0}
.owe-who strong{font-size:.98rem;line-height:1.3}
.owe-st{display:flex;flex-direction:column;gap:3px;min-width:0}
.owe .cta.sm{white-space:nowrap}

.pick{position:relative}
.pick select.pick-native{position:absolute;left:12px;bottom:6px;width:1px;height:1px;min-height:0;padding:0;margin:0;border:0;opacity:0;pointer-events:none;appearance:none;-webkit-appearance:none;background:none}
.pick-box{width:100%;box-sizing:border-box}
.pick-clear{position:absolute;top:7px;right:8px;width:28px;height:28px;line-height:1;border:0;border-radius:50%;
  background:#eef1f6;color:#334;font-size:1.1rem;cursor:pointer}
.pick-clear:hover{background:#dfe4ec}
.pick-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;list-style:none;
  max-height:290px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 32px rgba(16,32,64,.16)}
.pick-list li{padding:9px 11px;border-radius:9px;cursor:pointer;font-size:.92rem;line-height:1.35}
.pick-list li.on{background:#1049a9;color:#fff}
.pick-list li.pick-none{cursor:default;color:var(--muted)}
.pick-list li.pick-none.on{background:transparent;color:var(--muted)}

.led-find{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.led-find input[type="search"]{flex:1 1 280px;min-width:0}
.led-find select{flex:0 1 190px}
.pill.gift{background:#efe8fb;color:#4a2d8f;border-color:#d8c9f5}
.don-card{border-left:4px solid #6a3fc0}
@media (max-width:640px){
  .owe{flex-direction:column;align-items:stretch}
  .owe .cta.sm{width:100%;text-align:center}
  .led-find select,.led-find .cta{flex:1 1 100%}
}
.owe-acct{font-size:.78rem;color:#1049a9;text-decoration:none}
.owe-acct:hover{text-decoration:underline}

/* v72 - sign-ups that have already sorted themselves out */
.su-settled{background:#fff;border:1px solid var(--line);border-left:4px solid #2e7d32;border-radius:14px;
  padding:12px 14px;margin:0 0 20px}
.su-settled-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}
.su-settled-h strong{font-size:1.02rem;color:#1f5c33}
.su-settled-f{margin:0 0 12px}
.su-settled .table-scroll{margin:0}
.su-settled .mtable{background:#fff}
@media (max-width:640px){.su-settled{padding:10px 11px}}

/* v73 - an enquiry the sign-up process is already running with */
.eq-settled.eq-running{background:#fff8ec;border-color:#f0d9ac;border-left-color:#c07d12}
.eq-settled.eq-running p{color:#5a3d0b}
.pill.warn{background:#fff3d9;border-color:#f0d9ac;color:#7a5307}

/* v74 - the treasurer's book */
.rowvoid td{opacity:.62}
.rowvoid td strong{text-decoration:line-through}
.tile.tile-bad .v{color:#b3261e}
.spend-note{margin:-6px 0 14px}
/* v75 - volunteering tables sit inside the column without side-scrolling */
.m-shell .vtbl table.mtable{min-width:0;width:100%}
.m-shell .vtbl th{white-space:nowrap}
.m-shell .vtbl th:first-child{white-space:normal}
.m-shell .vtbl td:first-child{overflow-wrap:anywhere}
.m-shell .vtbl .cta.sm,.m-shell .vtbl .linkbtn{white-space:nowrap}
.m-shell .vtbl input[type=text]{max-width:100%}

/* ============================================================
   v76 - the committee action queue and the grouped toolbox
   ============================================================ */
.m-shell .todo{display:grid;gap:10px;margin:0 0 22px}
.m-shell .todo-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-left:4px solid #c9d4e8;border-radius:14px;padding:13px 16px;box-shadow:var(--pro-sh);text-decoration:none;color:var(--body);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.m-shell .todo-row:hover{border-color:#b9c7e2;box-shadow:var(--pro-sh-lg);transform:translateY(-1px)}
.m-shell .todo-row.hot{border-left-color:#c62828;background:#fffafa}
.m-shell .todo-row.warm{border-left-color:#e0940a;background:#fffdf8}
.m-shell .todo-n{flex:none;min-width:40px;height:40px;padding:0 10px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.02rem;background:#eef3fc;color:#1f3f77;border:1px solid #dce6f7}
.m-shell .todo-row.hot .todo-n{background:#fdecec;color:#a51d1d;border-color:#f6cfcf}
.m-shell .todo-row.warm .todo-n{background:#fff5e2;color:#8a5a00;border-color:#f4e0b6}
.m-shell .todo-t{flex:1 1 auto;min-width:0}
.m-shell .todo-t b{display:block;font-size:.95rem;line-height:1.32;color:var(--navy)}
.m-shell .todo-t small{display:block;color:var(--muted);font-size:.81rem;margin-top:2px;line-height:1.4}
.m-shell .todo-go{flex:none;font-size:.82rem;font-weight:800;color:#1f3f77;white-space:nowrap}
.m-shell .todo-row:hover .todo-go{text-decoration:underline}
.m-shell .todo-clear{display:flex;gap:14px;align-items:flex-start;background:#f2fbf4;border:1px solid #cdead4;border-radius:16px;padding:16px 18px;margin:0 0 22px}
.m-shell .todo-clear .tick{flex:none;width:34px;height:34px;border-radius:50%;background:#1f7a3d;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.m-shell .todo-clear b{display:block;color:#14532d;font-size:.98rem}
.m-shell .todo-clear small{display:block;color:#2f6b45;font-size:.83rem;margin-top:3px}
.m-shell .grp{margin:26px 0 12px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.m-shell .grp h2{margin:0;font-size:1.1rem;letter-spacing:-.01em}
.m-shell .grp p{margin:0;font-size:.82rem;color:var(--muted)}
.m-shell .grp .line{flex:1;min-width:24px;height:1px;background:var(--line)}
/* v77 - the phone. Most of the committee open this on a handset, so the
   queue rows stack, the buttons grow to a proper thumb size, and nothing
   is allowed to push the page sideways. */
@media (max-width:620px){
  .m-shell .todo-row{flex-wrap:wrap;gap:10px 12px;padding:12px 14px}
  .m-shell .todo-t{min-width:0;flex:1 1 auto}
  /* width:100% plus a left margin overflowed the card. Let flex do it. */
  .m-shell .todo-go{flex:1 1 auto;width:auto;margin:2px 0 0 52px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .m-shell .todo-n{min-width:38px;height:38px}
  .m-shell .m-side-link,.m-shell .m-side-link.out{min-height:44px;display:flex;align-items:center}
  .m-shell .m-side-x{min-width:44px;min-height:44px}
  .m-shell .cta,.m-shell .cta.sm,.m-shell .linkbtn,.m-shell .mini-btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .m-shell .filterbar select,.m-shell .filterbar input{min-height:40px}
  .m-shell .grp h2{font-size:1.04rem}
}
/* v78 - thumbs. The slim colour bars in the compact month calendar were
   five pixels tall, which is not a target a finger can hit. The bar keeps
   its size; the area that answers to a tap grows around it. */
@media (max-width:620px){
  .cal-wrap.compact .cal-ev{position:relative}
  .cal-wrap.compact .cal-ev::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
}
/* v78c - inside the members area the public footer was repeating a full set
   of website links under every page, about nineteen hundred pixels of them
   on a phone. The members area has its own menu, so on a handset the footer
   keeps the crest, the social links and the legal line, and drops the rest. */
@media (max-width:620px){
  main.m-shell ~ .site-footer .cols > div:nth-child(2),
  main.m-shell ~ .site-footer .cols > div:nth-child(3){display:none}
  main.m-shell ~ .site-footer .cols{gap:0}
  main.m-shell ~ .site-footer{padding-bottom:8px}
}
/* v80 - one menu, not two. On a phone a members page opened with the public
   site header and the members bar stacked on top of each other, each with its
   own hamburger, opening two different menus. The crest stays for identity;
   the duplicate menu button goes, because the members bar already holds the
   whole members menu and a link back to the public website. */
@media (max-width:620px){
  body:has(main.m-shell) .site-header .menu-btn{display:none}
  body:has(main.m-shell) .site-header .wrap.bar{padding-top:7px;padding-bottom:7px}
  body:has(main.m-shell) .site-header .brand img{width:36px;height:36px}
  body:has(main.m-shell) .site-header .brand .txt{font-size:.92rem}
}

/*APPLE-TABS-ICONS-START*/
/* — Icons: SF Symbols feel (round caps, consistent weight) — */
body:has(main.m-shell) svg[viewBox="0 0 24 24"],
body:has(main.m-shell) svg[viewBox="0 0 24 24"] *{stroke-linecap:round!important;stroke-linejoin:round!important}
body:has(main.m-shell) .m-side-link svg,
body:has(main.m-shell) .px-card svg,
body:has(main.m-shell) .rail-card svg{stroke-width:1.6}
/* icon tiles on cards: iOS app-icon squircle */
body:has(main.m-shell) .px-card .px-e,
body:has(main.m-shell) .rail-card .px-e{border-radius:26%!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
/* — Tab bar: iOS — */
body:has(main.m-shell) .tabbar{background:rgba(249,249,251,.78)!important;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:none!important;box-shadow:0 -0.5px 0 rgba(0,0,0,.2)}
body:has(main.m-shell) .tabbar a{color:#8e8e93!important;transition:transform .12s ease,color .15s;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif}
body:has(main.m-shell) .tabbar a span{font-size:10px;font-weight:500;letter-spacing:.01em}
body:has(main.m-shell) .tabbar a svg{stroke-width:1.6}
body:has(main.m-shell) .tabbar a.is-active{color:#007aff!important}
body:has(main.m-shell) .tabbar a.is-active svg{stroke-width:2}
body:has(main.m-shell) .tabbar a:active{transform:scale(.94)}
/*APPLE-TABS-ICONS-END*/

/*NOSCROLL-START*/
/* Committee tables fit the page instead of scrolling sideways.
   Nothing is allowed to be clipped: action buttons wrap onto a new line. */
body:has(main.m-shell) .table-scroll{overflow-x:visible!important}
body:has(main.m-shell) .table-scroll > table{width:100%;min-width:0!important;table-layout:auto}
body:has(main.m-shell) .table-scroll th,
body:has(main.m-shell) .table-scroll td{white-space:normal!important;word-break:normal;overflow-wrap:break-word;hyphens:none;vertical-align:top}
body:has(main.m-shell) .table-scroll td:first-child,
body:has(main.m-shell) .table-scroll th:first-child{min-width:10ch}
/* action cells: let the buttons flow onto more than one line rather than clip */
body:has(main.m-shell) .table-scroll td:last-child{display:table-cell}
/* Only the controls themselves. This used to say "> *", which also caught the
   wrapper span the certificates page puts round its buttons (so the buttons
   stretched to the height of the open editor) and the <details> panel the
   payments page opens under a row (which collapsed to nothing, squeezing
   "Email the receipt" into a 40px column of single letters). */
body:has(main.m-shell) .table-scroll td:last-child > a,
body:has(main.m-shell) .table-scroll td:last-child > button,
body:has(main.m-shell) .table-scroll td:last-child > form{display:inline-flex;margin:2px 4px 2px 0;vertical-align:middle}
body:has(main.m-shell) table{max-width:100%}
body:has(main.m-shell) input,body:has(main.m-shell) select,body:has(main.m-shell) textarea{max-width:100%}
@media (max-width:760px){
  body:has(main.m-shell) .table-scroll th,
  body:has(main.m-shell) .table-scroll td{padding-left:6px;padding-right:6px;font-size:.86rem}
}
body:has(main.m-shell) img,body:has(main.m-shell) pre,body:has(main.m-shell) code{max-width:100%}
/* Exception to the rule above. In the two-column committee layout the main
   column is about 536px, which is narrower than these tables can wrap down to.
   Left as visible they spill out sideways and slide under the sticky rail, so
   the rail sits on top of the buttons. Scrolling the table inside its own box
   is the lesser evil: nothing is hidden, and nothing overlaps. */
body:has(main.m-shell) .m-layout .m-main{min-width:0}
body:has(main.m-shell) .m-layout .m-main .table-scroll{overflow-x:auto!important}
/*NOSCROLL-END*/

/*RAIL-START*/
/* Committee pages: the helper rail drops below the data when the screen is
   not wide enough for both, so tables always get the full column. */
@media (max-width:1500px){
  body:has(main.m-shell) .m-layout{grid-template-columns:1fr!important}
  body:has(main.m-shell) .m-layout > *:not(.m-main){min-width:0}
}
@media (min-width:1501px){
  body:has(main.m-shell) .m-layout{grid-template-columns:minmax(0,1fr) 300px!important}
}
body:has(main.m-shell) .m-main{min-width:0}
/*RAIL-END*/

/* Person lookup — the small fixes made in place ------------------------- */
.pl-fix{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}
.pl-fix+.pl-fix{margin-top:6px}
.pl-fix input[type=text],.pl-fix select,.pl-fix .pick{font:inherit;font-size:.88rem;padding:7px 11px;border-radius:10px;border:1px solid rgba(13,35,80,.18);background:#fff;color:#0d2350;min-width:0;flex:1 1 13rem;max-width:22rem}
.pl-fix .pick{padding:0;border:0;background:none}
.pl-fix .pick-box{width:100%;font:inherit;font-size:.88rem;padding:7px 11px;border-radius:10px;border:1px solid rgba(13,35,80,.18);background:#fff;color:#0d2350}
.pl-fix .hint{flex:1 1 auto;margin:0}
.pl-fix button{flex:0 0 auto}
li .pl-fix{margin-left:0}
@media (max-width:620px){
  .pl-fix{gap:6px}
  .pl-fix input[type=text],.pl-fix select,.pl-fix .pick{flex:1 1 100%;max-width:none}
  .pl-fix button{width:100%}
}

/* The events table ------------------------------------------------------- */
table.ev-tbl{width:100%}
.ev-tbl-when{white-space:normal;min-width:9rem;line-height:1.35}
.ev-tbl-t a{font-weight:650}
.ev-tbl-t small{display:block;margin-top:3px;color:#5b6b86;font-size:.8rem;line-height:1.35;font-weight:400}
.ev-tbl-do{white-space:nowrap;text-align:right}
.ev-tbl .ev-badge.live{background:rgba(13,35,80,.07);color:#0d2350}
@media (max-width:820px){
  .ev-tbl-when{min-width:0}
  .ev-tbl-do{text-align:left}
}

/* Coming back to the calendar should clear the sticky header, and the swap
   between months should read as a change rather than a flicker. */
#cal{scroll-margin-top:96px}
#cal[aria-busy="true"]{opacity:.55;transition:opacity .12s ease}

/* The self test ---------------------------------------------------------- */
.st-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:14px 18px;border-radius:14px;margin:0 0 18px;border:1px solid}
.st-banner b{font-size:1.05rem}
.st-banner span{font-size:.86rem;opacity:.8}
.st-banner.ok{background:#eefaf2;border-color:#bfe6cd;color:#0a5c2e}
.st-banner.bad{background:#fdf0f0;border-color:#f0c4c4;color:#8e1220}
.st-grp{border:1px solid rgba(13,35,80,.10);border-radius:14px;padding:14px 16px;margin:0 0 12px;background:#fff}
.st-grp.bad{border-color:#f0c4c4;background:#fffafa}
.st-grp h3{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:1rem}
.st-tally{margin-left:auto;font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:999px;background:#eefaf2;color:#0a5c2e}
.st-tally.bad{background:#fdf0f0;color:#8e1220}
.st-grp ul{list-style:none;margin:0;padding:0}
.st-grp li{display:flex;gap:9px;align-items:flex-start;padding:3px 0;font-size:.89rem;line-height:1.45}
.st-grp li i{flex:0 0 auto;width:15px;height:15px;border-radius:50%;margin-top:3px;display:block}
.st-grp li.ok i{background:#d7f0e0;box-shadow:inset 0 0 0 2px #2f9e5c}
.st-grp li.no i{background:#f7d4d8;box-shadow:inset 0 0 0 2px #c62font}
.st-grp li.no i{background:#f7d4d8;box-shadow:inset 0 0 0 2px #c62431}
.st-grp li.no{color:#8e1220;font-weight:600}
.st-grp li em{display:block;font-style:normal;font-weight:400;color:#7a5560;font-size:.83rem;margin-top:2px}

/* Committee tabs ---------------------------------------------------------
   Two rows and a line of explanation. Each section carries its own colour,
   passed in as --tint, so the committee can tell at a glance which part of
   the club they are working in. Everything wraps; nothing scrolls sideways. */
.ctabs{margin:-4px 0 20px;padding:12px 14px 13px;border:1px solid rgba(13,35,80,.10);border-radius:16px;background:#f6f8fc}

.ctabs-secs{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ctabs-home{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:#0d2350;color:#fff;text-decoration:none;font-weight:600;font-size:.82rem;line-height:1.2;white-space:nowrap}
.ctabs-home:hover,.ctabs-home:focus{background:#16336f;color:#fff}
.ctabs-sec{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;font-size:.82rem;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;border:1px solid color-mix(in srgb, var(--tint) 30%, transparent);background:color-mix(in srgb, var(--tint) 8%, #fff);color:var(--tint)}
.ctabs-sec:hover,.ctabs-sec:focus{background:color-mix(in srgb, var(--tint) 16%, #fff);color:var(--tint)}
.ctabs-sec.on{background:var(--tint);border-color:var(--tint);color:#fff}
.ctabs-sec.on:hover,.ctabs-sec.on:focus{color:#fff}

.ctabs-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:11px;border-top:1px solid color-mix(in srgb, var(--tint) 22%, transparent)}
.ctab{display:inline-flex;align-items:center;padding:6px 13px;border-radius:9px;font-size:.86rem;line-height:1.25;text-decoration:none;white-space:nowrap;color:#33415c;background:#fff;border:1px solid rgba(13,35,80,.12)}
.ctab:hover,.ctab:focus{border-color:var(--tint);color:var(--tint)}
.ctab.on{background:var(--tint);border-color:var(--tint);color:#fff;font-weight:650}
.ctab.on:hover,.ctab.on:focus{color:#fff}

.ctabs-note{margin:11px 0 0;padding-left:11px;border-left:3px solid var(--tint);font-size:.88rem;line-height:1.5;color:#4a5a75}

@media (max-width:760px){
  .ctabs{padding:10px 11px}
  .ctabs-secs{gap:5px}
  .ctabs-sec,.ctabs-home{font-size:.78rem;padding:6px 11px}
  .ctab{font-size:.82rem;padding:6px 11px}
  .ctabs-note{font-size:.84rem}
}

/* The menu page, tinted to match the tabs ------------------------------- */
.grp.tinted h2{position:relative;padding-left:14px}
.grp.tinted h2::before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:3px;background:var(--tint)}
.qa-grid[style*='--tint'] .qa .ic{background:color-mix(in srgb, var(--tint) 12%, #fff);color:var(--tint)}
.qa-grid[style*='--tint'] .qa:hover,.qa-grid[style*='--tint'] .qa:focus{border-color:color-mix(in srgb, var(--tint) 45%, transparent)}

/* No fade-in inside the members area -------------------------------------
   style.css starts every .reveal block at opacity 0 and waits for app.js to
   add .in, then fades each one over 0.7s as it scrolls into view. That is
   fine on the public pages, where it is decoration. It is wrong here.

   The members area is a tool. On the attendance sheet twelve blocks were
   hidden that way — the four counters, the section headings and the forms —
   so none of the numbers existed until a script had downloaded and run, and
   then arrived one at a time. Worse, a phone that backgrounds the tab (which
   is what happens the moment somebody switches app mid-register) pauses those
   transitions, and blocks can be left blank on return.

   So: committee data is on screen the instant the page is. */
.m-shell .reveal{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}

/* =======================================================================
   m-polish — the committee area, refined

   No new look and no new colours. This is the craft layer: one set of
   corner radii instead of ten, one shadow instead of five, numbers that
   line up under each other, a visible keyboard focus ring, and tabs that
   stay to hand on a long page. Scoped to .m-shell throughout, so the
   public website is untouched.
   ======================================================================= */
.m-shell{
  --m-r-sm: 12px;   /* controls, chips, small rows */
  --m-r-md: 16px;   /* cards and panels */
  --m-r-lg: 18px;   /* the hero band */
  --m-lift: 0 1px 2px rgba(13,35,80,.05), 0 10px 26px -14px rgba(13,35,80,.20);
  --m-lift-hi: 0 2px 4px rgba(13,35,80,.06), 0 18px 40px -20px rgba(13,35,80,.28);
  --m-line: rgba(13,35,80,.10);
}

/* ---- one radius scale ---- */
.m-shell .m-card,
.m-shell .stat,
.m-shell .qa,
.m-shell .form-card,
.m-shell .rail-card,
.m-shell .m-side{border-radius:var(--m-r-md)}
.m-shell .todo-row,
.m-shell .ev-row,
.m-shell .ev-chip,
.m-shell .m-side-x,
.m-shell .ic,
.m-shell .todo-n{border-radius:var(--m-r-sm)}
.m-shell .dash-hero{border-radius:var(--m-r-lg)}

/* ---- one shadow ---- */
.m-shell .m-card,
.m-shell .stat,
.m-shell .todo-row,
.m-shell .rail-card,
.m-shell .m-side{box-shadow:var(--m-lift)}
.m-shell .qa,
.m-shell .ev-row{box-shadow:none;border:1px solid var(--m-line)}

/* ---- numbers that line up ----
   Figures of even width, so a column of money or counts reads as a column
   rather than a ragged edge. */
.m-shell .stat b,.m-shell .stat strong,.m-shell .stat .big,
.m-shell table td,.m-shell table th,
.m-shell .todo-n,.m-shell .n,.m-shell .money,.m-shell .amt,
.m-shell .st-tally,.m-shell .ev-chip{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ---- hover that answers back ---- */
.m-shell .qa,.m-shell .todo-row,.m-shell .ev-row{transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease}
.m-shell .qa:hover{box-shadow:var(--m-lift);transform:translateY(-1px)}
.m-shell .todo-row:hover{box-shadow:var(--m-lift-hi)}
@media (prefers-reduced-motion: reduce){
  .m-shell .qa,.m-shell .todo-row,.m-shell .ev-row{transition:none}
  .m-shell .qa:hover{transform:none}
}

/* ---- keyboard focus you can actually see ----
   Committee work is fast and often one-handed; anybody tabbing through a
   register needs to know where they are. */
.m-shell a:focus-visible,
.m-shell button:focus-visible,
.m-shell input:focus-visible,
.m-shell select:focus-visible,
.m-shell textarea:focus-visible,
.m-shell [tabindex]:focus-visible{outline:2px solid #1049a9;outline-offset:2px;border-radius:var(--m-r-sm)}
.m-shell .ctabs-sec:focus-visible,
.m-shell .ctab:focus-visible,
.m-shell .cta:focus-visible,
.m-shell .mini-btn:focus-visible{outline-offset:3px;border-radius:999px}

/* ---- the tabs stay with you ----
   Long pages (accounts, the audit trail, a full register) used to mean
   scrolling back to the top to change tool. */
.m-shell .ctabs{position:sticky;top:76px;z-index:4;background:#f4f7fc;
  box-shadow:0 1px 0 rgba(13,35,80,.06), 0 10px 20px -18px rgba(13,35,80,.5)}
@supports not (backdrop-filter: blur(1px)){.m-shell .ctabs{background:#f6f8fc}}
@media (max-width:900px){.m-shell .ctabs{position:static}}

/* ---- stat cards: even rhythm ---- */
.m-shell .stat small,.m-shell .stat p{text-wrap:pretty}

/* ---- tables: quieter lines, clearer head ---- */
.m-shell table.mtable th{letter-spacing:.04em;font-size:.74rem;text-transform:uppercase;color:#5b6b86}
.m-shell table.mtable td,.m-shell table.mtable th{border-color:var(--m-line)}
.m-shell table.mtable tbody tr{transition:background .14s ease}
.m-shell table.mtable tbody tr:hover{background:rgba(13,35,80,.025)}

/* =======================================================================
   The Games — setting up a tournament
   ======================================================================= */
.g-state{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 18px;border-radius:var(--m-r-md,16px);border:1px solid var(--m-line,rgba(13,35,80,.10));background:#fff;margin:0 0 16px;box-shadow:var(--m-lift)}
.g-state-badge{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:rgba(13,35,80,.07);color:#4a5a75}
.g-state.live .g-state-badge{background:#e7f6ec;color:#0a5c2e}
.g-state-nums{display:flex;flex-wrap:wrap;gap:6px 20px;margin-left:auto}
.g-state-nums span{display:flex;align-items:baseline;gap:6px;font-size:.84rem;color:#5b6b86}
.g-state-nums b{font-size:1.25rem;color:#0d2350;font-variant-numeric:tabular-nums}
.g-state-note{flex:1 1 100%;margin:0;font-size:.85rem;color:#8a5a12;background:#fff8ec;border-left:3px solid #d97706;padding:7px 11px;border-radius:0 8px 8px 0}

.g-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:0 0 20px}
.g-step{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--m-r-sm,12px);border:1px solid var(--m-line,rgba(13,35,80,.10));background:#fff;text-decoration:none;color:#33415c;transition:border-color .15s ease,box-shadow .15s ease}
.g-step:hover{border-color:#1049a9;box-shadow:var(--m-lift)}
.g-step i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.78rem;font-weight:700;background:rgba(13,35,80,.07);color:#4a5a75}
.g-step.ok i{background:#e7f6ec;color:#0a5c2e}
.g-step.on{border-color:#0d2350;background:#0d2350;color:#fff}
.g-step.on i{background:rgba(255,255,255,.18);color:#fff}
.g-step b{display:block;font-size:.88rem;line-height:1.3}
.g-step small{display:block;font-size:.76rem;opacity:.72;margin-top:1px}

.g-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.g-tab{display:inline-flex;flex-direction:column;padding:8px 15px;border-radius:var(--m-r-sm,12px);border:1px solid color-mix(in srgb, var(--tint) 30%, transparent);background:color-mix(in srgb, var(--tint) 7%, #fff);color:var(--tint);text-decoration:none;font-weight:650;font-size:.88rem;line-height:1.25}
.g-tab i{font-style:normal;font-size:.74rem;font-weight:500;opacity:.8}
.g-tab.on{background:var(--tint);border-color:var(--tint);color:#fff}

.g-plan{margin:0;padding-left:1.2rem;line-height:1.65}
.g-plan li{margin:5px 0}
.g-pub{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--m-line,rgba(13,35,80,.10))}

.g-fmt{border:1px solid color-mix(in srgb, var(--tint) 26%, transparent);border-radius:var(--m-r-sm,12px);padding:13px 15px;margin:0 0 12px;background:color-mix(in srgb, var(--tint) 4%, #fff)}
.g-fmt h3{margin:0 0 10px;font-size:1rem;color:var(--tint)}
.g-fmt h3 small{display:block;font-size:.76rem;font-weight:400;color:#5b6b86;margin-top:2px}
.g-fmt-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding:8px 0;border-top:1px dashed color-mix(in srgb, var(--tint) 22%, transparent)}
.g-fmt-lab{flex:1 1 11rem;font-size:.86rem;font-weight:600;color:#33415c;align-self:center}
.g-fmt-row label{display:flex;flex-direction:column;gap:3px;font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:#5b6b86;font-weight:700}
.g-fmt-row input{font:inherit;font-size:.92rem;width:6.5rem;padding:6px 9px;border-radius:9px;border:1px solid rgba(13,35,80,.18);text-transform:none;letter-spacing:0}

.g-team-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.g-team-h h3,.g-team-h h4{margin:0;font-size:1.02rem}
.g-team-n{margin-left:auto;font-size:.8rem;color:#5b6b86;font-variant-numeric:tabular-nums}
.g-team{border-left:3px solid var(--tint,#0d2350)}
.g-drop{margin:-8px 0 16px;text-align:right}

.g-pools{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 14px}
.g-pool{border:1px solid var(--m-line,rgba(13,35,80,.10));border-radius:var(--m-r-sm,12px);padding:11px 14px;background:#fbfcfe}
.g-pool h4{margin:0 0 6px;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:#5b6b86}
.g-pool ol{margin:0;padding-left:1.1rem;font-size:.9rem;line-height:1.6}
.g-pool-h{margin:14px 0 6px;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:#5b6b86}

.g-courts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.g-court{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid rgba(13,35,80,.14);background:#fff;font-size:.87rem}
.g-inline{display:inline}
.g-inline input,.mtable input{font:inherit;font-size:.85rem;padding:5px 8px;border-radius:8px;border:1px solid rgba(13,35,80,.16)}

.g-pass .g-link input{width:100%;font:inherit;font-size:.82rem;padding:9px 11px;border-radius:10px;border:1px solid rgba(13,35,80,.16);background:#f6f8fc;color:#33415c}

.g-do{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:0 0 16px}
.g-act{margin:0}
.g-act h3{margin:0 0 6px;font-size:.95rem}
.g-act p{margin:0 0 10px;font-size:.86rem;color:#5b6b86;line-height:1.5}
.g-mini{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;margin-bottom:6px}
.g-rehearse{border-left:3px solid #d97706}

@media (max-width:760px){
  .g-state-nums{margin-left:0;width:100%}
  .g-steps{grid-template-columns:1fr 1fr}
  .g-fmt-row input{width:5rem}
}

/* =======================================================================
   The scoring screen — one thumb, bright sunlight, no menus
   ======================================================================= */
.sc{max-width:34rem;margin:0 auto;padding:12px 14px 40px}
.sc-gate{max-width:32rem;margin:0 auto;padding:60px 20px}
.sc-gate-box{background:#fff;border-radius:18px;padding:26px;box-shadow:0 10px 30px -14px rgba(13,35,80,.3)}
.sc-name{max-width:26rem;margin:40px auto;display:flex;flex-direction:column;gap:12px;text-align:center}
.sc-name input{font:inherit;font-size:1.1rem;padding:14px 16px;border-radius:14px;border:1px solid rgba(13,35,80,.2);text-align:center}

.sc-top{display:flex;align-items:center;gap:12px;padding:6px 2px 14px}
.sc-top b{display:block;font-size:1.1rem;color:#0d2350}
.sc-top small{display:block;font-size:.8rem;color:#5b6b86}
.sc-out{margin-left:auto;font-size:.8rem;color:#1049a9;text-decoration:none}

.sc-card{border-radius:20px;background:#fff;padding:16px;box-shadow:0 12px 34px -18px rgba(13,35,80,.4);border-top:4px solid var(--tint,#0d2350)}
.sc-meta{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:.76rem;color:#5b6b86;margin-bottom:10px}
.sc-meta span:first-child{color:var(--tint,#0d2350);font-weight:700}
.sc-rule{margin-left:auto}

.sc-clock{text-align:center;font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;color:#8a97ab;letter-spacing:.02em;padding:4px 0 10px}
.sc-clock.on{color:#0d2350}
.sc-clock.warn{color:#c2410c}
.sc-clock.over{color:#b91c1c}

.sc-tally{text-align:center;font-size:.95rem;color:#33415c;margin:-4px 0 8px}
.sc-tally b{font-size:1.2rem;font-variant-numeric:tabular-nums}
.sc-sets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 12px}
.sc-set{font-size:.82rem;font-variant-numeric:tabular-nums;padding:3px 10px;border-radius:999px;background:rgba(13,35,80,.06);color:#4a5a75}
.sc-set.on{background:var(--tint,#0d2350);color:#fff}

.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sc-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.sc-team{font-size:.92rem;font-weight:650;color:#0d2350;text-align:center;line-height:1.25;min-height:2.4em;display:flex;align-items:center;justify-content:center;word-break:break-word}
.sc-plus{border:0;border-radius:18px;background:var(--tint,#0d2350);color:#fff;padding:26px 8px;font:inherit;cursor:pointer;transition:transform .08s ease,filter .15s ease}
.sc-plus span{font-size:3.4rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.sc-plus:active{transform:scale(.97);filter:brightness(1.1)}
.sc-minus{border:1px solid rgba(13,35,80,.16);background:#fff;color:#5b6b86;border-radius:12px;padding:10px;font:inherit;font-size:.86rem;cursor:pointer}
.sc-minus:active{background:#f2f5fa}

.sc-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:16px;padding-top:14px;border-top:1px solid rgba(13,35,80,.08)}
.sc-acts .cta{flex:1 1 auto}
.sc-done{font-size:.88rem;color:#0a5c2e;font-weight:600}

.sc-queue{margin-top:18px;background:#fff;border-radius:16px;padding:14px 16px;border:1px solid rgba(13,35,80,.09)}
.sc-queue h3{margin:0 0 8px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#5b6b86}
.sc-queue ol{margin:0;padding-left:1.1rem}
.sc-queue li{padding:4px 0;font-size:.9rem;line-height:1.35}
.sc-queue small{display:block;font-size:.75rem;color:#5b6b86}

.sc-empty{background:#fff;border-radius:18px;padding:28px 20px;text-align:center;border:1px solid rgba(13,35,80,.09)}
.sc-empty h2{margin:0 0 8px;font-size:1.1rem}
.sc-empty p{color:#5b6b86;font-size:.9rem;margin:0 0 16px}
.sc-note{background:#fff8ec;border-left:3px solid #d97706;padding:10px 13px;border-radius:0 10px 10px 0;font-size:.88rem}

.sc-busy{opacity:.65}
.sc-lost::before{content:'Lost the signal — trying again';display:block;background:#fdf0f0;color:#8e1220;text-align:center;font-size:.82rem;font-weight:600;padding:7px;border-radius:10px;margin-bottom:10px}

@media (max-width:380px){
  .sc-plus{padding:20px 6px}
  .sc-plus span{font-size:2.8rem}
}
/* ============================================================
   The Community Games -- public live results page (.gm-*)
   ============================================================ */

#gm .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}

.gm-warn{margin:22px 0 0;padding:14px 18px;border-radius:var(--m-r-md,16px);
  background:#fffbeb;border:1px solid #fcd34d;color:#78350f;font-size:.95rem;line-height:1.55}
.gm-warn strong{color:#7c2d12}

.gm-hold{margin:26px 0 0;padding:34px 30px;border-radius:var(--m-r-lg,18px);
  background:#f8fafc;border:1px solid #e2e8f0;max-width:62ch}
.gm-hold h2{margin:0 0 10px;font-size:1.35rem;color:#0f172a}
.gm-hold p{margin:0;color:#475569;line-height:1.65}

/* ---- competition tabs ---- */
.gm-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}
.gm-tab{--gm-tint:#1049a9;display:flex;flex-direction:column;gap:2px;
  padding:11px 18px;border-radius:999px;text-decoration:none;
  background:#fff;border:1px solid #e2e8f0;color:#334155;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.gm-tab span{font-weight:700;font-size:.98rem;line-height:1.2}
.gm-tab small{font-size:.76rem;color:#94a3b8;font-variant-numeric:tabular-nums}
.gm-tab:hover{border-color:var(--gm-tint);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(15,23,42,.07)}
.gm-tab.on{background:var(--gm-tint);border-color:var(--gm-tint);color:#fff}
.gm-tab.on small{color:rgba(255,255,255,.78)}
.gm-tab:focus-visible{outline:3px solid var(--gm-tint);outline-offset:2px}

/* ---- blocks ---- */
.gm-block{margin:34px 0 0}
.gm-h{margin:0 0 14px;font-size:1.18rem;letter-spacing:.01em;color:#0f172a;
  display:flex;align-items:center;gap:12px}
.gm-h::after{content:"";flex:1;height:1px;background:#e2e8f0}
.gm-empty{margin:0;color:#64748b;font-style:italic}

/* ---- live cards ---- */
.gm-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.gm-card{--gm-tint:#1049a9;position:relative;overflow:hidden;
  background:#fff;border:1px solid #e2e8f0;border-radius:var(--m-r-lg,18px);
  padding:18px 20px 20px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.gm-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--gm-tint)}
.gm-card-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.gm-comp{font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gm-tint)}
.gm-where{font-size:.82rem;color:#64748b}
.gm-dot{width:9px;height:9px;border-radius:50%;background:#dc2626;flex:none;
  box-shadow:0 0 0 0 rgba(220,38,38,.55);animation:gmPulse 1.8s infinite}
@keyframes gmPulse{70%{box-shadow:0 0 0 9px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}

.gm-clock{margin:8px 0 12px;font-size:1.55rem;font-weight:800;color:#0f172a;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.gm-clock.low{color:#b91c1c}

.gm-teams{display:flex;flex-direction:column;gap:8px;margin:2px 0 0}
.gm-team{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 14px;border-radius:var(--m-r-sm,12px);background:#f8fafc}
.gm-tn{font-weight:700;color:#0f172a;line-height:1.25}
.gm-ts{font-size:1.6rem;font-weight:800;color:var(--gm-tint);
  font-variant-numeric:tabular-nums;min-width:1.4em;text-align:right}
.gm-ts.pop{animation:gmPop .45s ease}
@keyframes gmPop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}

.gm-sub{margin:12px 0 0;font-size:.86rem;color:#475569;font-variant-numeric:tabular-nums}
.gm-rule{margin:4px 0 0;font-size:.78rem;color:#94a3b8}

/* ---- next up ---- */
.gm-next{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gm-next li{--gm-tint:#1049a9;display:flex;flex-direction:column;gap:2px;
  padding:12px 16px;background:#fff;border:1px solid #e2e8f0;
  border-left:4px solid var(--gm-tint);border-radius:var(--m-r-sm,12px)}
.gm-nx-t{font-weight:700;color:#0f172a}
.gm-nx-t em{font-style:normal;color:#94a3b8;font-weight:600;padding:0 4px}
.gm-nx-m{font-size:.82rem;color:#64748b}

/* ---- tables ---- */
.gm-tables{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.gm-tbl-w{background:#fff;border:1px solid #e2e8f0;border-radius:var(--m-r-lg,18px);
  padding:16px 18px 8px;overflow-x:auto}
.gm-p{margin:0 0 10px;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gm-tint,#1049a9);font-weight:800}
.gm-tbl{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.gm-tbl th,.gm-tbl td{padding:9px 6px;text-align:right;white-space:nowrap}
.gm-tbl thead th{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:#94a3b8;font-weight:700;border-bottom:1px solid #e2e8f0}
.gm-tbl tbody th{text-align:left;font-weight:700;color:#0f172a;white-space:normal;
  min-width:9.5em;padding-left:8px}
.gm-tbl thead th:nth-child(2){text-align:left;padding-left:8px}
.gm-c-pos{width:1.9em;text-align:center !important;color:#94a3b8;font-weight:700}
.gm-c-pts{font-weight:800;color:#0f172a}
.gm-row{border-bottom:1px solid #f1f5f9}
.gm-row:last-child{border-bottom:0}
.gm-row.up{background:color-mix(in srgb,var(--gm-tint,#1049a9) 7%,#fff)}
.gm-row.up .gm-c-pos{color:var(--gm-tint,#1049a9)}
.gm-note{margin:12px 0 0;font-size:.83rem;color:#64748b;line-height:1.6;max-width:78ch}

/* ---- results ---- */
.gm-res{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gm-res li{--gm-tint:#1049a9;display:flex;flex-direction:column;gap:4px;
  padding:12px 16px;background:#fff;border:1px solid #e2e8f0;
  border-left:4px solid var(--gm-tint);border-radius:var(--m-r-sm,12px)}
.gm-rs-m{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;font-weight:700}
.gm-rs-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gm-rs-t{color:#64748b}
.gm-rs-t.won{color:#0f172a;font-weight:800}
.gm-rs-s{font-weight:800;color:var(--gm-tint);font-variant-numeric:tabular-nums;
  padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--gm-tint) 9%,#fff)}
.gm-rs-n{font-size:.78rem;color:#b45309}

.gm-foot{margin:34px 0 0;font-size:.86rem;color:#94a3b8;max-width:70ch}

@media (max-width:560px){
  .gm-clock{font-size:1.35rem}
  .gm-ts{font-size:1.4rem}
  .gm-tab{padding:9px 14px}
  .gm-tbl th,.gm-tbl td{padding:8px 4px}
  .gm-tbl tbody th{min-width:8em}
}
@media (prefers-reduced-motion:reduce){
  .gm-dot{animation:none}
  .gm-ts.pop{animation:none}
  .gm-tab{transition:none}
}

/* ---- champions ---- */
.gm-champs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.gm-champ{--gm-tint:#1049a9;position:relative;overflow:hidden;padding:20px 22px;
  border-radius:var(--m-r-lg,18px);background:#fff;border:1px solid #e2e8f0;
  box-shadow:0 10px 30px rgba(15,23,42,.06);display:flex;flex-direction:column;gap:4px}
.gm-champ::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--gm-tint)}
.gm-ch-c{margin-top:4px;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:800;color:var(--gm-tint)}
.gm-ch-t{font-size:1.45rem;font-weight:800;color:#0f172a;line-height:1.2}
.gm-ch-r{font-size:.84rem;color:#64748b}

/* ---- knockout decider: level at full time, somebody has to go through ---- */
.sc-decide{display:flex;flex-direction:column;gap:10px;width:100%;
  padding:16px 18px;border-radius:16px;background:#fffbeb;border:1px solid #fcd34d}
.sc-decide-h{margin:0;font-weight:800;color:#7c2d12;font-size:1.02rem;line-height:1.35}
.sc-decide-s{margin:0 0 4px;color:#92400e;font-size:.88rem;line-height:1.5}
.sc-decide .cta{width:100%;justify-content:center}

/* ---- referee clock controls on the scoring screen ---- */
.sc-time{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.sc-time .mini-btn{padding:7px 12px;font-size:.86rem}
.sc-added{font-size:.8rem;font-weight:700;color:#b45309;
  padding:3px 10px;border-radius:999px;background:#fffbeb;border:1px solid #fde68a}
.sc-clock.held{color:#b45309}

/*DESKTOP-START*/
/* ==================================================================
   v169 - Committee tools on a desktop screen
   The members app was capped at 1180px, the same reading box the
   public pages use. Committee work is not reading: it is tables,
   rosters and forms. On a 1600px+ screen that cap left more than half
   the glass empty while the data column squeezed to 536px beside the
   helper rail. From 1281px up the app widens with the screen instead,
   to a sensible ceiling. Nothing below 1281px changes, and every rule
   is scoped to body:has(main.m-shell) so the public site is untouched.
   ================================================================== */
@media (min-width:1281px){
  body:has(main.m-shell) .m-app:not(.solo),
  body:has(main.m-shell) .site-header .wrap,
  body:has(main.m-shell) .site-footer .wrap,
  body:has(main.m-shell) footer .wrap{max-width:min(1720px,94vw)}
  body:has(main.m-shell) .m-app:not(.solo){grid-template-columns:256px minmax(0,1fr);gap:30px}
  body:has(main.m-shell) .m-app .mtable{font-size:.9rem}
  body:has(main.m-shell) .m-app .mtable th,
  body:has(main.m-shell) .m-app .mtable td{padding-left:12px;padding-right:12px}
  body:has(main.m-shell) .m-main .tiles,
  body:has(main.m-shell) .m-col .tiles{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  body:has(main.m-shell) .m-main .stat-grid,
  body:has(main.m-shell) .m-col .stat-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
/* The helper column used to widen here. It now goes under the data instead -
   see DESKTOP2 at the end of this file - so there is nothing to widen. */
/* Long lists: the column headings stay put under the page bar, so you can
   still tell which column you are reading 200 rows down. Only takes effect
   where the table is not inside its own scrolling box; where it is, the
   heading simply sits where it always did. */
@media (min-width:1281px){
  /* overflow:clip instead of hidden - it still trims the rounded corners but,
     unlike hidden, it does not make the table its own scroll box, which is what
     was stopping the heading from sticking. */
  body:has(main.m-shell) .m-app .mtable{overflow:clip}
  body:has(main.m-shell) .m-app .mtable thead th{position:sticky;top:53px;z-index:2;background:#f6f8fc;box-shadow:inset 0 -1px 0 rgba(13,35,80,.14)}
}
/* Full-width form fields stop stretching to a foot and a half of empty box.
   Long-answer boxes (textareas) still get the whole width. */
@media (min-width:1281px){
  body:has(main.m-shell) .m-app .form-grid .field.full > input:not([type=checkbox]):not([type=radio]),
  body:has(main.m-shell) .m-app .form-grid .field.full > select,
  body:has(main.m-shell) .m-app .form-grid .field.full > .pick{max-width:38rem}
}
/*DESKTOP-END*/
/*DESKTOP2-START*/
/* ==================================================================
   v176 - The same desktop treatment on every committee page

   Nine pages put a helper column beside the data. Four of them reach for
   .m-side to do it - the class the navigation sidebar uses - so they
   inherited its sticky positioning, its height cap and its inner scrollbar,
   and the guidance ended up scrolling inside a 330px box of its own while
   the data column was squeezed to 1,026px. certs.php opted out of the two
   column shape by hand; that is now simply how committee pages work.

   The helper column goes under the data, its cards laid out in a row. Every
   table gets the full width on every page, and nothing scrolls inside
   anything. The navigation sidebar is a child of .m-app, never of .m-layout,
   so none of this touches it.
   ================================================================== */
body:has(main.m-shell) .m-app .m-layout{grid-template-columns:minmax(0,1fr)!important;gap:22px!important}

body:has(main.m-shell) .m-app .m-layout > .m-rail,
body:has(main.m-shell) .m-app .m-layout > .m-side{
  position:static;top:auto;max-height:none;overflow:visible;overscroll-behavior:auto;
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:16px;
  background:none;border:0;box-shadow:none;padding:0;border-radius:0;
}
/* The cards inside already carry their own white and their own border, so the
   column no longer draws a second card around them. */
body:has(main.m-shell) .m-app .m-layout > .m-rail > *,
body:has(main.m-shell) .m-app .m-layout > .m-side > *{flex:1 1 300px;margin:0;min-width:0}

@media (max-width:620px){
  body:has(main.m-shell) .m-app .m-layout > .m-rail,
  body:has(main.m-shell) .m-app .m-layout > .m-side{flex-direction:column}
}

/* A table that sits in its own scrolling box cannot have a sticky heading.
   Sticky resolves against the nearest scrollport, which is that box, so
   top:53px pushed the heading 53px DOWN from the top of the table and parked
   it on top of the first row - which is why the first name on the attendance
   sheet was half hidden. Where the box scrolls, the heading stays put. */
body:has(main.m-shell) .m-app .m-layout .m-main .table-scroll .mtable thead th{position:static}

/* A ghost button is an outline, not a filled one. The section-tint rule in
   pssc-crm.css (.m-shell.fam .cta:not(.alt)) carries one class more than the
   ghost rule beside it, so it won and painted ghost buttons with the section
   colour. On the People section that colour is also the ghost text colour, so
   the labels - "Edit in People", "Open enquiries" - were blue on blue and
   could not be read at all. The background goes back to white; the text and
   border colours are left as they were. */
body:has(main.m-shell) .m-shell .cta.ghost,
body:has(main.m-shell) .m-shell.fam .cta.ghost{background:#fff}
body:has(main.m-shell) .m-shell .cta.ghost:hover,
body:has(main.m-shell) .m-shell.fam .cta.ghost:hover{background:#f2f6fc}

/*DESKTOP2-END*/
/*TABLEACT-START*/
/* ==================================================================
   v181 - The actions cell, and the editor that opens inside a row

   A rule further up made every direct child of the last cell an inline-flex
   box, which was meant for the buttons. The certificates page wraps its
   actions in one span, so that span became the flex box and its children
   stretched to its height: with the editor open the row was 740px tall and
   the little "Open" chip was stretched into a 740px pill. The payments page
   opens a panel in a row of its own, and that panel collapsed to nothing,
   squeezing "Email the receipt" into a 40px column of single letters. That
   rule now names the controls instead of catching everything.

   Below 620px the tables already stack into cards and .tdv is deliberately a
   block, so everything here starts at 621px and leaves the phone alone.
   ================================================================== */
@media (min-width:621px){
  body:has(main.m-shell) .m-app .mtable td:last-child > .tdv{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;
  }
  body:has(main.m-shell) .m-app .mtable td:last-child > .tdv > *{margin:0}

  /* The editor drops onto its own line as a panel rather than sitting inline
     with the buttons and dragging the whole table out of shape. */
  body:has(main.m-shell) .m-app .cert-edit{flex:1 1 100%;min-width:0}

  /* A reference is one token and reads as one. Hyphenating PSSC-V-2026-336371
     across three lines made the column look broken. */
  body:has(main.m-shell) .m-app .mtable td.num:first-child,
  body:has(main.m-shell) .m-app .mtable th:first-child{white-space:nowrap;width:1%}
}

body:has(main.m-shell) .m-app .cert-edit > summary{font-weight:700}
body:has(main.m-shell) .m-app .cert-edit > form{
  max-width:620px;margin-top:10px;padding:16px 18px;
  background:#f6f8fc;border:1px solid rgba(13,35,80,.12);border-radius:12px;
}
/*TABLEACT-END*/