/* ============================================================
   NEWY ACTIVE CO — ACTIVITY PLANNER
   Single-file frontend. Stores shared data via store.php -> data.json
   ============================================================ */
:root{
  --sand:#FBF5EA; --sand2:#F3E9D7; --paper:#FFFFFF;
  --ink:#16263C; --ink2:#52647A; --ink3:#8696A6;
  --line:#EADFCC; --line2:#F0E7D7;
  --coral:#FF5A3C; --coral-d:#E13E1E;
  --teal:#0E9C9C; --sun:#FFB020; --blue:#2F6BFF; --grape:#7C5CFC; --green:#1FA85F; --pink:#F0529B;
  --radius:20px; --radius-s:13px;
  --shadow:0 18px 40px -22px rgba(22,38,60,.45);
  --shadow-s:0 6px 18px -10px rgba(22,38,60,.4);
  --fd:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --fb:'Outfit',ui-sans-serif,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--fb); color:var(--ink); background:var(--sand);
  background-image:radial-gradient(1200px 600px at 12% -8%, #FFE6C7 0%, transparent 55%),
                   radial-gradient(1000px 700px at 105% 0%, #CFEFEF 0%, transparent 50%);
  background-attachment:fixed; min-height:100vh; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--fd); margin:0; line-height:1.05; letter-spacing:-.01em}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit}
a{color:inherit}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px clamp(14px,3.5vw,34px);
  background:linear-gradient(110deg,#FF5A3C 0%,#FF7A2E 38%,#F59E0B 72%,#0E9C9C 130%);
  color:#fff; box-shadow:0 10px 30px -16px rgba(225,62,30,.7);
}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand .mark{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  font-family:var(--fd); font-weight:800; font-size:20px; backdrop-filter:blur(4px);
}
.brand .name{font-family:var(--fd); font-weight:800; font-size:21px; line-height:1; letter-spacing:-.02em}
.brand .sub{font-size:11.5px; opacity:.92; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.sync{
  display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
  padding:7px 12px; border-radius:999px;
}
.sync .dot{width:9px;height:9px;border-radius:50%;background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.6)}
.sync.ok .dot{background:#BFFFD6; animation:pulse 2.4s infinite}
.sync.save .dot{background:#FFE9A8; animation:pulse 1s infinite}
.sync.off .dot{background:#FFC7BC}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.tb-btn{
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff;
  padding:8px 13px; border-radius:999px; font-weight:600; font-size:13px; transition:.15s;
}
.tb-btn:hover{background:rgba(255,255,255,.28)}

/* ---------- Nav ---------- */
nav{
  position:sticky; top:0; z-index:30;
  display:flex; gap:6px; padding:12px clamp(14px,3.5vw,34px) 0;
  overflow-x:auto; scrollbar-width:none;
}
nav::-webkit-scrollbar{display:none}
.tab{
  white-space:nowrap; border:1px solid transparent; background:transparent; color:var(--ink2);
  padding:10px 16px; border-radius:999px; font-weight:600; font-size:14.5px; transition:.15s; display:flex; align-items:center; gap:8px;
}
.tab .ic{font-size:16px}
.tab:hover{color:var(--ink); background:rgba(255,255,255,.55)}
.tab.active{background:var(--ink); color:#fff; box-shadow:var(--shadow-s)}

/* ---------- Layout ---------- */
main{padding:18px clamp(14px,3.5vw,34px) 80px; max-width:1240px; margin:0 auto}
.banner{
  display:none; align-items:center; gap:12px; margin:6px 0 16px;
  background:#FFF4E0; border:1px solid #F4D79B; color:#8A5A12;
  padding:12px 16px; border-radius:14px; font-size:13.5px; font-weight:500;
}
.banner.show{display:flex}
.banner b{font-weight:700}
.viewhead{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:6px 0 20px}
.viewhead h2{font-size:clamp(26px,4.4vw,38px); font-weight:800}
.viewhead p{margin:4px 0 0; color:var(--ink2); font-size:14.5px; font-weight:500}
.viewhead .grow{flex:1}

/* ---------- Buttons ---------- */
.btn{
  border:none; background:var(--coral); color:#fff; padding:11px 18px; border-radius:12px;
  font-weight:700; font-size:14px; transition:.15s; display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 18px -10px rgba(225,62,30,.8);
}
.btn:hover{background:var(--coral-d); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--paper); color:var(--ink); border:1.5px solid var(--line); box-shadow:none}
.btn.ghost:hover{background:#fff; border-color:var(--ink3)}
.btn.dark{background:var(--ink)} .btn.dark:hover{background:#0c1a2c}
.btn.sm{padding:8px 13px; font-size:13px; border-radius:10px}
.btn.block{width:100%; justify-content:center}
.icbtn{border:none;background:transparent;color:var(--ink3);padding:6px;border-radius:8px;font-size:16px;transition:.15s;line-height:1}
.icbtn:hover{background:var(--sand2); color:var(--ink)}
.icbtn.danger:hover{background:#FFE6E0; color:var(--coral-d)}

/* ---------- Cards / grid ---------- */
.grid{display:grid; gap:16px}
.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:22px}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.card.lined{padding-left:20px}
.card.lined::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--c,#ccc)}
.statcard{padding:18px 18px 16px}
.statcard .n{font-family:var(--fd); font-weight:800; font-size:34px; line-height:1; letter-spacing:-.03em}
.statcard .l{margin-top:6px; color:var(--ink2); font-weight:600; font-size:13px; display:flex; align-items:center; gap:7px}
.statcard .l .ic{font-size:15px}

/* category chip */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; line-height:1}
.chip .d{width:8px;height:8px;border-radius:50%}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}

/* item card */
.item h4{font-size:17px; font-weight:700; margin-bottom:6px; padding-right:30px}
.item .desc{color:var(--ink2); font-size:13.5px; line-height:1.5; margin:0 0 12px; white-space:pre-wrap}
.item .meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--ink3); font-weight:600}
.item .row{display:flex; align-items:center; gap:6px; margin-top:14px; flex-wrap:wrap}
.item .topmenu{position:absolute; top:12px; right:10px}
.progress{height:7px; border-radius:99px; background:var(--sand2); overflow:hidden; margin:10px 0 4px}
.progress i{display:block; height:100%; background:var(--green); border-radius:99px}
.muted{color:var(--ink3); font-size:12.5px; font-weight:600}

