/* Activity Options Front Desk — a clean receptionist-app look in Activity Options' colours. */
:root{--navy:#0A3291;--navy-deep:#071F5C;--navy-soft:#E8EDFB;--sky:#2EA3F2;--orange:#F7941D;--orange-deep:#E07B00;--yellow:#F7DA00;--ink:#1F2937;--mid:#5B6474;--line:#E3E9F5;--bg:#F5F8FF;--card:#FFFFFF;--green:#1E8E5A;--green-bg:#E4F5EC;--amber:#B26A00;--amber-bg:#FFF1D6;--red:#B42318;--red-bg:#FDE7E5;--grey-bg:#EEF1F6;--radius:16px;--shadow:0 1px 2px rgba(10,50,145,.05),0 10px 28px rgba(10,50,145,.07)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:"Asap","Open Sans",sans-serif;font-weight:600;color:var(--navy-deep);letter-spacing:-.01em;line-height:1.2}
a{color:var(--navy);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}.wrap.narrow{max-width:760px}.wrap.mid{max-width:920px}
.text-mid{color:var(--mid)}.text-free{color:var(--green);font-weight:600}
main{min-height:60vh}

/* Buttons */
.btn{border-radius:999px;font-weight:600;padding:.62rem 1.25rem;border:2px solid transparent;font-family:"Open Sans",sans-serif}
.btn-sm{padding:.42rem .95rem;font-size:.92rem}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-deep);color:#fff}
.btn-orange{background:var(--orange);color:#fff}.btn-orange:hover{background:var(--orange-deep);color:#fff}
.btn-outline-navy{border-color:var(--navy);color:var(--navy);background:#fff}.btn-outline-navy:hover{background:var(--navy-soft);color:var(--navy)}
.btn-ghost{background:transparent;color:var(--navy);border-color:transparent}.btn-ghost:hover{background:var(--navy-soft)}
.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.form-control,.form-select{border-radius:12px;border:1.5px solid var(--line);padding:.6rem .85rem;font-size:1rem}
.form-control:focus,.form-select:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(46,163,242,.18)}
.form-label{font-weight:600;color:var(--navy-deep);margin-bottom:.3rem}
.form-text{color:var(--mid)}

/* Nav */
.site-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:1rem}
.logo{display:flex;align-items:center;gap:.7rem}.logo:hover{text-decoration:none}
.logo-box{background:var(--navy);border-radius:12px;padding:5px 10px;display:inline-flex}.logo-box img{height:40px;width:auto;display:block;border-radius:6px}
.logo-word{font-family:"Asap",sans-serif;font-weight:700;color:var(--navy-deep);font-size:1.15rem;letter-spacing:.02em}
.nav-links{display:flex;align-items:center;gap:.2rem}
.nav-links a,.nav-plain{color:var(--mid);font-weight:600;padding:.45rem .8rem;border-radius:999px;border:0;background:none;font-family:inherit;font-size:.95rem;cursor:pointer}
.nav-links a:hover,.nav-plain:hover{background:var(--navy-soft);color:var(--navy);text-decoration:none}
.nav-links a.active{background:var(--navy-soft);color:var(--navy)}
.nav-links a.btn{color:#fff;margin-left:.4rem}.nav-links a.btn:hover{background:var(--orange-deep)}
.nav-badge{display:inline-block;background:var(--orange);color:#fff;border-radius:999px;font-size:.72rem;padding:0 .45rem;margin-left:.2rem;line-height:1.4}
.nav-toggle{display:none;border:0;background:var(--navy-soft);color:var(--navy);border-radius:10px;font-size:1.3rem;padding:.2rem .6rem}
@media (max-width:860px){.nav-toggle{display:block}.nav-links{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:.6rem 20px 1rem}.site-nav.open .nav-links{display:flex}.nav-links a.btn{margin:.4rem 0 0}.logo-word{display:none}}

.admin-bar{background:var(--navy-deep);color:#fff}
.admin-bar .wrap{display:flex;gap:.2rem;overflow-x:auto;padding-top:.35rem;padding-bottom:.35rem}
.admin-bar a{color:#C9D4F5;font-weight:600;font-size:.9rem;padding:.35rem .8rem;border-radius:999px;white-space:nowrap}
.admin-bar a:hover,.admin-bar a.on{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}

/* Flash */
.flash-stack{background:#fff;border-bottom:1px solid var(--line)}.flash{padding:.7rem 1rem;border-radius:12px;margin:.6rem 0;font-weight:600}
.flash-success{background:var(--green-bg);color:var(--green)}.flash-error{background:var(--red-bg);color:var(--red)}.flash-info{background:var(--navy-soft);color:var(--navy)}

/* Cards */
.card{border:0;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--card)}
.card-soft{background:var(--navy-soft);box-shadow:none}
.tile{display:block;padding:1.1rem 1.2rem;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);color:var(--ink)}.tile:hover{text-decoration:none;transform:translateY(-1px)}
.tile .n{font-family:"Asap",sans-serif;font-size:2rem;font-weight:700;color:var(--navy);line-height:1}.tile .l{color:var(--mid);font-weight:600;font-size:.9rem;margin-top:.3rem}
.tile.warn .n{color:var(--amber)}.tile.bad .n{color:var(--red)}.tile.good .n{color:var(--green)}

/* Pills */
.pill{display:inline-block;border-radius:999px;padding:.12rem .7rem;font-size:.8rem;font-weight:700;line-height:1.6;white-space:nowrap}
.pill-current,.pill-registered,.pill-attended,.pill-complete,.pill-done{background:var(--green-bg);color:var(--green)}
.pill-expiring,.pill-waitlist,.pill-sent,.pill-pending{background:var(--amber-bg);color:var(--amber)}
.pill-expired,.pill-rejected,.pill-refused,.pill-no_show{background:var(--red-bg);color:var(--red)}
.pill-missing,.pill-cancelled,.pill-superseded,.pill-none{background:var(--grey-bg);color:var(--mid)}
.pill-pending_review,.pill-held{background:#E3F2FD;color:#0B63B5}

/* Hero */
.hero{background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,#1749C2 100%);color:#fff;position:relative;overflow:hidden}
.hero .wrap{position:relative;padding:4rem 20px 3.5rem;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero h1{color:#fff;font-size:2.6rem;margin:0 0 1rem}.hero h1 em{font-style:normal;color:var(--yellow)}
.hero p{font-size:1.12rem;color:#DCE5FF;max-width:560px}
.hero .mark{position:absolute;right:-60px;top:-60px;width:420px;opacity:.16;pointer-events:none}
.hero-card{background:#fff;color:var(--ink);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow)}
.hero-card h2{font-size:1.15rem;margin-bottom:.8rem}
.hero-card ul{margin:0;padding-left:1.1rem}.hero-card li{margin-bottom:.35rem}
.eyebrow{display:inline-block;background:rgba(247,218,0,.16);color:var(--yellow);border-radius:999px;padding:.2rem .8rem;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding:2.6rem 20px}.hero h1{font-size:2rem}}

/* Sections */
.section{padding:3rem 0}.section-tight{padding:2rem 0}
.section h2{font-size:1.7rem;margin-bottom:.4rem}.section .lead-sm{color:var(--mid);margin-bottom:1.6rem;max-width:640px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.step{background:#fff;border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow)}
.step .num{width:38px;height:38px;border-radius:12px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Asap",sans-serif;font-weight:700;font-size:1.1rem;margin-bottom:.9rem}
.step h3{font-size:1.1rem}.step p{color:var(--mid);margin:0}
.programs{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.program{background:#fff;border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow);border-top:5px solid var(--navy)}
.program:nth-child(2){border-top-color:var(--orange)}.program:nth-child(3){border-top-color:var(--sky)}.program:nth-child(4){border-top-color:var(--yellow)}
.program h3{font-size:1.02rem}.program p{color:var(--mid);font-size:.92rem;margin:0}
@media (max-width:860px){.steps,.programs{grid-template-columns:1fr}}
.band{background:var(--navy);color:#fff}.band .wrap{padding:2.2rem 20px;display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{color:#fff;font-size:1.4rem;margin:0 0 .3rem}.band p{color:#DCE5FF;margin:0;max-width:640px}

/* Activity cards */
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:960px){.act-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:620px){.act-grid{grid-template-columns:1fr}}
.act-card{display:flex;gap:1rem;background:#fff;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);color:var(--ink);transition:transform .12s}
.act-card:hover{text-decoration:none;transform:translateY(-2px)}
.act-date{flex:0 0 58px;height:64px;border-radius:12px;background:var(--navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.act-date .m{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);font-weight:700}.act-date .d{font-family:"Asap",sans-serif;font-size:1.6rem;font-weight:700;margin-top:.15rem}
.act-body{min-width:0;flex:1}.act-cat{font-size:.78rem;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.04em}
.act-body h3{font-size:1.08rem;margin:.2rem 0 .2rem}.act-meta{color:var(--mid);font-size:.9rem}
.act-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.month-h{font-size:1.25rem;margin:2rem 0 .9rem;padding-bottom:.4rem;border-bottom:2px solid var(--line)}
.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0}.filters a{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.3rem .85rem;font-weight:600;color:var(--mid);font-size:.9rem}.filters a.on,.filters a:hover{border-color:var(--navy);color:var(--navy);text-decoration:none}

/* Detail */
.detail-head{display:flex;gap:1.4rem;align-items:flex-start}.detail-head .act-date{flex-basis:76px;height:84px}.detail-head .act-date .d{font-size:2.1rem}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.4rem;margin:1.2rem 0}
.facts div{background:var(--navy-soft);border-radius:12px;padding:.7rem .9rem}.facts small{display:block;color:var(--mid);font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.06em}
@media (max-width:620px){.facts{grid-template-columns:1fr}.detail-head{flex-direction:column}}

/* Account */
.member-card{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:var(--shadow)}
.member-card h1{color:#fff;font-size:1.5rem;margin:0}.member-card .code{font-family:"Asap",sans-serif;font-size:1.7rem;letter-spacing:.18em;color:var(--yellow);font-weight:700}
.member-card small{color:#C9D4F5}
.list{list-style:none;margin:0;padding:0}.list li{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.85rem 0;border-bottom:1px solid var(--line)}.list li:last-child{border-bottom:0}
.list .t{font-weight:600}.list .s{color:var(--mid);font-size:.9rem}

/* Renewals */
.ren-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin:1.2rem 0 1.6rem}
@media (max-width:760px){.ren-summary{grid-template-columns:repeat(2,1fr)}}
.ren-row{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.2rem 1.3rem;margin-bottom:1rem;border-left:6px solid var(--line)}
.ren-current{border-left-color:var(--green)}.ren-expiring{border-left-color:var(--orange)}.ren-expired{border-left-color:var(--red)}.ren-missing{border-left-color:#B8C2D9}.ren-pending_review{border-left-color:var(--sky)}
.ren-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.ren-head h3{font-size:1.1rem;margin:0;flex:1}.ren-dates{color:var(--mid);font-size:.9rem}
.ren-desc{color:var(--mid);margin:.5rem 0 .3rem}.ren-who{font-size:.88rem;color:var(--mid)}
.ren-note{background:var(--amber-bg);color:var(--amber);border-radius:10px;padding:.55rem .8rem;margin-top:.6rem;font-size:.92rem;font-weight:600}
.ren-actions{margin-top:.8rem}.ren-actions summary{cursor:pointer;font-weight:700;color:var(--navy)}
.ren-forms{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:.9rem}@media (max-width:760px){.ren-forms{grid-template-columns:1fr}}
.ren-form{background:var(--bg);border-radius:12px;padding:1rem}

/* Front desk chat */
.thread{display:flex;flex-direction:column;gap:.7rem;padding:1rem 0}
.bubble{max-width:78%;padding:.75rem 1rem;border-radius:18px;white-space:pre-wrap;word-wrap:break-word;box-shadow:var(--shadow);line-height:1.5}
.bubble-user{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:6px}
.bubble-assistant{align-self:flex-start;background:#fff;border-bottom-left-radius:6px}
.bubble-staff{align-self:flex-start;background:#FFF8D6;border-bottom-left-radius:6px;border:1px solid #F1E39A}
.bubble small{display:block;margin-top:.35rem;opacity:.7;font-size:.75rem}
.ask-box{position:sticky;bottom:0;background:var(--bg);padding:.8rem 0 1.2rem}
.ask-box form{display:flex;gap:.6rem}.ask-box textarea{flex:1;border-radius:16px;resize:vertical;min-height:52px}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem}.chips button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.3rem .8rem;font-size:.85rem;color:var(--navy);font-weight:600;cursor:pointer}.chips button:hover{border-color:var(--navy)}

/* Admin spine rows (rounded corner + coloured left bar) */
.spine-rows .srow{display:grid;grid-template-columns:1fr auto;gap:.6rem 1rem;align-items:center;background:#fff;border-radius:12px;border-left:6px solid var(--navy);padding:.75rem 1rem;margin-bottom:.55rem;box-shadow:0 1px 2px rgba(10,50,145,.06)}
.srow.s-green{border-left-color:var(--green)}.srow.s-amber{border-left-color:var(--orange)}.srow.s-red{border-left-color:var(--red)}.srow.s-grey{border-left-color:#B8C2D9}.srow.s-sky{border-left-color:var(--sky)}
.srow .t{font-weight:700}.srow .s{color:var(--mid);font-size:.88rem}.srow form{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:0}
.srow .form-select,.srow .form-control{padding:.3rem .6rem;font-size:.9rem;border-radius:9px;width:auto}
table.tbl{width:100%;border-collapse:separate;border-spacing:0 .4rem}table.tbl th{color:var(--mid);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding:0 .8rem}table.tbl td{background:#fff;padding:.6rem .8rem;vertical-align:middle}table.tbl tr td:first-child{border-radius:10px 0 0 10px}table.tbl tr td:last-child{border-radius:0 10px 10px 0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}

/* Footer */
.site-foot{background:#fff;border-top:1px solid var(--line);margin-top:3rem;padding:2.4rem 0 1.4rem}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}@media (max-width:860px){.foot-grid{grid-template-columns:1fr}}
.foot-logo{height:56px;border-radius:8px}.foot-h{font-family:"Asap",sans-serif;font-weight:700;color:var(--navy-deep);margin-bottom:.4rem}
.foot-links{display:flex;flex-direction:column;gap:.2rem}.foot-links a{font-size:.95rem}
.foot-mec{display:flex;gap:.7rem;align-items:center;color:var(--mid)}.foot-note{color:var(--mid);font-size:.8rem;margin:2rem 0 0;border-top:1px solid var(--line);padding-top:1rem}

/* Drag-and-drop upload (progressive enhancement over the plain file input) */
.dropzone{position:relative;border:2px dashed #B8C2D9;border-radius:14px;background:#fff;padding:1.1rem 1rem;text-align:center;transition:border-color .12s,background .12s,box-shadow .12s}
.dropzone.dz-enhanced input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropzone.dz-enhanced.dz-has-file input[type=file]{pointer-events:none}
.dropzone:not(.dz-enhanced) .dz-idle,.dropzone:not(.dz-enhanced) .dz-file{display:none}
.dropzone.dz-enhanced{cursor:pointer}
.dropzone.dz-over{border-color:var(--orange);background:#FFF6E8;box-shadow:0 0 0 4px rgba(247,148,29,.18)}
.dropzone:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.dz-idle{display:flex;flex-direction:column;gap:.15rem;align-items:center;color:var(--mid);pointer-events:none}
.dz-idle strong{color:var(--navy-deep)}.dz-or{font-size:.9rem}.dz-idle small{font-size:.78rem}
.dz-icon{width:40px;height:40px;border-radius:12px;background:var(--navy-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;margin-bottom:.35rem}
.dz-file{display:flex;align-items:center;justify-content:center;gap:.6rem;font-weight:600;color:var(--navy-deep)}
.dz-file[hidden]{display:none}.dz-size{color:var(--mid);font-weight:400;font-size:.9rem}
.dz-clear{border:0;background:var(--grey-bg);color:var(--mid);border-radius:999px;width:26px;height:26px;line-height:1;cursor:pointer;position:relative;z-index:2}.dz-clear:hover{background:var(--red-bg);color:var(--red)}
.dz-has-file{border-style:solid;border-color:var(--green);background:var(--green-bg)}
.dz-error{margin-top:.5rem;color:var(--red);font-weight:600;font-size:.9rem}.dz-error[hidden]{display:none}

/* Sign-in cheat sheet (DEMO_CHEATS=1) — collapsed by default */
.cheat{margin-top:1.1rem;border:1.5px dashed var(--sky);border-radius:14px;background:#F3F9FE;padding:.9rem 1.1rem}
.cheat summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:.1rem}
.cheat summary::-webkit-details-marker{display:none}
.cheat summary::after{content:"Show";position:absolute;right:1.1rem;top:.95rem;font-size:.8rem;font-weight:700;color:var(--navy)}
.cheat[open] summary::after{content:"Hide"}
.cheat{position:relative}
.eyebrow-sm{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.cheat-title{font-family:"Asap",sans-serif;font-weight:700;color:var(--navy-deep);font-size:1.05rem}
.cheat-hint{font-size:.85rem;color:var(--mid)}
.cheat[open] .cheat-hint{display:none}
.cheat p{margin:.8rem 0 .5rem}
.persona{display:flex;justify-content:space-between;align-items:center;gap:.8rem;background:#fff;border-radius:12px;padding:.65rem .8rem;margin-top:.5rem;box-shadow:0 1px 2px rgba(10,50,145,.06)}
.persona-text{display:flex;flex-direction:column;min-width:0;font-size:.9rem}.persona-text span{color:var(--mid);font-size:.82rem}
.persona-text code{font-size:.78rem;color:var(--navy-deep);background:var(--navy-soft);border-radius:6px;padding:.1rem .4rem;margin-top:.3rem;overflow-wrap:anywhere}
.persona form{margin:0;flex:0 0 auto}