/* ---------- Kanban ---------- */
.kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start}
.col{background:rgba(255,255,255,.55); border:1px solid var(--line2); border-radius:var(--radius); padding:14px; min-height:120px}
.col > .colhead{display:flex; align-items:center; gap:9px; margin-bottom:14px}
.col .colhead .badge{font-family:var(--fd); font-weight:800; font-size:15px}
.col .colhead .count{margin-left:auto; background:var(--sand2); color:var(--ink2); font-weight:700; font-size:12px; padding:3px 9px; border-radius:999px}
.col .colhead .bar{width:26px;height:5px;border-radius:99px}
.col .stack{display:grid; gap:12px}
.kcard{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:13px 14px; box-shadow:var(--shadow-s); position:relative; padding-left:16px; overflow:hidden}
.kcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c,#ccc)}
.kcard h4{font-size:15px; font-weight:700; padding-right:24px}
.kcard .meta{margin-top:8px}
.empty{text-align:center; padding:30px 16px; color:var(--ink3); font-weight:600; font-size:13.5px}
.empty .big{font-size:30px; margin-bottom:6px; opacity:.6}

/* ---------- Calendar ---------- */
.calwrap{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; min-width:0}
.caltop{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line2); flex-wrap:wrap}
.caltop h3{font-size:21px; font-weight:800}
.calnav{display:flex; gap:6px}
.calnav button{border:1px solid var(--line); background:var(--paper); width:38px;height:38px; border-radius:11px; font-size:17px; color:var(--ink); transition:.15s; display:grid; place-items:center}
.calnav button:hover{background:var(--sand2)}
.dow{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:var(--sand2)}
.dow span{padding:9px 6px; text-align:center; font-size:11.5px; font-weight:700; color:var(--ink2); letter-spacing:.06em; text-transform:uppercase}
.cgrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.cell{min-height:104px; border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); padding:7px 7px 6px; cursor:pointer; transition:.12s; position:relative; min-width:0}
.cell:nth-child(7n){border-right:none}
.cell:hover{background:#FFFBF3}
.cell.off{background:#FBF8F1; color:var(--ink3)}
.cell .num{font-weight:700; font-size:13px; color:var(--ink2)}
.cell.today .num{background:var(--coral); color:#fff; width:24px;height:24px; border-radius:50%; display:grid; place-items:center}
.evchip{display:block; max-width:100%; margin-top:5px; font-size:11.5px; font-weight:700; color:#fff; padding:3px 7px; border-radius:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; line-height:1.3; min-width:0}
.evchip.done{opacity:.55; text-decoration:line-through}
.evmore{margin-top:4px; font-size:11px; font-weight:700; color:var(--ink3)}
.callegend{display:flex; gap:12px; flex-wrap:wrap; padding:13px 18px; border-top:1px solid var(--line2); font-size:12px; font-weight:600; color:var(--ink2)}
.callegend span{display:inline-flex; align-items:center; gap:6px}

/* ---------- History ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.inp,.sel,textarea.inp{
  border:1.5px solid var(--line); background:var(--paper); border-radius:11px; padding:10px 13px; font-size:14px; color:var(--ink); width:100%; transition:.15s; outline:none;
}
.inp:focus,.sel:focus,textarea.inp:focus{border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,156,156,.12)}
.search{max-width:280px}
.filters .sel{max-width:200px; width:auto}
.histrow{display:flex; align-items:center; gap:14px; padding:13px 16px; background:var(--paper); border:1px solid var(--line); border-radius:13px; margin-bottom:10px; box-shadow:var(--shadow-s)}
.histrow .date{font-family:var(--fd); font-weight:800; text-align:center; min-width:54px; line-height:1.05}
.histrow .date .d{font-size:20px} .histrow .date .m{font-size:11px; color:var(--ink2); text-transform:uppercase; letter-spacing:.05em}
.histrow .body{flex:1; min-width:0}
.histrow .body h4{font-size:15.5px; font-weight:700}
.histrow .body .sub{color:var(--ink3); font-size:12.5px; font-weight:600; margin-top:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.barlist{display:grid; gap:9px}
.barrow{display:grid; grid-template-columns:130px 1fr 38px; align-items:center; gap:10px; font-size:13px; font-weight:600}
.barrow .track{height:11px; background:var(--sand2); border-radius:99px; overflow:hidden}
.barrow .track i{display:block; height:100%; border-radius:99px}
.barrow .v{text-align:right; color:var(--ink2); font-weight:700}

/* ---------- Contacts ---------- */
a.btn{text-decoration:none}
.contact .chead{display:flex; align-items:center; gap:13px; margin-bottom:13px}
.avatar{width:48px;height:48px;border-radius:15px; display:grid; place-items:center; color:#fff; font-family:var(--fd); font-weight:800; font-size:18px; flex:none; box-shadow:var(--shadow-s); overflow:hidden; background:var(--coral)}
.avatar.avatar-photo{background:var(--sand2); padding:0}
.avatar.avatar-photo img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.avatar-fallback::after{content:'?';display:grid;place-items:center;width:100%;height:100%;background:var(--coral);color:#fff}
.contact h4{font-size:17px; font-weight:700; padding-right:0; line-height:1.15}
.contact .role{font-size:12px; font-weight:700; color:var(--ink3); margin-top:3px; text-transform:uppercase; letter-spacing:.04em}
.clines{display:grid; gap:7px; margin-bottom:4px}
.cline{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink2); text-decoration:none}
a.cline:hover{color:var(--coral-d)}
.cline.notes{color:var(--ink3); font-weight:500; font-size:13px; align-items:flex-start; line-height:1.45}

/* ---------- Settings ---------- */
.section{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); margin-bottom:18px}
.section h3{font-size:19px; font-weight:800; margin-bottom:4px}
.section .hint{color:var(--ink2); font-size:13px; margin-bottom:16px; line-height:1.55}
.catrow{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line2)}
.catrow:last-child{border-bottom:none}
.catrow .sw{width:26px;height:26px;border-radius:9px; flex:none}
.catrow input{flex:1; border:1px solid transparent; background:transparent; font-size:14.5px; font-weight:600; padding:6px 8px; border-radius:8px}
.catrow input:focus{background:var(--sand); border-color:var(--line); outline:none}
.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-bottom:6px; letter-spacing:.01em}
.danger-zone{border:1px solid #F3C9C0; background:#FFF6F4}
.danger-zone h3{color:var(--coral-d)}

/* ---------- Modal ---------- */
.scrim{position:fixed; inset:0; background:rgba(16,26,40,.5); backdrop-filter:blur(3px); z-index:90; display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto}
.scrim.show{display:flex; animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--paper); border-radius:22px; width:100%; max-width:560px; box-shadow:0 40px 90px -30px rgba(16,26,40,.6); animation:rise .2s ease; margin:auto 0; overflow:hidden}
@keyframes rise{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}
.modal .mhead{display:flex; align-items:center; gap:10px; padding:20px 22px 14px}
.modal .mhead h3{font-size:21px; font-weight:800; flex:1}
.modal .mbody{padding:0 22px 6px; max-height:62vh; overflow-y:auto}
.modal .mfoot{display:flex; gap:10px; justify-content:flex-end; padding:16px 22px 20px}
.swatches{display:flex; gap:9px; flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:9px; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line); cursor:pointer; transition:.12s}
.swatch:hover{transform:scale(1.08)}
.swatch.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink)}
.checks{display:grid; gap:8px; margin:4px 0 10px}
.checkrow{display:flex; align-items:center; gap:10px; background:var(--sand); border:1px solid var(--line2); border-radius:10px; padding:8px 10px}
.checkrow input[type=checkbox]{width:18px;height:18px; accent-color:var(--green); flex:none}
.checkrow .t{flex:1; font-size:13.5px; font-weight:500}
.checkrow .t.done{text-decoration:line-through; color:var(--ink3)}
.addcheck{display:flex; gap:8px}

/* toast */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px; font-weight:600; font-size:14px; z-index:120; opacity:0; transition:.25s; box-shadow:var(--shadow); pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:760px){
  .kanban{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .barrow{grid-template-columns:90px 1fr 32px}
  .cell{min-height:78px}
  .filters .sel,.search{max-width:none; width:100%}
}
.spin{width:16px;height:16px;border:2.5px solid var(--line); border-top-color:var(--coral); border-radius:50%; animation:rot .7s linear infinite; display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.loadwrap{display:grid; place-items:center; min-height:50vh; gap:14px; color:var(--ink2); font-weight:600}

/* nav items are real page links in the multi-page build */
a.tab{text-decoration:none}

/* ---------- Calendar: side legend + event-status colour coding ---------- */
.callayout{display:grid; grid-template-columns:minmax(0,1fr) 234px; gap:16px; align-items:start}
.legend-side{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px}
.legend-side h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink2); margin-bottom:11px; font-family:var(--fb); font-weight:700}
.leglist{display:grid; gap:9px}
.legrow{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ink)}

/* status chips on the calendar (colour = category via --cc, style = status) */
.evchip{border:1.5px solid transparent}
.evchip.s-confirmed{background:var(--cc); color:#fff}
.evchip.s-unconfirmed{background:#fff; color:var(--cc); border:1.5px dashed var(--cc)}
.evchip.s-booked{background:var(--cc); color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.evchip.s-cancelled{background:var(--sand2); color:var(--ink3); border:1.5px solid var(--line); text-decoration:line-through}
.evchip.s-done{background:var(--cc); color:#fff; opacity:.5; text-decoration:line-through}
.evchip.sample{display:inline-block; margin:0; cursor:default; white-space:nowrap}

/* small status pill (day view) */
.statpill{font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em}
.statpill.s-unconfirmed{background:#FFF1D6; color:#9A6A12}
.statpill.s-confirmed{background:#DBF5E6; color:#137A45}
.statpill.s-booked{background:#E2ECFF; color:#1E50C8}
.statpill.s-cancelled{background:#FBE2DC; color:#B5371B; text-decoration:line-through}
.statpill.s-done{background:var(--sand2); color:var(--ink3)}

@media (max-width:860px){ .callayout{grid-template-columns:1fr} }
/* Completed calendar status */
.evchip.s-completed{background:var(--cc); color:#fff; opacity:.58; text-decoration:line-through}
.statpill.s-completed{background:var(--sand2); color:var(--ink3)}

/* ---------- Completed event photos ---------- */
.photo-section{margin-top:16px; border:1px solid var(--line2); background:var(--sand); border-radius:14px; padding:14px}
.photo-head{display:flex; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:12px}
.photo-upload{position:relative; white-space:nowrap; cursor:pointer}

.upload-progress{margin:0 0 12px; background:var(--paper); border:1px solid var(--line2); border-radius:12px; padding:10px}
.upload-progress[hidden]{display:none!important}
.upload-progress-top{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; font-weight:800; color:var(--ink2); margin-bottom:7px}
.upload-track{height:10px; background:var(--sand2); border-radius:999px; overflow:hidden; border:1px solid var(--line2)}
.upload-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--coral),var(--sun)); border-radius:999px; transition:width .16s ease}

.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px}
.photo-card{background:var(--paper); border:1px solid var(--line2); border-radius:12px; overflow:hidden}
.photo-card img{width:100%; height:105px; object-fit:cover; display:block; background:var(--sand2)}
.photo-meta{display:grid; gap:5px; padding:8px; font-size:11px; color:var(--ink2)}
.photo-meta span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:var(--ink)}
.photo-meta a{font-weight:800; color:var(--blue); text-decoration:none}
.mini-danger{border:none; background:transparent; color:var(--coral-d); font-weight:800; text-align:left; padding:0; cursor:pointer; font-size:11px}
@media (max-width:760px){.photo-head{display:grid}.photo-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Mobile-friendly multi-category picker ---------- */
.catpick{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.catpick-btn{border:1.5px solid var(--line); background:var(--paper); color:var(--ink2); border-radius:999px; padding:8px 11px; font-weight:800; font-size:12.5px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; transition:.12s; touch-action:manipulation}
.catpick-btn .d{width:9px;height:9px;border-radius:99px;background:var(--cat); box-shadow:0 0 0 3px color-mix(in srgb, var(--cat), transparent 82%)}
.catpick-btn:hover{transform:translateY(-1px); border-color:var(--cat)}
.catpick-btn.on{background:color-mix(in srgb, var(--cat), white 86%); border-color:var(--cat); color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat), transparent 20%)}
@media (max-width:760px){.catpick-btn{padding:10px 12px; font-size:13px}}

/* Calendar category split colours. Multiple categories divide the chip background evenly. */
.evchip.s-confirmed{background:var(--cat-bg,var(--cc)); color:#fff}
.evchip.s-booked{background:var(--cat-bg,var(--cc)); color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.evchip.s-completed{background:var(--cat-bg,var(--cc)); color:#fff; opacity:.58; text-decoration:line-through}
.evchip.s-done{background:var(--cat-bg,var(--cc)); color:#fff; opacity:.5; text-decoration:line-through}
.evchip.s-unconfirmed{background:linear-gradient(#fff,#fff) padding-box, var(--cat-bg,var(--cc)) border-box; color:var(--cc); border:2px dashed transparent}
.evchip.s-cancelled{background:var(--sand2); color:var(--ink3); border:1.5px solid var(--line); text-decoration:line-through}

/* ---------- Ticket Tailor ---------- */
.tt-types{display:grid;gap:8px}
.tt-type{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.tt-tname{min-width:100px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.tt-tsold{min-width:50px;text-align:right;font-weight:800;font-family:var(--fd);font-size:14px}

.ticket-panel{border:1px solid var(--line);background:var(--cream);border-radius:18px;padding:14px;margin:12px 0;box-shadow:var(--shadow-soft)}
.ticket-panel a{color:var(--teal-d);font-weight:800;text-decoration:none}
.ticket-panel .progress i{background:var(--teal)}

/* ---- Clickable ticket event cards ---- */
.tt-eventcard{cursor:pointer;transition:.15s;position:relative}
.tt-eventcard:hover{border-color:var(--teal);box-shadow:0 6px 22px rgba(14,156,156,.14);transform:translateY(-1px)}
.tt-viewholders{margin-top:12px;font-size:12.5px;font-weight:800;color:var(--teal);letter-spacing:.01em;opacity:.85}
.tt-eventcard:hover .tt-viewholders{opacity:1}

/* ---- Ticket holders window ---- */
.att-head{margin-bottom:14px}
.att-evname{font-family:var(--fd);font-weight:800;font-size:19px;line-height:1.2;color:var(--ink)}
.att-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.att-stat{border-radius:14px;padding:12px 10px;text-align:center;border:1px solid var(--line2)}
.att-stat .att-n{display:block;font-family:var(--fd);font-weight:800;font-size:28px;line-height:1}
.att-stat .att-l{display:block;margin-top:3px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.att-stat.returns{background:#DFF3F3;border-color:#BFE7E7}
.att-stat.returns .att-n{color:var(--teal)}
.att-stat.returns .att-l{color:#0B7A7A}
.att-stat.news{background:#FFEFE9;border-color:#FFD8C9}
.att-stat.news .att-n{color:var(--coral)}
.att-stat.news .att-l{color:var(--coral-d)}
.att-stat.total{background:var(--sand2);border-color:var(--line)}
.att-stat.total .att-n{color:var(--ink)}
.att-stat.total .att-l{color:var(--ink2)}

.att-list{display:flex;flex-direction:column;gap:8px}
.att-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line2);border-radius:14px;background:var(--paper)}
.att-row.is-ret{border-left:3px solid var(--teal)}
.att-row.is-new{border-left:3px solid var(--coral)}
.att-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-family:var(--fd);font-size:16px;color:#fff;background:var(--ink3)}
.att-row.is-ret .att-avatar{background:var(--teal)}
.att-row.is-new .att-avatar{background:var(--coral)}
.att-body{flex:1;min-width:0}
.att-name{font-weight:700;font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.att-sub{font-size:12px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-tag{flex:0 0 auto;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.att-tag.att-ret{background:#DFF3F3;color:#0B7A7A}
.att-tag.att-new{background:#FFEFE9;color:var(--coral-d)}
@media (max-width:480px){
  .att-tag{font-size:10px;padding:3px 7px}
  .att-sub{white-space:normal}
}

/* ============================================================
   RESPONSIVE OVERHAUL  (mobile-first app shell)
   Added: bottom tab bar, "More" sheet, agenda calendar,
   bottom-sheet modals, larger touch targets.
   ============================================================ */

/* Accessibility: visible keyboard focus + respect reduced motion */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb, var(--teal), white 10%);
  outline-offset:2px; border-radius:8px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
}

/* The mobile chrome is hidden by default (desktop) */
.botnav{display:none}
.sheet-scrim{display:none}
.cal-mobile{display:none}

/* ---------- DESKTOP: add a "Clear completed" tool to the calendar ---------- */
.caltop .grow{flex:1}

/* ============================================================
   MOBILE  (≤768px)
   ============================================================ */
@media (max-width:768px){

  /* --- top bar: compact, single row, no wrapping --- */
  .topbar{
    flex-wrap:nowrap; gap:10px;
    padding:max(10px, env(safe-area-inset-top)) 16px 10px;
  }
  .brand .mark{width:36px;height:36px;border-radius:11px;font-size:18px}
  .brand .name{font-size:18px}
  .brand .sub{display:none}
  .topbar .tb-btn{display:none}              /* "Sync now" lives in the More sheet */
  .sync{padding:6px 10px;font-size:0}        /* hide label, keep the live dot */
  .sync .dot{margin:0}

  /* --- hide the desktop pill nav, show the bottom tab bar --- */
  nav#nav{display:none}

  .botnav{
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    position:fixed; left:0; right:0; bottom:0; top:auto; height:auto;
    gap:0; overflow:visible; z-index:60;
    background:rgba(255,255,255,.97); backdrop-filter:blur(14px) saturate(1.4);
    border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px -22px rgba(22,38,60,.55);
  }
  .botnav-item{
    -webkit-appearance:none; appearance:none;
    border:none; background:none; text-decoration:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:7px 4px 5px; border-radius:14px; color:var(--ink3);
    font-family:var(--fb); font-weight:700; font-size:11px; line-height:1;
    position:relative; transition:color .15s, background .15s;
  }
  .botnav-item .bic{font-size:21px; line-height:1; transition:transform .18s}
  .botnav-item .blab{letter-spacing:.01em}
  .botnav-item.active{color:var(--coral)}
  .botnav-item.active .bic{transform:translateY(-1px)}
  .botnav-item.active::before{
    content:""; position:absolute; top:2px; width:22px; height:3px; border-radius:99px;
    background:var(--coral);
  }
  .botnav-item:active{background:var(--sand2)}

  /* leave room for the bottom bar */
  main{padding:14px 16px calc(96px + env(safe-area-inset-bottom))}

  /* --- the "More" bottom sheet --- */
  .sheet-scrim{
    position:fixed; inset:0; z-index:95; display:flex; align-items:flex-end;
    background:rgba(16,26,40,.46);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease;
  }
  .sheet-scrim.show{opacity:1; visibility:visible; pointer-events:auto; backdrop-filter:blur(3px)}
  .sheet{
    width:100%; background:var(--paper); border-radius:24px 24px 0 0;
    padding:10px 14px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -30px 70px -24px rgba(16,26,40,.6);
    transform:translateY(102%); transition:transform .26s cubic-bezier(.32,.72,0,1);
  }
  .sheet-scrim.show .sheet{transform:none}
  .sheet-handle{width:42px;height:5px;border-radius:99px;background:var(--line);margin:4px auto 12px}
  .sheet-title{font-family:var(--fd);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);padding:0 6px 8px}
  .sheet-links{display:grid;gap:2px}
  .sheet-link{
    display:flex; align-items:center; gap:14px; text-decoration:none;
    padding:14px 12px; border-radius:14px; color:var(--ink); font-weight:700; font-size:16px;
    transition:background .12s;
  }
  .sheet-link:active{background:var(--sand)}
  .sheet-link.active{background:color-mix(in srgb,var(--coral),white 88%); color:var(--coral-d)}
  .sheet-link .sic{font-size:21px;width:26px;text-align:center}
  .sheet-link .sheet-go{margin-left:auto;color:var(--ink3);font-size:20px;font-weight:800}
  .sheet-sync{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-top:12px; padding-top:14px; border-top:1px solid var(--line2);
  }
  .sheet-sync .sync{background:var(--sand);border-color:var(--line);color:var(--ink2);font-size:12.5px;padding:7px 12px}
  .sheet-sync .sync .dot{background:var(--ink3)}
  .sheet-sync .sync.ok .dot{background:var(--green)}
  .sheet-sync .sync.off .dot{background:var(--coral)}
  .sheet-sync .sync.save .dot{background:var(--sun)}

  /* --- headers + buttons --- */
  .viewhead{margin:2px 0 16px; gap:10px}
  .viewhead h2{font-size:26px}
  .viewhead p{font-size:13.5px}
  .viewhead .grow{display:none}
  .viewhead > .btn{flex:1 1 100%; justify-content:center; padding:13px 16px}

  .btn{padding:12px 16px}
  .icbtn{padding:9px; font-size:18px; min-width:40px; min-height:40px; display:inline-grid; place-items:center}

  /* --- cards & stats: tighter, readable --- */
  .stats{grid-template-columns:repeat(2,1fr); gap:12px}
  .statcard .n{font-size:30px}
  .grid{gap:13px}

  /* --- list rows: bigger tap area --- */
  .histrow{padding:14px; gap:12px}
  .histrow .body h4{font-size:16px}

  /* ========== CALENDAR: swap grid → agenda ========== */
  .cal-desktop{display:none}
  .cal-mobile{display:block}

  .calbar{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--paper); border:1px solid var(--line); border-radius:16px;
    padding:10px 12px; box-shadow:var(--shadow-s); margin-bottom:10px;
  }
  .calbar h3{font-size:19px; font-weight:800; text-align:center; flex:1}
  .calnavbtn{
    border:1px solid var(--line); background:var(--paper); width:42px; height:42px;
    border-radius:12px; font-size:20px; color:var(--ink); display:grid; place-items:center;
  }
  .calnavbtn:active{background:var(--sand2)}
  .calbar2{display:flex; gap:8px; margin-bottom:14px}
  .calbar2 .btn{flex:1; justify-content:center}

  .agenda{display:grid; gap:14px}
  .agenda-day{
    background:var(--paper); border:1px solid var(--line); border-radius:18px;
    box-shadow:var(--shadow-s); overflow:hidden; display:grid;
    grid-template-columns:64px 1fr;
  }
  .agenda-day.is-today{border-color:var(--coral); box-shadow:0 0 0 1.5px var(--coral), var(--shadow-s)}
  .agenda-date{
    border:none; background:var(--sand); border-right:1px solid var(--line2);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    padding:14px 6px; cursor:pointer; font-family:var(--fb);
  }
  .agenda-date:active{background:var(--sand2)}
  .agenda-day.is-today .agenda-date{background:color-mix(in srgb,var(--coral),white 90%)}
  .ad-dow{font-size:11px; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em}
  .ad-num{font-family:var(--fd); font-weight:800; font-size:25px; line-height:1; color:var(--ink)}
  .ad-mon{font-size:11px; font-weight:700; color:var(--ink2); text-transform:uppercase}
  .ad-today{margin-top:3px; font-size:9.5px; font-weight:800; color:#fff; background:var(--coral); padding:1px 7px; border-radius:99px; letter-spacing:.04em}
  .agenda-list{display:grid}
  .agenda-ev{
    -webkit-appearance:none; appearance:none; text-align:left; width:100%;
    border:none; border-bottom:1px solid var(--line2); background:none;
    display:flex; align-items:center; gap:11px; padding:13px 13px;
    cursor:pointer; font-family:var(--fb);
  }
  .agenda-ev:last-child{border-bottom:none}
  .agenda-ev:active{background:var(--sand)}
  .agenda-ev .ae-bar{width:5px; align-self:stretch; min-height:34px; border-radius:99px; background:var(--cc,#ccc); flex:none}
  .agenda-ev .ae-body{flex:1; min-width:0; display:grid; gap:2px}
  .agenda-ev .ae-title{font-weight:700; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .agenda-ev .ae-sub{font-size:12px; font-weight:600; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .agenda-ev .statpill{flex:none}

  /* ========== DAY MODAL rows with inline delete ========== */
  /* (works on every screen, styled below globally) */

  /* ========== MODALS → bottom sheets ========== */
  .scrim{align-items:flex-end; padding:0}
  .modal{
    max-width:100%; width:100%; margin:0;
    border-radius:24px 24px 0 0; max-height:94vh;
    display:flex; flex-direction:column; animation:sheetUp .26s cubic-bezier(.32,.72,0,1);
  }
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
  .modal .mhead{padding:16px 18px 10px}
  .modal .mhead h3{font-size:19px}
  .modal .mbody{padding:0 18px 8px; max-height:none; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .modal .mfoot{
    padding:12px 18px calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line2); background:var(--paper);
    position:sticky; bottom:0; flex-wrap:wrap; gap:8px;
  }
  .modal .mfoot .btn{flex:1 1 140px; justify-content:center; margin:0!important}

  .two{gap:10px}
  .inp,.sel,textarea.inp{padding:12px 13px; font-size:16px}  /* 16px avoids iOS zoom-on-focus */
  .field label{font-size:13px}

  /* keep toasts above the bottom tab bar */
  .toast{bottom:calc(82px + env(safe-area-inset-bottom))}
}

/* very small phones */
@media (max-width:380px){
  .botnav-item .blab{font-size:10px}
  .stats{grid-template-columns:1fr 1fr}
  .agenda-day{grid-template-columns:58px 1fr}
}

/* ---------- DAY MODAL row + inline delete (all screens) ---------- */
.dayrow{display:flex; align-items:stretch; gap:8px; margin-bottom:8px}
.dayrow .dayrow-main{
  flex:1; min-width:0; display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:13px;
  padding:12px 14px; box-shadow:var(--shadow-s); transition:.12s;
}
.dayrow .dayrow-main:hover{border-color:var(--ink3)}
.dayrow .dayrow-main .body{flex:1; min-width:0}
.dayrow .dayrow-main .body h4{font-size:15.5px; font-weight:700}
.dayrow .dayrow-main .body .sub{color:var(--ink3); font-size:12.5px; font-weight:600; margin-top:3px; display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.dayrow .dayrow-del{
  flex:none; align-self:stretch; width:46px; border:1px solid var(--line); background:var(--paper);
  border-radius:13px; color:var(--ink3); font-size:17px; box-shadow:var(--shadow-s); transition:.12s;
}
.dayrow .dayrow-del:hover{background:#FFE6E0; color:var(--coral-d); border-color:#F3C9C0}

/* ---------- SUGGESTIONS PAGE ---------- */
.suggestion-layout{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.suggestion-form{position:sticky; top:18px;}
.suggestion-list{display:grid; gap:14px;}
.suggestion-card{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.suggestion-score{
  border:1px solid var(--line2);
  background:var(--sand);
  border-radius:18px;
  padding:14px 10px;
  text-align:center;
}
.suggestion-score .score-num{
  font-family:var(--fd);
  font-size:34px;
  line-height:1;
  font-weight:800;
  color:var(--ink);
}
.suggestion-score .score-lab{
  margin-top:3px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
}
.suggestion-score .score-split{
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  color:var(--ink2);
}
.suggestion-main h3{margin:0 0 6px; font-size:20px;}
.suggestion-main .sub{font-size:13px; color:var(--ink3); font-weight:700;}
.suggestion-main p{margin:11px 0 0; color:var(--ink2); font-size:14.5px; line-height:1.45;}
.suggestion-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px;}
.suggestion-actions .voted{border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,156,156,.12);}

@media(max-width:820px){
  .suggestion-layout{grid-template-columns:1fr;}
  .suggestion-form{position:static;}
}
@media(max-width:560px){
  .suggestion-card{grid-template-columns:1fr; gap:12px;}
  .suggestion-score{display:flex; align-items:center; justify-content:space-between; text-align:left; gap:10px;}
  .suggestion-score .score-num{font-size:30px;}
}

/* ---------- ADMIN SUGGESTIONS ---------- */
.admin-suggestion-card .field{margin-bottom:10px;}
.admin-suggestion-main textarea{resize:vertical;}
.admin-suggestion-card .suggestion-actions{margin-top:12px;}


/* ---------- MEMBERSHIP PAGE ---------- */
.membership-viewhead{flex-wrap:wrap}
.membership-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px}
.membership-stat{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;gap:3px}
.membership-stat strong{font-family:var(--fd);font-size:34px;line-height:1;color:var(--ink)}
.membership-stat span{font-size:13px;font-weight:700;color:var(--ink3)}
.membership-section{margin-top:28px}
.membership-section-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:14px}
.membership-section-head>div:first-child{flex:1}
.membership-section-head h3{font-family:var(--fd);font-size:24px;margin:0 0 3px}
.membership-section-head p{color:var(--ink3);font-size:13.5px;font-weight:600;margin:0}
.membership-card-head{display:flex;align-items:center;gap:12px;padding-right:38px}
.membership-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:16px;flex:none}
.membership-card-title{min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.membership-card-title h3{margin:0;font-size:18px}
.membership-status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.membership-status.active{background:#E5F6EB;color:#147A3B}
.membership-status.upcoming{background:#E8F0FF;color:#275BB5}
.membership-status.expired{background:#F1F3F5;color:#69727D}
.membership-detail-list{display:grid;gap:7px;margin-top:15px;color:var(--ink2);font-size:13.5px;line-height:1.35}
.membership-card-actions{margin-top:16px}
.membership-perk-list{display:grid;gap:12px}
.membership-perk-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start}
.membership-perk-icon{width:46px;height:46px;border-radius:15px;background:var(--sand);display:grid;place-items:center;font-size:22px}
.membership-perk-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.membership-perk-title h3{margin:0;font-size:18px}
.membership-perk-main p{margin:7px 0 0;color:var(--ink2);font-size:14px;line-height:1.45}
.membership-perk-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;color:var(--ink3);font-size:12.5px;font-weight:700}
.membership-perk-actions{display:flex;gap:5px}
@media(max-width:720px){
  .membership-stats{grid-template-columns:1fr}
  .membership-viewhead .grow{display:none}
  .membership-viewhead{align-items:stretch}
  .membership-viewhead>.btn{flex:1}
  .membership-perk-card{grid-template-columns:auto minmax(0,1fr)}
  .membership-perk-actions{grid-column:2;justify-content:flex-end}
}
.membership-type-list{display:grid;gap:16px}
.membership-type-card{padding:20px}
.membership-type-head{display:flex;align-items:center;gap:14px}
.membership-type-title{min-width:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.membership-type-title h3{margin:0;font-size:21px}
.membership-count-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#E5F6EB;color:#147A3B;font-size:11px;font-weight:900}
.membership-type-description{margin:14px 0 0;color:var(--ink2);font-size:14px;line-height:1.55;max-width:850px}
.membership-benefits{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.membership-benefits span{background:var(--sand);border-radius:999px;padding:6px 9px;font-size:12px;font-weight:700;color:var(--ink2)}
.membership-assigned-perks,.membership-perk-targets{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink3)}
.membership-perk-chip{display:inline-flex;border-radius:999px;padding:5px 8px;background:#FFF1CC;color:#72520A;font-size:11.5px;font-weight:800}
.membership-holder-block{margin-top:18px;border-top:1px solid var(--line);padding-top:15px}
.membership-holder-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:13px}
.membership-holder-heading span{background:var(--sand);min-width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font-weight:900}
.membership-holder-list{display:grid;gap:6px}
.membership-holder-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:13px;background:var(--sand)}
.membership-holder-row .membership-avatar{width:36px;height:36px;font-size:12px}
.membership-holder-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.membership-holder-info strong{font-size:13.5px}.membership-holder-info span{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis}
.membership-holder-expiry{font-size:11.5px;font-weight:800;color:var(--ink3);white-space:nowrap}
.membership-no-holders{color:var(--ink3);font-size:13px;padding:10px 0}
.membership-choice-list{display:grid;gap:8px;max-height:260px;overflow:auto;padding:2px}
.membership-choice{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;cursor:pointer;background:var(--paper)}
.membership-choice input{width:18px;height:18px;accent-color:var(--sun);flex:none}
.membership-choice span{display:flex;flex-direction:column;gap:2px}.membership-choice small{color:var(--ink3);font-size:11.5px}
@media(max-width:650px){.membership-holder-row{grid-template-columns:auto minmax(0,1fr)}.membership-holder-expiry{grid-column:2;white-space:normal}.membership-type-card{padding:16px}}