/* App pages (/login, /join, /account, /checkin, /admin, /day-pass).
   Loaded after /assets/css/style.css and reuses its tokens, fonts, buttons and forms. */
:root{--ok:#2e7d46;--warn:#c98a12;--bad:#b3261e;--ok-bg:#e3efe5;--warn-bg:#f6ead0;--bad-bg:#f5dcd9}

.app-head .wrap{height:var(--head)}
.app-head .head-actions{gap:10px}
.app-head .head-actions a,.app-head .head-actions button{font:600 .95rem var(--body);color:var(--ink);background:none;border:0;cursor:pointer;text-decoration:none;padding:8px 4px}
.app-head .head-actions a:hover,.app-head .head-actions button:hover{text-decoration:underline}
.app-main{padding:clamp(28px,5vw,56px) 0 clamp(56px,8vw,96px);min-height:60vh}
.app-main h1{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:14px}
.app-main h2{font-size:clamp(1.6rem,3.6vw,2.2rem);margin-bottom:14px}
.narrow{max-width:560px}
.card{background:var(--cream-2);border:1px solid var(--line);padding:clamp(20px,3vw,32px);margin-bottom:16px}
.card h2,.card h3{margin-bottom:12px}
.stack-sm>*+*{margin-top:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.btn.small{padding:11px 16px;font-size:.92rem}
.btn.danger{background-color:var(--bad)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--leather-d);text-decoration:underline;cursor:pointer}
.msg{padding:12px 14px;border-left:4px solid var(--leather);background:var(--beige);margin:0 0 16px;max-width:none}
.msg.err{border-color:var(--bad);background:var(--bad-bg)}
.msg.ok{border-color:var(--ok);background:var(--ok-bg)}
.msg:empty{display:none}
.hidden{display:none!important}
.small-print{font-size:.92rem;color:var(--muted)}
/* A second line under a table value (e.g. name, then date); tables that hide it override this further down. */
.data .m-sub{display:block;margin-top:2px;font-size:.85rem;color:var(--muted)}
form.single{grid-template-columns:1fr}
.check{align-items:flex-start}
.check input{margin-top:.3em}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;font:700 .82rem/1 var(--body);text-transform:uppercase;letter-spacing:.06em;padding:7px 10px;border-radius:999px;background:var(--beige);color:var(--ink);white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.green,.pill.active{background:var(--ok-bg);color:#236036}
.pill.amber,.pill.overdue{background:var(--warn-bg);color:#8a5d06}
.pill.red,.pill.expired{background:var(--bad-bg);color:var(--bad)}
.pill.none{background:var(--beige);color:var(--muted)}
.pill.staff{background:var(--ok-bg);color:#236036}

/* member card + QR */
.member-card{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center}
.avatar{width:96px;height:96px;object-fit:cover;background:var(--beige);display:grid;place-items:center;font:400 2.2rem/1 var(--display);color:var(--leather);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.member-card h2{font-size:1.7rem;margin:0 0 6px}
.qr-box{background:#fff;padding:18px;max-width:360px;margin:0 auto;position:relative;border:1px solid var(--line)}
.qr-box svg{display:block;width:100%;height:auto}
.qr-timer{height:5px;background:var(--beige);margin-top:12px;overflow:hidden}
.qr-timer i{display:block;height:100%;background:var(--leather);transition:width 1s linear}
.qr-note{text-align:center;font-size:.92rem;color:var(--muted);margin:10px auto 0}
.qr-box.off svg{opacity:.08}
.qr-box .qr-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font-weight:700}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}

/* ===================================================== check-in (iPad) */
.checkin-body{background:var(--espresso);color:var(--cream);height:100vh;height:100dvh;overflow:hidden;margin:0}
.ci{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto}
.ci-top{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background-color:var(--leather);background-image:var(--grain);position:relative}
.ci-top::after{content:"";position:absolute;left:0;right:0;bottom:4px;border-bottom:1.5px dashed rgba(244,237,225,.45)}
.ci-top .brand span{color:var(--cream)}
.ci-top .brand img{width:52px;height:52px}
.ci-clock{font:400 2rem/1 var(--display)}
.ci-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center;padding:24px 40px;min-height:0}
.ci-cam{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden;border:2px dashed rgba(244,237,225,.4)}
.ci-cam video{width:100%;height:100%;object-fit:cover}
.ci-cam.mirror video{transform:scaleX(-1)}
.ci-cam .frame{position:absolute;inset:14%;border:4px solid rgba(244,237,225,.85);box-shadow:0 0 0 9999px rgba(0,0,0,.35)}
.ci-help h1{font-size:clamp(2.6rem,5vw,4.4rem);margin-bottom:18px}
.ci-help p{font-size:1.4rem;color:var(--muted-l);max-width:30ch}
.ci-bottom{display:flex;justify-content:space-between;gap:12px;padding:16px 24px 24px}
.ci-bottom .btn{font-size:1.15rem;padding:20px 28px}
.ci-btn-light{background:var(--cream)!important;color:var(--ink)!important}
.ci-btn-light::after{border-color:rgba(20,19,18,.35)!important}
.ci-start{position:fixed;inset:0;display:grid;place-items:center;background:rgba(15,15,14,.96);z-index:5;text-align:center;padding:24px}
.ci-start h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:14px}

.ci-result{position:fixed;inset:0;z-index:10;display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;padding:6vh 6vw;color:#fff}
.ci-result.green{background:#1f7a3d}
.ci-result.amber{background:#c98a12}
.ci-result.red{background:#a3221b}
.ci-result .ph{width:min(30vw,360px);aspect-ratio:3/4;background:rgba(0,0,0,.18);border:6px solid rgba(255,255,255,.9);overflow:hidden;display:grid;place-items:center;font:400 8rem/1 var(--display)}
.ci-result .ph img{width:100%;height:100%;object-fit:cover}
.ci-result>div{min-width:0}
.ci-result .big{font:400 clamp(3.4rem,7vw,7rem)/.9 var(--display);text-transform:uppercase;margin-bottom:20px}
.ci-result .name{font:700 clamp(2.2rem,4.4vw,3.6rem)/1.05 var(--slab);text-transform:uppercase;margin-bottom:14px}
.ci-result .detail{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;max-width:none;margin:0}
.ci-result .hint{position:absolute;bottom:22px;right:28px;font-size:1rem;opacity:.8}
.ci-result.noface{grid-template-columns:1fr;text-align:center}
.ci-result.noface .ph{display:none}

.ci-panel{position:fixed;inset:0;z-index:8;background:var(--espresso);padding:24px 40px;display:flex;flex-direction:column;gap:16px}
.ci-panel input{font-size:1.5rem;padding:18px;background:var(--espresso-2);color:var(--cream);border-color:rgba(244,237,225,.2);border-bottom-color:var(--leather-l)}
.ci-results{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;align-content:start}
.ci-results button{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;text-align:left;background:var(--espresso-2);color:var(--cream);border:1px solid var(--line-l);padding:12px;font:inherit;cursor:pointer}
.ci-results button:hover{border-color:var(--leather-l)}
.ci-results .avatar{width:72px;height:72px;font-size:1.6rem;background:#2b2a27;color:var(--leather-l)}
.ci-results b{display:block;font:700 1.3rem/1.1 var(--slab);text-transform:uppercase;margin-bottom:6px}
.ci-login{max-width:460px;margin:0 auto;background:var(--espresso-2);padding:28px;border:1px solid var(--line-l)}
.ci-login form{grid-template-columns:1fr}
@media (max-width:900px){.ci-stage{grid-template-columns:1fr;padding:16px}.ci-help{display:none}.ci-result{grid-template-columns:1fr;text-align:center}.ci-result .ph{width:46vw;margin:0 auto}}

/* ===================================================== admin */
.tabs{display:flex;gap:6px;box-shadow:inset 0 -2px 0 var(--ink);margin-bottom:24px;overflow-x:auto}
.tabs button{flex:none;background:none;border:0;font:700 1rem var(--body);padding:12px 16px;cursor:pointer;color:var(--muted);border-bottom:4px solid transparent;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--ink);border-color:var(--leather)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.stats div{background:var(--cream-2);border:1px solid var(--line);padding:18px}
.stats b{display:block;font:400 2.6rem/1 var(--display);margin-bottom:6px}
.stats span{color:var(--muted);font-weight:600}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar input[type=search],.toolbar input[type=date]{width:auto;flex:1 1 220px;padding:11px 12px}
.toolbar input[type=date]{flex:0 0 auto}
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);background:var(--cream-2)}
table.data{width:100%;border-collapse:collapse;font-size:.97rem}
table.data th{text-align:left;font:700 .8rem var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:12px;border-bottom:2px solid var(--line);white-space:nowrap}
table.data td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tr.click{cursor:pointer}
table.data tr.click:hover td{background:var(--beige)}
table.data .avatar{width:40px;height:40px;font-size:1rem}
.empty{padding:28px;text-align:center;color:var(--muted)}
dialog{border:0;padding:0;width:min(860px,100vw - 24px);max-height:calc(100dvh - 24px);background:var(--cream);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(15,15,14,.6)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;background-color:var(--leather);background-image:var(--grain);color:var(--cream);position:sticky;top:0;z-index:2}
.dlg-head h2{font-size:1.7rem;margin:0}
.dlg-head button{background:none;border:2px solid var(--cream);color:var(--cream);font:700 .95rem var(--body);padding:8px 14px;cursor:pointer}
.dlg-body{padding:24px}
.dlg-body section{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.dlg-body section:last-child{border-bottom:0;margin-bottom:0}
.dlg-body h3{font-size:1.25rem;margin-bottom:12px}
.photo-edit{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start}
.photo-edit .avatar{width:150px;height:190px;font-size:3rem}
@media (max-width:640px){.stats b{font-size:2rem}.photo-edit{grid-template-columns:1fr}.member-card{grid-template-columns:72px 1fr}.avatar{width:72px;height:72px}}
.secret{font:600 1.05rem/1.4 ui-monospace,Menlo,monospace;background:var(--beige);padding:12px;word-break:break-all;user-select:all}

/* ===================================================== loading + feedback */
@keyframes mcc-spin{to{transform:rotate(360deg)}}
.spin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mcc-spin .7s linear infinite;vertical-align:-.15em;margin-right:.55em;flex:none}
.btn.is-busy{cursor:progress;opacity:.85}
.linkbtn[disabled]{opacity:.55;cursor:not-allowed;text-decoration:none}
.app-loading{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--cream);text-align:center;padding:24px}
.app-loading img{width:96px;height:96px;margin:0 auto 22px;animation:mcc-pulse 1.4s ease-in-out infinite}
.app-loading p{font:700 1.15rem/1.3 var(--slab);text-transform:uppercase;letter-spacing:.06em;margin:0 auto;display:flex;align-items:center;justify-content:center}
.app-loading.dark{background:var(--espresso);color:var(--cream)}
@keyframes mcc-pulse{50%{transform:scale(.94);opacity:.8}}
@media (prefers-reduced-motion:reduce){.spin,.app-loading img{animation-duration:3s}}
.sent-panel{background:var(--cream-2);border:1px solid var(--line);border-left:6px solid var(--ok);padding:22px 24px}
.sent-panel h2{font-size:1.6rem;margin-bottom:10px}
.sent-panel p{margin-bottom:12px}
.sent-panel .row{gap:18px}
.skeleton{background:linear-gradient(90deg,var(--beige) 25%,var(--cream-2) 50%,var(--beige) 75%);background-size:200% 100%;animation:mcc-shimmer 1.2s infinite;min-height:1em}
@keyframes mcc-shimmer{to{background-position:-200% 0}}
.plan.skeleton{min-height:300px;border:0}
.ci-busy{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:rgba(15,15,14,.82);color:var(--cream);font:400 clamp(2.4rem,5vw,4rem)/1 var(--display);text-transform:uppercase}
.char .sent-panel,.ci-login .sent-panel{background:var(--espresso-2);border-color:var(--line-l);border-left-color:#6fbf87}
.page-error{background:var(--bad-bg);border-left:6px solid var(--bad);padding:20px 22px;margin:0 0 20px}
.page-error h2{font-size:1.5rem;margin-bottom:8px}
.page-error .row{margin:14px 0 10px}
.checkin-body .page-error{position:fixed;z-index:50;left:24px;right:24px;top:24px;color:var(--ink)}
.plan-group{font-size:1.3rem;margin:26px 0 12px;letter-spacing:.06em}
.plan.main .small-print{color:rgba(244,237,225,.82)}
.child-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.child-tabs button{background:var(--cream-2);border:1.5px solid var(--sand);font:700 .95rem var(--body);padding:10px 14px;cursor:pointer;color:var(--ink)}
.child-tabs button[aria-selected=true]{background-color:var(--leather);background-image:var(--grain);border-color:var(--leather);color:var(--cream)}
.ci-result .parent{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:600;margin:10px 0 0;max-width:none;opacity:.95}
/* waiver */
.waiver{background:var(--cream-2);border:1px solid var(--line);padding:16px 18px}
.waiver-title{font:700 1.05rem/1.2 var(--slab);text-transform:uppercase;letter-spacing:.03em}
.waiver-lang .linkbtn[aria-pressed=true]{text-decoration:none;color:var(--ink)}
.waiver-draft{background:var(--warn-bg);color:#6b4a05;font-weight:700;font-size:.9rem;padding:8px 10px;margin:0 0 10px;max-width:none}
.waiver-text{max-height:230px;overflow:auto;border:1px solid var(--line);background:#fff;padding:12px 14px;margin-bottom:12px;font-size:.95rem}
.waiver-text p{margin:0 0 .7em;max-width:none}
.waiver-ok{color:var(--ok);font-weight:700}
.health-note{background:#fff7e6;border-left:4px solid var(--warn);padding:10px 12px;white-space:pre-wrap}
.ci-result .staff-note{display:inline-block;margin:14px 0 0;padding:6px 12px;background:rgba(0,0,0,.28);border:2px dashed rgba(255,255,255,.7);font-weight:700;font-size:1.05rem;max-width:none}
.stats:has(> div:nth-child(4)){grid-template-columns:repeat(4,1fr)}@media (max-width:640px){.stats:has(> div:nth-child(4)){grid-template-columns:1fr 1fr}}
/* camp booking */
.book-step{padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid var(--line)}
.book-step h2{font-size:1.6rem;margin:0 0 14px}
.choice-list{display:grid;gap:8px}
.choice{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--cream-2);border:1.5px solid var(--sand);padding:14px 16px;cursor:pointer;margin:0 0 8px;font-weight:600}
.choice:has(input:checked){border-color:var(--leather);box-shadow:inset 0 0 0 1px var(--leather)}
.choice input{width:auto;margin:0;accent-color:var(--leather)}
.choice .c-price{font:700 1.1rem var(--slab);white-space:nowrap}
.choice small{font-weight:500}
.extra-title{font-size:1.1rem;margin:18px 0 8px}
.flight{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:-2px 0 12px;padding:12px;background:var(--beige)}
@media (max-width:520px){.flight{grid-template-columns:1fr}}

/* ===================================================== account polish */
.ring-wrap{position:relative;width:104px;height:104px;border-radius:50%;padding:4px;background:conic-gradient(var(--ring,var(--sand)) var(--pct,100%),var(--beige) 0);display:grid;place-items:center;transition:background .4s}
.ring-wrap .avatar{width:96px;height:96px;border-radius:50%;border:3px solid var(--cream-2)}
.ring-wrap.green{--ring:var(--ok)}.ring-wrap.amber{--ring:var(--warn)}.ring-wrap.red{--ring:var(--bad)}
.member-card{grid-template-columns:104px 1fr}
.renew{margin-top:10px}
.renew-bar{height:8px;border-radius:99px;background:var(--beige);overflow:hidden}
.renew-bar i{display:block;height:100%;border-radius:99px;background:var(--ok);width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.renew.amber .renew-bar i{background:var(--warn)}
.renew small{display:block;margin-top:6px;color:var(--muted);font-weight:600}
.qr-tap{display:block;width:100%;cursor:zoom-in;font:inherit;color:inherit;transition:transform .15s,box-shadow .15s}
.qr-tap:hover{box-shadow:0 10px 30px rgba(0,0,0,.12)}
.qr-tap:active{transform:scale(.98)}
.qr-expand{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--leather);color:var(--cream);display:grid;place-items:center}
.qr-full{position:fixed;inset:0;z-index:200;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;animation:qf-in .2s ease-out;cursor:zoom-out}
@keyframes qf-in{from{opacity:0;transform:scale(.97)}}
.qr-full-name{font:400 clamp(1.6rem,6vw,2.4rem)/1 var(--display);text-transform:uppercase;margin:0;text-align:center}
.qr-full-code{width:min(88vw,62vh)}
.qr-full-code svg{width:100%;height:auto;display:block}
.qr-full-timer{position:relative;width:54px;height:54px}
.qr-full-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.qr-full-timer circle{fill:none;stroke-width:3.2}
.qr-full-timer .t-bg{stroke:var(--beige)}
.qr-full-timer .t-fg{stroke:var(--leather);stroke-dasharray:100;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.qr-full-timer span{position:absolute;inset:0;display:grid;place-items:center;font:700 1rem var(--body)}
.qr-full-hint{color:var(--muted);margin:0;font-size:.95rem}
.train-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.train-stats div{background:var(--beige);padding:12px;border-radius:12px;text-align:center}
.train-stats b{display:block;font:400 2rem/1 var(--display);margin-bottom:4px}
.train-stats span{font-size:.82rem;font-weight:600;color:var(--muted)}
.heat{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.heat i{aspect-ratio:1;border-radius:4px;background:var(--beige)}
.heat i.on{background:var(--leather)}
.heat i.today{outline:2px solid var(--ok);outline-offset:1px}
.heat i.future{background:transparent}
.heat-legend{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:6px}
.fade-swap{animation:fade-swap .25s ease-out}
@keyframes fade-swap{from{opacity:.25;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.fade-swap,.qr-full{animation:none}.renew-bar i{transition:none}}
.heat{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(7,auto);grid-auto-columns:unset;max-width:100%}.heat i{min-width:0}

/* ===================================================== admin polish: faces, expiring, charts */
.in-today .faces{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.faces button{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;cursor:pointer;width:76px;font:600 .8rem var(--body);color:var(--ink);padding:0}
.faces .avatar{width:60px;height:60px;border-radius:50%;font-size:1.1rem;box-shadow:0 0 0 3px var(--cream-2),0 0 0 5px var(--ok);transition:transform .15s}
.faces .avatar img{border-radius:50%}
.faces button:hover .avatar{transform:scale(1.06)}
.faces span.n{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.faces-empty{color:var(--muted);margin:8px 0 0}
#expiring li{align-items:center;flex-wrap:wrap}
#expiring .row{gap:8px}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chart-card{background:var(--cream-2);border:1px solid var(--line);padding:16px 18px 10px}
.chart-card.wide{grid-column:1/-1}
.chart-card header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.chart-card h3{font-size:1.1rem;margin:0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font:500 11px var(--body)}
.chart .bar{fill:var(--leather)}
.chart .bar.zero{fill:var(--sand)}
.chart .hit{fill:transparent;cursor:default}
.chart .hit:hover+.bar,.chart .bar.on{fill:#4b4640}
.chart .lbl{fill:var(--ink);font:700 11px var(--body)}
.chart-card details{margin-top:6px;font-size:.9rem}
.chart-card summary{cursor:pointer;color:var(--muted);font-weight:600}
.chart-card table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.85rem}
.chart-card td,.chart-card th{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}
.heat-scale{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:.78rem;color:var(--muted);margin-top:4px}
.heat-scale i{width:16px;height:12px;border-radius:3px}
.heat-scale i:nth-of-type(1){background:#ebe4d6}.heat-scale i:nth-of-type(2){background:#cdbfa6}.heat-scale i:nth-of-type(3){background:#9c8c74}.heat-scale i:nth-of-type(4){background:#5f5446}.heat-scale i:nth-of-type(5){background:#161514}
.chart-tip{position:fixed;z-index:300;pointer-events:none;background:var(--ink);color:var(--cream);font:600 .85rem var(--body);padding:7px 10px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.25);white-space:nowrap}
@media (max-width:760px){.charts{grid-template-columns:1fr}}

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

/* Account: visits calendar (week by default, month on request) */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;flex-wrap:wrap}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-nav b{font-size:.95rem;min-width:9.5em;text-align:center}
.cal-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line,#d9d0bf);background:transparent;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink)}
.cal-nav button:disabled{opacity:.3;cursor:default}
.cal-head .seg{display:inline-flex;background:var(--beige);border-radius:999px;padding:3px}
.cal-head .seg button{border:0;background:transparent;border-radius:999px;padding:7px 14px;font:600 .85rem/1 var(--body);color:var(--muted);cursor:pointer}
.cal-head .seg button[aria-pressed="true"]{background:var(--ink);color:var(--cream,#f7f3ea)}
.cal-dows,.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-dows span{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.06em}
.cal{margin-top:6px}
.cal span{display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--beige);font-weight:600;font-size:.9rem;color:var(--muted);aspect-ratio:1;transition:background .2s}
.cal.week span{aspect-ratio:auto;height:58px;font-size:1.05rem}
.cal span.on{background:var(--leather);color:#fff}
.cal span.on.is-today{box-shadow:inset 0 0 0 2px var(--ok),inset 0 0 0 4px #fff}
.cal span.is-today{box-shadow:inset 0 0 0 2px var(--ok)}
.cal span.future{background:transparent;color:#bdb3a2;box-shadow:inset 0 0 0 1px #e4dccd}
.cal span.future.is-today{box-shadow:inset 0 0 0 2px var(--ok)}
.cal span.pad{background:transparent}
.cal-key{display:flex;align-items:center;gap:6px;margin:10px 0 0}
.cal-key i{width:12px;height:12px;border-radius:3px;background:var(--leather)}
.pill.back{background:#ece4d3;color:#5f4a22;margin-left:6px;font-size:.7rem;padding:5px 8px}
.photo-ask{display:flex;gap:14px;align-items:flex-start;border-left:6px solid var(--leather)}
.photo-ask-ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--beige);display:flex;align-items:center;justify-content:center;color:var(--ink)}

/* Fight nights: admin */
.fight-card{cursor:pointer}
.sold-bar{height:8px;border-radius:999px;background:var(--beige);overflow:hidden}
.sold-bar i{display:block;height:100%;background:var(--leather);border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.type-sale{margin:0 0 12px}.type-sale:last-child{margin:0}.type-sale .row{margin-bottom:6px}.type-sale.off{opacity:.5}
.sell-types{display:flex;flex-direction:column;gap:8px}
.sell-type{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--beige);border-radius:10px;padding:8px 10px}
.sell-type input{width:80px;text-align:center}

/* Fight nights: ticket picker */
.tix{display:flex;flex-direction:column;gap:10px}
.tix-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;background:var(--paper,#faf6ee);border:1px solid var(--line,#ddd3c1);border-radius:14px;padding:14px 16px}
.tix-row.sold{opacity:.55}
.tix-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.tix-info .pill{align-self:flex-start;font-size:.68rem;padding:4px 8px}
.tix-price{font:400 1.25rem/1 var(--display)}
.stepper{display:flex;align-items:center;gap:4px;background:var(--beige);border-radius:999px;padding:4px}
.stepper button{width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer}
.stepper button:disabled{background:#cfc6b6;cursor:default}
.stepper output{min-width:28px;text-align:center;font-weight:700;font-size:1.1rem}
@media (max-width:520px){.tix-row{grid-template-columns:1fr auto}.tix-row .stepper{grid-column:1 / -1;justify-self:end}}

/* Account: sections with a bottom bar (My code / Tickets / Settings) */
.view{animation:view-in .25s ease both}
@keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view-title{font-size:1.5rem;margin:4px 0 16px}
body:has(.app-nav:not(.hidden)) .app-main{padding-bottom:110px}
body:has(.app-nav:not(.hidden)) .site-foot{padding-bottom:84px}
.app-nav{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;display:flex;gap:4px;padding:6px;
  background:rgba(18,17,16,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 12px 30px rgba(18,17,16,.3);width:min(420px,calc(100% - 32px))}
.app-nav a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px 7px;border-radius:999px;color:rgba(244,237,225,.65);text-decoration:none;font:600 .72rem/1 var(--body);transition:background .2s,color .2s}
.app-nav a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-nav a[aria-current="page"]{background:var(--cream,#f4ede1);color:var(--ink)}
.app-nav a:focus-visible{outline:2px solid var(--cream,#f4ede1);outline-offset:2px}
.nav-badge{position:absolute;top:3px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d4482f;color:#fff;font:700 .68rem/18px var(--body);font-style:normal;text-align:center}
.settings-out{text-align:center;margin:8px 0 0}

/* Tickets & bookings list */
.tk-row{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;background:#161514;color:#f4ede1;border-radius:16px;padding:14px 16px;margin:0 0 12px;text-decoration:none;position:relative;overflow:hidden;transition:transform .15s}
.tk-row:hover{transform:translateY(-2px)}
.tk-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,#b3261e 0 16px,#d4ad62 16px 19px)}
.tk-row.camp{background:#f7f1e6;color:var(--ink);border:1px solid var(--line,#ddd3c1)}
.tk-row.camp::before{background:var(--leather)}
.tk-row.past{opacity:.55}
.tk-date{display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(244,237,225,.08);border-radius:12px;padding:8px 0}
.tk-row.camp .tk-date{background:var(--beige)}
.tk-date b{font:400 1.7rem/1 var(--display)}
.tk-date small{font:700 .68rem/1 var(--body);letter-spacing:.14em;margin-top:4px;color:#d4ad62}
.tk-row.camp .tk-date small{color:var(--muted)}
.tk-what{display:flex;flex-direction:column;gap:3px;min-width:0}
.tk-what small{font:700 .64rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#d4ad62}
.tk-row.camp .tk-what small{color:var(--muted)}
.tk-what b{font:400 1.12rem/1.1 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.tk-what span{font-size:.85rem;opacity:.8}
.tk-what .tk-sub{font-weight:600;opacity:1}
.tk-go{font:700 .8rem/1 var(--body);white-space:nowrap;opacity:.85}
@media (max-width:420px){.tk-row{grid-template-columns:54px 1fr}.tk-go{display:none}}
.next-up{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);border-left:6px solid #b3261e}
.next-up .nu-ic{font-size:1.6rem}
.next-up > span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px}
.next-up small{font:700 .66rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.next-up b{font:400 1.05rem/1.15 var(--display);text-transform:uppercase}

/* Coach schedule */
.cal-strip-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 10px}
.cal-strip-head b{font-size:.95rem}
.round-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line,#d9d0bf);background:transparent;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink)}
.week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 18px}
.week-strip button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;border-radius:14px;border:0;background:var(--beige);color:var(--ink);cursor:pointer;font:inherit}
.week-strip button small{font:700 .66rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.week-strip button b{font:400 1.25rem/1 var(--display)}
.week-strip button i{display:flex;gap:2px;height:6px}
.week-strip .dot{width:5px;height:5px;border-radius:50%;background:#b3261e}
.week-strip button.off{opacity:.55}
.week-strip button.is-today{box-shadow:inset 0 0 0 2px var(--ok)}
.week-strip button[aria-selected="true"]{background:var(--ink);color:#f4ede1}
.week-strip button[aria-selected="true"] small{color:rgba(244,237,225,.7)}
.week-strip button[aria-selected="true"] .dot{background:#d4ad62}
.day-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
.day-head h2{font-size:1.4rem}
.day-list{display:flex;flex-direction:column;gap:8px}
.sess{display:grid;grid-template-columns:62px 44px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;background:var(--paper,#faf6ee);border:1px solid var(--line,#ddd3c1);border-left:5px solid #b3261e;border-radius:14px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink)}
.sess.done{border-left-color:var(--ok);opacity:.8}
.sess.pending{border-left-style:dashed}
.sess .avatar{width:44px;height:44px}
.sess-time b{display:block;font:400 1.1rem/1 var(--display)}
.sess-time small{color:var(--muted);font-size:.78rem}
.sess-who{min-width:0}.sess-who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sess-who small{color:var(--muted);font-size:.8rem}
.sess-tags{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sess-tags .pill{font-size:.66rem;padding:4px 7px}
.warn-tag{color:#8a5d06;font-weight:700}
@media (max-width:440px){.sess{grid-template-columns:60px 1fr auto}.sess .avatar{display:none}}
.free-gap{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 14px;border-radius:14px;border:1.5px dashed #cdbfa6;background:transparent;cursor:pointer;font:inherit;color:var(--muted)}
.free-gap b{font-size:.82rem;color:var(--ink)}
.free-gap:hover{background:var(--beige)}
.day-off{padding:14px;border-radius:14px;background:var(--beige);text-align:center;font-weight:700}
.day-empty{text-align:center;padding:26px 10px;border:1.5px dashed #cdbfa6;border-radius:14px}
.day-empty p{margin:0 0 12px;color:var(--muted)}
.app-nav .nav-add{flex:0 0 auto;width:54px;height:54px;margin:-14px 2px 0;border-radius:50%;border:0;background:#b3261e;color:#fff;cursor:pointer;box-shadow:0 8px 18px rgba(179,38,30,.4);display:flex;align-items:center;justify-content:center}
.app-nav .nav-add svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pick-list{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.pick-list button,.picked{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:10px;border:0;background:var(--beige);cursor:pointer;font:inherit;color:var(--ink)}
.picked{cursor:default;margin-top:6px}
.pick-list .avatar,.picked .avatar{width:36px;height:36px}
.pick-list span,.picked span{flex:1;display:flex;flex-direction:column}.pick-list small,.picked small{color:var(--muted);font-size:.78rem}
.s-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hours-row{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--line,#e5dccb)}
.hours-row > b{padding-top:9px}
.hours-blocks{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hours-block{display:inline-flex;align-items:center;gap:4px;background:var(--beige);border-radius:10px;padding:4px 6px}
.hours-block input{width:96px;padding:6px;min-height:0}
.svc{border-top:1px solid var(--line,#e5dccb);padding:12px 0}.svc.off{opacity:.6}
.svc-row,.pack-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.svc-row input[data-f="name"]{flex:1;min-width:150px}
.svc-row input[data-f="minutes"],.pack-row input[data-f="sessions"]{width:70px}
.svc-row input[data-f="price"],.pack-row input[data-f="price"]{width:80px}
.packs{margin:8px 0 0 12px;display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.pack-row small{color:var(--ok);font-weight:700}

/* Member: book a 1-to-1 */
.coach-list{display:flex;flex-direction:column;gap:10px}
.coach-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line,#ddd3c1);background:var(--paper,#faf6ee);cursor:pointer}
.coach-card:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}
.coach-card input{position:absolute;opacity:0;pointer-events:none}
.coach-av{flex:none;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#f4ede1;display:flex;align-items:center;justify-content:center;font:400 1.2rem/1 var(--display)}
.coach-info{display:flex;flex-direction:column;gap:3px}.coach-info b{font:400 1.15rem/1 var(--display);text-transform:uppercase}.coach-info small{color:var(--muted)}
.date-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.date-strip button{flex:0 0 58px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-radius:12px;border:0;background:var(--beige);cursor:pointer;font:inherit;color:var(--ink)}
.date-strip button small{font-size:.66rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.date-strip button b{font:400 1.3rem/1 var(--display)}
.date-strip button[aria-pressed="true"],.slot-grid button[aria-pressed="true"]{background:var(--ink);color:#f4ede1}
.date-strip button[aria-pressed="true"] small{color:rgba(244,237,225,.7)}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;margin-top:12px}
.slot-grid button{padding:12px 0;border-radius:12px;border:1.5px solid var(--line,#ddd3c1);background:var(--paper,#faf6ee);font:700 1rem/1 var(--body);cursor:pointer;color:var(--ink)}
.slot-grid p{grid-column:1/-1;margin:0}
.pack-offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:12px;border-radius:12px;background:var(--beige)}
.pack-offer b{width:100%}
.pack-have{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--ok-bg)}
.done-tick{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:var(--ok);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center}
.tk-row.session{background:var(--paper,#faf6ee);color:var(--ink);border:1px solid var(--line,#ddd3c1)}
.tk-row.session::before{background:var(--ok)}
.tk-row.session .tk-date{background:var(--beige)}
.tk-row.session .tk-date small,.tk-row.session .tk-what small{color:var(--muted)}
.tk-row.session .linkbtn{align-self:flex-start;margin-top:4px}
.pk-card{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:var(--ok-bg);margin:0 0 12px}
.pk-card > b{font:400 2rem/1 var(--display)}
.pk-card > span{flex:1;min-width:0;display:flex;flex-direction:column}.pk-card small{font-weight:700;color:var(--muted)}
.pk-card small.pk-exp{font-weight:600;margin-top:2px}
.pk-card .btn{min-height:40px;flex:none}
.pick-list .avatar,.picked .avatar{font-size:.85rem!important;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pick-list .avatar img,.picked .avatar img{width:100%;height:100%;object-fit:cover}
.app-nav.four{width:min(460px,calc(100% - 24px))}
.app-nav.four a{font-size:.68rem;padding-left:2px;padding-right:2px}

/* Book a 1-to-1: big, visual, one column */
.bk-body .app-main{padding-bottom:140px}
.bk{max-width:640px}
.bk-title{font-size:clamp(2rem,8vw,3rem);line-height:1;margin:0 0 18px}
.bk-step{margin:0 0 30px;padding:0;min-width:0}
.bk-h{display:flex;align-items:center;gap:12px;font-size:1.35rem;margin:0 0 14px}
.bk-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#f4ede1;display:inline-flex;align-items:center;justify-content:center;font:400 1rem/1 var(--display)}
.bk-coaches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.bk-coach{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:2px solid var(--line,#ddd3c1);border-radius:18px;background:var(--paper,#faf6ee);overflow:hidden;cursor:pointer;font:inherit;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s}
.bk-coach:hover{transform:translateY(-2px)}
.bk-coach img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;display:block;filter:grayscale(.15)}
.bk-init{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;background:var(--ink);color:#f4ede1;font:400 2.6rem/1 var(--display)}
.bk-coach-t{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.bk-coach-t b{font:400 1.05rem/1.05 var(--display);text-transform:uppercase}
.bk-coach-t small{color:var(--muted);font-size:.8rem;line-height:1.3}
.bk-disc{align-self:flex-start;font:700 .66rem/1 var(--body);font-style:normal;text-transform:uppercase;letter-spacing:.05em;padding:4px 6px;border:1px solid var(--line);background:var(--cream-2);color:var(--ink)}
.bk-coach-t em{font-style:normal;font-weight:700;font-size:.9rem}
.bk-check{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:var(--ok);color:#fff;display:none;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.bk-coach[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.bk-coach[aria-checked="true"] .bk-check{display:flex}
.bk-tiles{display:flex;flex-direction:column;gap:10px}
.bk-tile{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic name price" "ic min price";align-items:center;column-gap:14px;row-gap:2px;width:100%;text-align:left;padding:16px 18px;border:2px solid var(--line,#ddd3c1);border-radius:16px;background:var(--paper,#faf6ee);cursor:pointer;font:inherit;color:var(--ink);min-height:72px}
.bk-tile b{grid-area:name;font-size:1.1rem}
.bk-tile .bk-min{grid-area:min;color:var(--muted);font-size:.9rem}
.bk-tile .bk-price{grid-area:price;font:400 1.4rem/1 var(--display)}
.bk-tile .bk-ic{grid-area:ic;font-size:1.6rem}
.bk-tile:not(.pay){grid-template-columns:1fr auto;grid-template-areas:"name price" "min price"}
.bk-tile[aria-checked="true"]{border-color:var(--ink);background:#fff;box-shadow:0 0 0 2px var(--ink)}
.bk-note{margin:14px 0 0;padding:14px 16px;border-radius:14px;background:var(--beige);font-size:.95rem;line-height:1.45}
.bk-note.ok{background:var(--ok-bg)}
.bk-packs{margin-top:14px;padding:14px;border-radius:16px;background:var(--beige)}
.bk-packs p{margin:0 0 10px}
.bk-pack{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 8px 8px 0;padding:12px 16px;border-radius:14px;border:2px solid var(--ink);background:#fff;cursor:pointer;font:inherit;color:var(--ink)}
.bk-pack span{font:400 1.2rem/1 var(--display)}
.bk-pack em{font-style:normal;color:var(--ok);font-weight:700;font-size:.85rem}
.bk-month{font-weight:700;color:var(--muted);margin:-4px 0 8px;text-transform:capitalize}
.bk-days{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;max-width:100%}
.bk-days button{flex:0 0 66px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;border-radius:16px;border:2px solid transparent;background:var(--paper,#faf6ee);box-shadow:inset 0 0 0 1px var(--line,#ddd3c1);cursor:pointer;font:inherit;color:var(--ink)}
.bk-days button small{font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.bk-days button b{font:400 1.6rem/1 var(--display)}
.bk-days button:disabled{opacity:.3;cursor:not-allowed;box-shadow:none;background:transparent}
.bk-days button[aria-pressed="true"]{background:var(--ink);color:#f4ede1;box-shadow:none}
.bk-days button[aria-pressed="true"] small{color:rgba(244,237,225,.75)}
.bk-slot-group{margin:0 0 14px}
.bk-slot-group > p{margin:0 0 8px;font-weight:700}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.bk-slots button{padding:16px 0;border-radius:14px;border:2px solid var(--line,#ddd3c1);background:var(--paper,#faf6ee);font:700 1.15rem/1 var(--body);cursor:pointer;color:var(--ink)}
.bk-slots button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#f4ede1}
#time-h{margin-top:22px}
.bk-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(244,237,225,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line,#ddd3c1);box-shadow:0 -10px 24px rgba(18,17,16,.08);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.bk-bar-in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:14px}
.bk-sum{flex:1;min-width:0;display:flex;flex-direction:column}
.bk-sum small{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-sum b{font:400 1.5rem/1.1 var(--display)}
.bk-bar .btn{flex:none;min-height:54px;padding:0 22px;font-size:1rem}
.bk-bar .btn:disabled{opacity:.45}
.bk-bar .msg{max-width:640px;margin:8px auto 0}
.bk-done{text-align:center}

/* Coach settings: big, visual, few choices */
.cs-setup{margin:0 0 16px;padding:16px;border-radius:18px;background:var(--beige)}
.cs-setup h3{margin:0 0 10px;font-size:1.15rem}
.cs-todo{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 8px;border-radius:14px;background:#fff;border:2px solid var(--ink);color:var(--ink);font-weight:700;text-decoration:none;min-height:56px}
.cs-todo span{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--cream);display:inline-flex;align-items:center;justify-content:center}
.cs-todo.done{border-color:transparent;background:var(--ok-bg);color:#236036}
.cs-todo.done span{background:var(--ok)}
.cs-card{background:var(--cream-2);border:1px solid var(--line);border-radius:20px;padding:20px 18px;margin:0 0 16px;min-width:0}
.cs-h{display:flex;align-items:center;gap:12px;font-size:1.3rem;margin:0 0 6px}
.cs-ic{flex:none;width:44px;height:44px;border-radius:14px;background:var(--beige);display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem}
.cs-help{margin:0 0 14px;color:var(--muted);font-size:.95rem;line-height:1.45}
.cs-label{display:block;margin:14px 0 6px;font-weight:700;font-size:.95rem}
.cs-save{width:100%;min-height:56px;margin-top:16px}
.cs-add{width:100%;margin-top:10px}
/* switch */
.cs-switch{-webkit-appearance:none;appearance:none;flex:none;width:58px;height:34px;padding:0;border:0;border-radius:999px;background:var(--sand);position:relative;cursor:pointer;transition:background .15s}
.cs-switch::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .15s}
.cs-switch:checked{background:var(--ok)}
.cs-switch:checked::after{transform:translateX(24px)}
.cs-switch:focus{box-shadow:0 0 0 3px rgba(20,19,18,.2)}
.cs-switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0;font-weight:700;cursor:pointer}
/* sessions */
.cs-svc{padding:16px;border-radius:16px;border:2px solid var(--ink);background:#fff;margin:0 0 12px}
.cs-svc.off{border-color:var(--sand);opacity:.75}
.cs-svc.new{border-style:dashed}
.cs-name{font:400 1.2rem/1.2 var(--display);border:0;border-bottom:2px dashed var(--sand);background:transparent;padding:6px 0}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-chip{flex:1 1 70px;min-height:52px;border-radius:14px;border:2px solid var(--line);background:var(--cream-2);font:700 1rem/1 var(--body);color:var(--ink);cursor:pointer}
.cs-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.cs-price{display:flex;align-items:stretch;gap:8px;max-width:320px}
.cs-price button{flex:none;width:56px;border-radius:14px;border:2px solid var(--ink);background:#fff;font:700 1.6rem/1 var(--body);color:var(--ink);cursor:pointer}
.cs-price span{flex:1;display:flex;align-items:center;gap:4px;padding:0 12px;border-radius:14px;background:var(--cream-2);border:2px solid var(--line);font:400 1.5rem/1 var(--display)}
.cs-price input{border:0;background:transparent;padding:12px 0;font:inherit;min-width:0;box-shadow:none}
.cs-svc .btn{width:100%;min-height:52px}
.cs-packs{margin-top:16px;padding-top:6px;border-top:1px solid var(--line)}
.cs-pack{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.cs-pack.off{opacity:.6}
.cs-pack em{font-style:normal;color:var(--ok);font-weight:700}
.cs-pack-edit{flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-pack-edit label{font-weight:700;font-size:.9rem}
.cs-pack-edit .cs-switch-row,.cs-pack-edit .btn{grid-column:1/-1;margin:0}
.cs-sell{margin-top:12px}
/* hours */
.cs-day{border-top:1px solid var(--line);padding:10px 0}
.cs-day-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer}
.cs-day-top b{font-size:1.05rem}
.cs-day:not(.on) .cs-day-top b{color:var(--muted)}
.cs-blocks{display:none;margin-top:8px}
.cs-day.on .cs-blocks{display:block}
.cs-block{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.cs-block span{font-weight:700;font-size:.9rem;color:var(--muted)}
.cs-block select{flex:1;min-width:0;padding:12px 8px;font-size:1.05rem;font-weight:700;border-radius:12px;border:2px solid var(--line)}
.cs-x{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--beige);color:var(--ink);font-size:1rem;cursor:pointer}
.cs-more{font-size:.9rem}
/* days off */
.cs-off{list-style:none;margin:0 0 12px;padding:0}
.cs-off li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;margin:0 0 8px;border-radius:14px;background:var(--beige);font-weight:700}
.cs-off li.small-print{background:transparent;padding:0;font-weight:400}
.cs-off-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-off-form label{font-weight:700;font-size:.9rem}
.cs-off-form input{border-radius:12px;border:2px solid var(--line);margin-top:4px}
.cs-off-form .btn{grid-column:1/-1;min-height:52px}
/* rules */
.cs-rule{margin:0 0 18px}
.cs-rule-q{margin:0 0 8px;font-weight:700}
.cs-rule-row{display:flex;align-items:center;gap:12px}
.cs-rule-row > span{color:var(--muted);font-weight:600}
.cs-step{flex:none;display:inline-flex;align-items:center;border-radius:14px;border:2px solid var(--ink);overflow:hidden;background:#fff}
.cs-step button{width:48px;height:48px;border:0;background:transparent;font:700 1.5rem/1 var(--body);color:var(--ink);cursor:pointer}
.cs-step output{min-width:2em;text-align:center;font:400 1.4rem/1 var(--display)}
.cs-card input:not(.cs-switch){border-radius:12px}

/* Booking: getting into the gym (non-members) */
.bk-entry-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 24px;padding:14px 16px;border-radius:16px;background:var(--beige)}
.bk-entry-note .bk-entry-ic{font-size:1.4rem;line-height:1.2}
.bk-entry-note b{display:block;margin:0 0 2px}
.bk-entry-note p{margin:0 0 6px;font-size:.95rem;line-height:1.45}
.bk-lead{margin:-6px 0 12px;color:var(--muted)}
#entry{margin:0 0 28px}
.bk-alt{border-style:dashed;background:transparent}
.bk-alt .bk-price{font-family:var(--body);font-weight:700}
.bk-note.warn{background:var(--warn-bg)}
.bk-done .bk-note{text-align:left;margin:0 0 12px}
.bk-upsell{margin:0 0 20px;font-size:.95rem;color:var(--muted)}
/* Account: entry status on a 1-to-1 */
.tk-entry{display:block;margin-top:4px;font-size:.85rem;font-weight:700}
.tk-entry.ok{color:#236036}
.tk-entry.none{color:#8a5a00}
.tk-entry a{color:inherit}
.join-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.join-card .jc-ic{flex:none;width:48px;height:48px;border-radius:14px;background:var(--beige);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.join-card div{flex:1;min-width:0}
.join-card b{display:block;font-size:1.05rem}
.join-card p{margin:2px 0 0;font-size:.9rem;color:var(--muted)}

/* Header actions with icons: full labels on wide screens, round icon buttons on phones */
.app-head .head-actions.icons a,.app-head .head-actions.icons button{display:inline-flex;align-items:center;gap:6px}
.app-head .head-actions.icons svg{flex:none}
@media (max-width:700px){
  .app-head .head-actions.icons{gap:6px}
  .app-head .head-actions.icons a,.app-head .head-actions.icons button{width:42px;height:42px;padding:0;justify-content:center;border-radius:50%;background:var(--beige)}
  .app-head .head-actions.icons a:hover,.app-head .head-actions.icons button:hover{text-decoration:none;background:var(--sand)}
  .app-head .head-actions.icons span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Never let a header push the page wider than the screen */
.app-head .wrap{min-width:0;gap:10px}
.app-head .brand{min-width:0}
@media (max-width:380px){.app-head .brand span{font-size:.85rem}.app-head .brand span b{font-size:1.1rem}}

/* Admin "Today" on phones: photo, name (time and reason underneath), result */
.today-table .m-sub{display:none}
@media (max-width:640px){
  .today-table th:nth-child(1),.today-table td:nth-child(1),.today-table th:nth-child(5),.today-table td:nth-child(5),.today-table th:nth-child(6),.today-table td:nth-child(6){display:none}
  .today-table .m-sub{display:block;margin-top:3px;font-size:.82rem;color:var(--muted)}
  table.data.today-table td{padding:10px 6px}
  table.data.today-table td:first-child+td{padding-left:10px}
  table.data.today-table td:nth-child(3){width:100%;overflow-wrap:anywhere}
  table.data.today-table td:nth-child(4){text-align:right;padding-right:10px}
  .today-table .pill{font-size:.7rem;padding:6px 8px;letter-spacing:.03em}
  .today-table .pill.back{display:table;margin:4px 0 0;white-space:normal}
  .stats{gap:8px}
  .stats div{padding:14px 12px}
}
/* Tabs on phones: swipeable, with a fade that shows there's more to the right */
@media (max-width:900px){
  .tabs{scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:40px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{padding:12px 12px}
}
.cs-off-form > *,.cs-pack-edit > *{min-width:0}
.cs-off-form input{min-width:0;max-width:100%}
/* Comfortable tap targets on phones */
@media (max-width:700px){
  .cal-head .seg button{padding:11px 16px}
  .tk-row .linkbtn,.photo-ask .linkbtn,.list .linkbtn,.cs-off .linkbtn,.card .row .linkbtn{display:inline-flex;align-items:center;min-height:40px;padding:0 4px}
  .tk-entry a{display:inline-block;padding:6px 0}
}

/* Sideways-scrolling rows only ever move sideways (no vertical wobble, no pulling the page) */
.tabs,.table-wrap,.date-strip,.bk-days{overflow-y:hidden;overscroll-behavior-x:contain}

/* Add to home screen */
.install-card{position:relative;display:grid;grid-template-columns:56px 1fr;gap:12px 14px;align-items:center}
.install-card .ins-icon{width:56px;height:56px;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.install-card .ins-text b{display:block;font-size:1.05rem;padding-right:28px}
.install-card .ins-text p{margin:2px 0 0;font-size:.9rem;color:var(--muted);line-height:1.4}
.install-card .btn{grid-column:1/-1;width:100%;min-height:50px}
.ins-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1rem;cursor:pointer}

/* Bottom sheet (phones) / centred card (desktop) */
dialog.sheet{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0}
dialog.sheet::backdrop{background:rgba(15,15,14,.55)}
dialog.sheet[open]{display:flex;align-items:flex-end;justify-content:center}
.sheet-panel{width:100%;max-width:480px;background:var(--cream);border-radius:22px 22px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.25);max-height:92vh;overflow-y:auto}
@media (min-width:700px){dialog.sheet[open]{align-items:center}.sheet-panel{border-radius:22px}}
.sheet-panel h2{font-size:1.4rem;margin:0 0 4px}
.sheet-sub{margin:0 0 16px;color:var(--muted)}
.sheet-panel .btn{width:100%;min-height:52px;margin-top:8px}
.rm-opts{display:grid;gap:10px;margin-bottom:12px}
.rm-opt{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--cream-2);font:inherit;color:var(--ink);cursor:pointer}
.rm-opt b{font-size:1.02rem}
.rm-opt span{font-size:.9rem;color:var(--muted);line-height:1.35}
.rm-opt[aria-checked="true"]{border-color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--ink)}
.rm-go{background-color:var(--bad)!important}
.linkbtn.danger{color:var(--bad)}

@media (hover:none),(max-width:900px){
  .app-nav,.bk-bar{-webkit-backdrop-filter:none;backdrop-filter:none}
  .app-nav{background:rgb(24,23,21)}
  .bk-bar{background:rgb(244,237,225)}
}
/* Confirm pop-up */
.ask .sheet-panel{color:var(--ink)}
.ask-text{margin:6px 0 14px;font-size:1.02rem;line-height:1.45;white-space:pre-line}
.ask-label{display:block;font-weight:600;margin:0 0 8px}
.ask-label input,.ask-copy{margin-top:8px;border-radius:12px;font-size:1.05rem}
.ask-label input{text-transform:uppercase;letter-spacing:.08em}
.sheet-panel .btn.danger{background-color:var(--bad)}
.sheet-panel .btn:disabled{opacity:.4;cursor:not-allowed}
.pe-detail{margin:10px 0 0;font:500 .78rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);word-break:break-word}
.pe-ref{display:block;margin-top:4px;font:500 .75rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.bk-step{padding:0!important}
/* Enquiry fallback on the booking page */
.bk-enq-lead{font-size:1.1rem;margin:0 0 6px}
.bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-chips button{padding:12px 14px;border-radius:999px;border:2px solid var(--line,#ddd3c1);background:var(--paper,#faf6ee);font:600 .95rem/1.1 var(--body);cursor:pointer;color:var(--ink)}
.bk-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#f4ede1}
#enq-form select,#enq-form input:not([type=checkbox]),#enq-form textarea{font-size:1.05rem}
.member-known{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--ok-bg);font-weight:600}
.bk-enq{padding:0!important}
/* accounts */
#acc-rows tr.refund td,#pay-rows tr.refund td{color:var(--red,#a3271f)}
#acc-break{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.95rem}
#acc-vat{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 14px}
#acc-vat .full{grid-column:1/-1}
#acc-vat label{margin:0}
#acc-vat h4{margin:12px 0 0;font-size:1rem}
#acc-vat .vat-ok{margin-top:4px;font-size:.85rem}
.vat-pending{color:#8a5a00}
@media (max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}.stats b{font-size:2rem}}
.inv-list li{align-items:center;gap:10px}
.inv-acts{gap:14px;flex-wrap:nowrap}
.inv-acts .linkbtn{min-height:40px;display:inline-flex;align-items:center}
.tab-intro{margin:-8px 0 16px;font-size:.95rem;color:var(--muted)}
.tab-intro span{display:block;font-size:.88rem}
.enq-lang{margin:0 0 10px}
.enq-lang [aria-pressed=true]{font-weight:800;text-decoration:none;color:var(--ink)}
.enq-lang .linkbtn{min-height:40px}

/* Admin switches */
.sw-list{display:grid;gap:10px;margin-top:10px}
.sw-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;border:2px solid var(--line);background:#fff}
.sw-row.on{border-color:var(--ok)}
.sw-text{flex:1;min-width:0}
.sw-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sw-head b{font-size:1.05rem}
.sw-state{font:700 .72rem/1 var(--body);letter-spacing:.06em;padding:5px 8px;border-radius:999px;background:var(--beige);color:var(--muted)}
.sw-row.on .sw-state{background:var(--ok-bg);color:#236036}
.sw-text p{margin:4px 0 4px;font-size:.92rem;line-height:1.4;color:var(--ink)}
.sw-text small{display:block;font-size:.8rem;color:var(--muted)}
.sw-row .cs-switch{margin:0}
.sw-pointer{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--beige);font-size:.92rem}
/* Admin header with four icon buttons: always fits on small phones */
@media (max-width:430px){
  .app-head .head-actions.icons{gap:4px}
  .app-head .head-actions.icons a,.app-head .head-actions.icons button{width:38px;height:38px}
  .app-head .brand{gap:8px}
  .app-head .brand img{width:46px;height:46px}
}
@media (max-width:380px){
  .app-head:has(.head-actions.icons) .brand span{display:none}
}
/* Admin switches: full-size tap target (40px+) */
.sw-row .cs-switch{width:66px;height:40px}
.sw-row .cs-switch::after{top:4px;left:4px;width:32px;height:32px}
.sw-row .cs-switch:checked::after{transform:translateX(26px)}
/* Switch row: name + switch on top, description full width underneath */
.sw-row{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}
.sw-row .sw-text{display:contents}
.sw-row .sw-head{grid-column:1;grid-row:1}
.sw-row .cs-switch{grid-column:2;grid-row:1}
.sw-row .sw-text p,.sw-row .sw-text small{grid-column:1/-1}
.sw-row .sw-text p{margin-top:8px}
.ret-list li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ret-list li>div{min-width:0;flex:1 1 180px}
.ret-list .ret-mail,.ret-list .small-print{display:block;overflow-wrap:anywhere}

/* 1-to-1 enquiry: one clean column on every screen (the global form grid made it two cramped columns on laptops) */
#enq-form{display:block;max-width:640px;background:var(--cream-2);border:1px solid var(--line);padding:22px 24px 26px}
#enq-form>*{grid-column:auto}
#enq-form input:not([type=checkbox]),#enq-form select,#enq-form textarea{width:100%;display:block}
#enq-form textarea{min-height:96px}
#enq-form .bk-chips{margin-bottom:4px}
#enq-form .check{margin-top:16px}
#enq-form .cs-save{max-width:320px}
@media (max-width:520px){#enq-form{padding:16px 14px 20px;margin:0 -2px}}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.split-grid{grid-template-columns:1fr}}
.split-toggle .linkbtn{min-height:40px}
.view-as{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:-12px 0 14px;font-size:.9rem;color:var(--muted)}
.view-as.on{background:#fff3b0;color:#5b4300;padding:10px 12px;font-weight:700;border:1px solid #e5d27a}
.inv-earlier-h{margin:18px 0 4px;font-size:1rem}


/* Member home: what's wrong + what to do, and shortcuts. */
.m-alert{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;margin:0 0 16px;padding:16px 18px;border-left:6px solid var(--warn);background:var(--warn-bg)}
.m-alert.red{border-color:var(--bad);background:var(--bad-bg)}
.m-alert-ic{width:34px;height:34px;border-radius:50%;background:var(--warn);color:#fff;display:flex;align-items:center;justify-content:center;font:400 1.2rem/1 var(--display)}
.m-alert.red .m-alert-ic{background:var(--bad)}
.m-alert b{display:block;font-size:1.1rem}
.m-alert p{margin:2px 0 0;font-size:.95rem}
.m-alert .btn{grid-column:2;justify-self:start;margin-top:10px}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}
.quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:12px 6px;border:1px solid var(--line);background:var(--cream-2);color:var(--ink);text-decoration:none;font:700 .92rem/1.2 var(--body);text-align:center;-webkit-tap-highlight-color:transparent}
.quick a:active{background:var(--beige)}
.quick svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ms-row .pill{flex:none}
.list li.ms-row{align-items:center}
/* My invoices: date + amount first, actions as chips. */
.inv-list li.inv-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.inv-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.inv-amt{font:400 1.25rem/1 var(--display);white-space:nowrap}
.inv-row.neg .inv-amt{color:var(--bad)}
.inv-row .inv-acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--ink);font:700 .9rem var(--body);text-decoration:none;cursor:pointer}
.chip:active{background:var(--beige)}
#inv-card{scroll-margin-top:84px}
@media (max-width:380px){.member-card h2{font-size:1.35rem;overflow-wrap:anywhere}.member-card{gap:14px}}

/* Admin → Today: quick jobs. */
.quickjobs{padding:16px;margin-bottom:18px}
.qj-find{position:relative}
.qj-find input{width:100%;min-height:54px;font-size:1.1rem;padding-left:46px;background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23444' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='9.5' cy='9.5' r='6.5'/%3E%3Cpath d='m14.5 14.5 5 5'/%3E%3C/svg%3E") no-repeat 14px 50%}
.qj-results{margin-top:8px;border:1px solid var(--line);background:var(--cream);max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
.qj-row{display:flex;align-items:stretch;border-top:1px solid var(--line)}
.qj-row:first-child{border-top:0}
.qj-open{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.qj-open:hover,.qj-add:hover{background:var(--cream-2)}
.qj-open>span:nth-child(2){flex:1;min-width:0}
.qj-open b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qj-open small{display:block;color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qj-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--beige);display:flex;align-items:center;justify-content:center;font:400 .95rem/1 var(--display)}
.qj-add{flex:none;border:0;border-left:1px solid var(--line);background:none;padding:0 14px;font:700 .9rem var(--body);color:var(--ink);cursor:pointer;min-height:56px}
.qj-none{margin:0;padding:14px}
.qj-btns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.qj-btns>*{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:10px 4px;border:1px solid var(--line);background:var(--cream-2);color:var(--ink);font:700 .9rem/1.15 var(--body);text-align:center;text-decoration:none;cursor:pointer}
.qj-btns>*:hover{background:var(--beige)}
.qj-btns svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){.qj-row .pill{display:none}.qj-add{padding:0 10px;font-size:.82rem}.quickjobs{padding:12px}}
@media (max-width:360px){.qj-btns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.stats:not(:has(> div:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}.stats:not(:has(> div:nth-child(4))) div{padding:12px 10px}.stats:not(:has(> div:nth-child(4))) span{font-size:.85rem}}

/* Join: steps, who it's for, chosen plan. */
.jsteps{display:flex;gap:6px;list-style:none;margin:6px 0 8px;padding:0;counter-reset:none}
.jsteps li{flex:1;display:flex;align-items:center;gap:8px;padding:10px 0 8px;border-bottom:4px solid var(--line);font:700 .95rem/1.1 var(--body);color:var(--muted)}
.jsteps i{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .85rem/1 var(--body);font-style:normal;background:var(--beige);color:var(--muted)}
.jsteps li.on{color:var(--ink);border-color:var(--ink)}
.jsteps li.on i{background:var(--ink);color:var(--cream)}
.jsteps li.done{color:var(--ink);border-color:var(--ok)}
.jsteps li.done i{background:var(--ok);color:#fff;font-size:0}
.jsteps li.done i::before{content:"✓";font-size:.85rem}
@media (max-width:380px){.jsteps li{font-size:.82rem;gap:5px}.jsteps i{width:22px;height:22px}}
.who-seg{display:flex;background:var(--beige);border-radius:999px;padding:4px;margin:0 0 18px;max-width:420px}
.who-seg button{flex:1;min-height:46px;border:0;background:transparent;border-radius:999px;font:700 1rem/1 var(--body);color:var(--muted);cursor:pointer}
.who-seg button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.chosen{display:flex;align-items:center;gap:12px;max-width:640px;margin:26px 0 0;padding:14px 16px;background:var(--ok-bg);border-left:6px solid var(--ok);scroll-margin-top:90px}
.chosen-ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.chosen div{flex:1;min-width:0}
.chosen small{display:block;color:#236036;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}
.chosen b{display:block;font-size:1.05rem}
.chosen .linkbtn{min-height:40px}
#chosen + .card{margin-top:14px!important}
/* Login / email-link forms: one clear card, full-width button. */
.login-card{background:var(--cream-2);border:1px solid var(--line);padding:22px}
.login-card input{min-height:54px;font-size:1.1rem}
[data-link-form] .btn,#password-form .btn{width:100%}
.login-join{margin-top:28px}
@media (max-width:420px){.login-card{padding:16px}}
#ms-form{scroll-margin-top:96px}

/* Admin → Sign-ups: who joined on a day and what's still to do. */
.su-day{align-items:center}
.su-day #su-day{width:auto}
.su-day .btn.ghost{min-width:44px;padding-left:12px;padding-right:12px}
.su-filter{display:inline-flex;background:var(--beige);border-radius:999px;padding:4px;margin:0 0 14px}
.su-filter button{min-height:42px;border:0;background:transparent;border-radius:999px;padding:0 18px;font:700 .95rem/1 var(--body);color:var(--muted);cursor:pointer}
.su-filter button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.su-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.su-list .empty{padding:22px;text-align:center;color:var(--muted);background:var(--cream-2);border:1px solid var(--line)}
.su-row{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:14px;border:1px solid var(--line);background:var(--cream-2);text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.su-row:hover{background:#fff}
.su-row .avatar{width:56px;height:56px;font-size:1.1rem}
.su-main{min-width:0;display:flex;flex-direction:column;gap:4px}
.su-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.su-top b{font-size:1.1rem}
.su-top small,.su-sub{color:var(--muted);font-size:.85rem}
.su-top em{font-style:normal;font-weight:700;color:#236036}
.su-plans{display:flex;flex-wrap:wrap;gap:6px}
.su-plan{font-weight:600;font-size:.92rem}
.su-plan.none{color:var(--muted);font-weight:500}
.su-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.su-todo,.su-ok,.su-in{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;font:700 .78rem/1 var(--body)}
.su-todo{background:var(--warn-bg);color:#8a5d06}
.su-ok{background:var(--ok-bg);color:#236036}
.su-in{background:var(--beige);color:var(--ink)}
.su-money{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;white-space:nowrap}
.su-paid{font:400 1.3rem/1 var(--display)}
.su-money small{color:var(--muted);font-size:.8rem}
.su-unpaid{color:var(--muted)}
@media (max-width:520px){.su-row{grid-template-columns:auto 1fr;gap:10px 12px;padding:12px}.su-row .avatar{width:44px;height:44px;font-size:.9rem}.su-money{grid-column:2;flex-direction:row;align-items:baseline;gap:8px;justify-content:flex-start}}
/* Login with the 6-digit code from the email. */
.code-box{margin:6px 0 16px;padding:14px 0 0;border-top:1px dashed var(--line)}
.code-box label{display:block;margin-bottom:8px;font-weight:500}
.code-row{display:flex;gap:8px}
.code-input{flex:1;min-width:0;min-height:56px;font:700 1.6rem/1 var(--body)!important;letter-spacing:.3em;text-align:center}
.code-row .btn{flex:none}
#login-inline{padding-top:8px}
@media (max-width:380px){.code-input{letter-spacing:.12em;font-size:1.35rem!important}.code-row .btn{padding-left:16px;padding-right:16px}}
#arc-stats>div{min-width:0}
#arc-stats b{font-size:1.8rem;overflow-wrap:anywhere}
@media (max-width:520px){#arc-stats{grid-template-columns:1fr;gap:6px}#arc-stats>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px}#arc-stats b{font-size:1.3rem;margin:0}}
/* First login of someone already in our records: their details to check. */
.ob-known{margin:0 0 16px}
.ob-facts{margin:0 0 10px;display:grid;gap:0}
.ob-facts div{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ob-facts div:last-child{border-bottom:0}
.ob-facts dt{color:var(--muted);font-weight:600}
.ob-facts dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.ob-facts .pill{margin-left:6px;vertical-align:middle;font-size:.7rem;padding:4px 8px}
#ob-edit{min-height:40px}
@media (max-width:380px){.ob-facts div{grid-template-columns:1fr;gap:2px}}
/* Accounting: who earns what, costs */
.earn-flow{list-style:none;margin:0 0 6px;padding:0;border:1px solid var(--line);background:#fff}
.earn-flow li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 14px;border-top:1px solid var(--line)}
.earn-flow li:first-child{border-top:0}
.earn-flow li>span:first-child{min-width:0}
.earn-flow small{display:block;color:var(--muted);font-size:.85rem}
.earn-flow b{white-space:nowrap}
.earn-flow .out b{color:#8a2a1c}
.earn-flow .total{background:var(--cream-2);font-size:1.08rem}
.earn-flow .total b{font:400 1.7rem/1 var(--display)}
.earn-flow .total.neg b{color:#8a2a1c}
.earn-h{margin:20px 0 8px;font-size:1.05rem}
.earn-set{margin-top:16px;border:1px solid var(--line);padding:12px 14px}
.earn-set summary{cursor:pointer;min-height:40px;display:flex;align-items:center}
.earn-set form{margin-top:12px}
.bjj-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);background:#fff}
.bjj-row{padding:11px 14px;border-top:1px solid var(--line)}
.bjj-row:first-child{border-top:0}
.bjj-row.off{background:var(--cream-2)}
.bjj-row.off .bjj-top b:last-child{color:var(--muted)}
.bjj-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bjj-top b:first-child{min-width:0;overflow-wrap:anywhere}
.bjj-top b:last-child{white-space:nowrap}
.bjj-sub{color:var(--muted);font-size:.85rem;margin-top:2px;overflow-wrap:anywhere}
.bjj-row .btn{margin-top:8px;min-height:40px}
.lbl{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chips:empty{display:none}
.chips label,.chips span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid var(--line);background:var(--cream-2);font:600 .92rem var(--body);margin:0;cursor:pointer}
.chips input{width:auto;min-height:0}
.chips span{cursor:default}
.disc{display:inline-block;font:700 .68rem/1 var(--body);text-transform:uppercase;letter-spacing:.04em;padding:4px 6px;border:1px solid var(--line);background:var(--cream-2);vertical-align:2px;margin-left:4px}
.disc.grappling{background:#e8eef7;border-color:#b6c6e0}
.up-drop{display:flex;align-items:center;gap:14px;padding:16px;border:2px dashed var(--ink);background:var(--cream-2);cursor:pointer;margin:0;min-height:64px}
.up-drop:hover{background:var(--cream)}
.up-drop.busy{opacity:.5;pointer-events:none}
#cost-file:focus-visible+.up-reading,.up-drop:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.up-ic{font-size:2rem;line-height:1}
.up-drop b{display:block;font-size:1.08rem}
.up-drop small{display:block;color:var(--muted);font-size:.88rem;font-weight:500}
.up-reading{display:flex;align-items:center;font-weight:600;margin:10px 0 0}
.cost-form{margin-top:14px;padding:14px;border:1px solid var(--line);background:#fff}
.cost-note{margin:0;font-size:.92rem;padding:8px 10px;background:var(--cream-2);border-left:3px solid var(--ink)}
@media (max-width:560px){
  .cost-form,.earn-set form{grid-template-columns:1fr}
  .earn-flow li{padding:10px 12px}
}
/* Accounting money totals: one per row on phones so long amounts never spill out */
@media (max-width:600px){
  [data-panel=accounts] .stats{grid-template-columns:1fr!important}
  [data-panel=accounts] .stats div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px!important}
  [data-panel=accounts] .stats b{font-size:1.7rem;margin:0;order:2;white-space:nowrap}
  [data-panel=accounts] .stats span{font-size:.88rem}
  .earn-flow .total{flex-wrap:wrap}
  .earn-flow .total b{font-size:1.45rem}
}
/* Add a membership at the desk: one big button, a big green confirmation */
.btn.ms-save{min-height:52px;font-size:1.05rem;padding:14px 28px}
@media (max-width:600px){.btn.ms-save{width:100%}}
#md-msg.ok{font-size:1.05rem;font-weight:600}
/* /join: card or cash */
.paychoice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.paychoice{grid-template-columns:1fr}}
.paychoice-opt{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;min-height:44px;border-radius:14px;border:2px solid var(--line);background:var(--cream-2);font:inherit;color:var(--ink);cursor:pointer}
.paychoice-opt b{font-size:1.02rem}
.paychoice-opt span{font-size:.9rem;color:var(--muted);line-height:1.35}
.paychoice-opt[aria-checked=true]{border-color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--ink)}
.paychoice-opt[aria-checked=true] b::before{content:"✓ "}
/* Account: cash request waiting at the desk */
.cash-card{border-left:6px solid var(--warn,#c98a1b)}
.cash-row{display:flex;gap:12px;align-items:flex-start}
.cash-row+.cash-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cash-ic{font-size:1.5rem;line-height:1}
.cash-row p{margin:4px 0 6px}
/* Admin → Cash approvals */
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--bad);color:#fff;font:700 .75rem var(--body);vertical-align:1px}
.tab-badge.hidden{display:none}
.cash-list{display:grid;gap:12px}
.cash-req{padding:16px}
.cash-who{display:flex;gap:12px;align-items:center}
.cash-who>div:nth-child(2){flex:1;min-width:0}
.cash-who .m-sub{display:block;margin-top:2px;font-size:.88rem;color:var(--muted);overflow-wrap:anywhere}
.cash-price{font:800 1.5rem var(--body);white-space:nowrap}
.cash-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cash-acts .btn{min-height:48px}
.btn.cash-ok{background-color:var(--ok);flex:1 1 220px}
.cash-reject{margin-top:12px}
.cash-reject .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cash-msg{margin:10px 0 0}
.empty-note{padding:18px;background:var(--cream-2);border:1px dashed var(--line);margin:0}
@media (max-width:600px){.cash-acts .btn{width:100%}}
.cash-whys{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.md-cash{border-left:6px solid var(--warn)}
#rm-why-wrap .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Desk: how long (1 month / 3 months / 1 year), each with its price; the chosen one is filled dark with a tick */
.term-l{display:block;font-weight:700;font-size:.92rem;margin:0 0 6px}
.term-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.term-seg button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:10px 14px;border:2px solid var(--line);border-radius:12px;background:var(--cream-2);color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.term-seg button b{font-size:.98rem}
.term-seg button span{font-size:.9rem;color:var(--muted)}
.term-seg button[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.term-seg button[aria-checked="true"] span{color:#e9e2d4}
.term-seg button[aria-checked="true"] b::before{content:"✓ "}
@media (max-width:380px){.term-seg{grid-template-columns:1fr}}

/* Add staff: picked person card, role choices */
.st-person{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--leather);background:var(--cream-2);margin-top:2px}
.st-person .st-person-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.st-person small{color:var(--muted);overflow-wrap:anywhere}
.st-person .st-warn{color:var(--bad);font-weight:600}
.st-roles{border:0;padding:0;margin:0;min-width:0}
.st-roles legend{font-weight:700;margin:0 0 8px;padding:0}
.st-roles .choice{grid-template-columns:auto 1fr}
#st-disc-wrap .label{font-weight:700;margin:0 0 8px}
#st-disc-wrap .who-seg,#st-kind{margin:0}
.su-plan.staff{color:#236036}

/* Buttons and tappable things: react the moment they're pressed (no phone tap delay, a small press-in),
   smooth colour change; motion off for people who ask their phone for less motion. */
button,.btn,a,.choice,.chip,[role=option],summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn,.chip,.choice,.qj-open,.who-seg button,.linkbtn{transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .08s ease}
.btn:active:not([disabled]),.chip:active,.who-seg button:active,.qj-open:active{transform:translateY(1px) scale(.985)}
.btn.ink:active:not([disabled]){background-color:var(--espresso-2)}
.btn:not(.ink):not(.ghost):not(.danger):active:not([disabled]){background-color:var(--leather-d)}
.choice:active{background:var(--beige)}
@media (prefers-reduced-motion: reduce){.btn,.chip,.choice,.qj-open,.who-seg button,.linkbtn{transition:none}.btn:active,.chip:active,.who-seg button:active,.qj-open:active{transform:none!important}}

/* Accounting: sub-pages (Overview · Sales · Costs · …), each button showing its figure for the period. */
.acc-nav{display:flex;gap:8px;margin:0 0 20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px}
.acc-nav::-webkit-scrollbar{display:none}
.acc-nav button{flex:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 16px 8px 10px;background:var(--cream-2);border:1px solid var(--line);color:var(--ink);font:700 .98rem/1.15 var(--body);text-align:left;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.acc-nav button:hover{border-color:var(--ink)}
.acc-nav .an-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--beige);flex:none;transition:background-color .15s}
.acc-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.acc-nav .an-tx small{display:block;font:600 .8rem/1.2 var(--body);color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.acc-nav button[aria-current=page]{background:var(--leather);background-image:var(--grain);border-color:var(--leather);color:var(--cream)}
.acc-nav button[aria-current=page] .an-ic{background:rgba(255,255,255,.14)}
.acc-nav button[aria-current=page] small{color:var(--leather-l)}
.acc-page>.card:first-child{margin-top:0}
@media (min-width:1100px){.acc-nav{display:grid;grid-template-columns:repeat(7,1fr)}.acc-nav button{padding-right:10px}}

/* Fold-out rows grouped by month (sales, costs, purchases, Resasports archive). */
.xl-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 0 12px}
.xl-bar>p,.xl-bar>span{margin:0;flex:1;min-width:0}
.xl-all{flex:none;min-height:40px;padding:0 14px;background:none;border:1px solid var(--line);font:700 .88rem var(--body);color:var(--ink);cursor:pointer}
.xl-all:hover,.xl-all[aria-pressed=true]{border-color:var(--ink)}
.xlist{display:grid;gap:22px}
.xg{display:grid;gap:6px}
.xg-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 4px;padding:0 2px 8px;border-bottom:2px solid var(--ink);font:700 .78rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase}
.xg-head span:last-child{color:var(--muted);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.xg-head b{color:var(--ink);font-size:.95rem}
.xr{background:var(--cream-2);border:1px solid var(--line);transition:border-color .15s,box-shadow .2s}
.xr:hover{border-color:var(--sand)}
.xr.open{border-color:var(--ink);box-shadow:0 6px 18px rgba(22,21,20,.08)}
.xr-head{display:grid;grid-template-columns:46px minmax(0,1fr) auto 32px;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px 10px 10px;background:none;border:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.xr-date{display:grid;justify-items:center;align-content:center;height:46px;background:var(--beige);line-height:1}
.xr-date b{font:400 1.35rem/1 var(--display)}
.xr-date small{font:700 .66rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.xr-main{min-width:0;display:grid;gap:4px}
.xr-main b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr-main small{color:var(--muted);font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xr-tag{display:inline-block;margin-right:6px;padding:2px 7px;background:var(--beige);color:var(--ink);font:700 .72rem/1.3 var(--body);letter-spacing:.03em;vertical-align:1px}
.xr-flag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;font:700 .68rem/1.3 var(--body);letter-spacing:.05em;text-transform:uppercase;vertical-align:2px}
.xr-flag.amber{background:var(--warn-bg);color:#8a5d06}.xr-flag.red{background:var(--bad-bg);color:var(--bad)}
.xr-amt{display:grid;justify-items:end;gap:4px;text-align:right;font-variant-numeric:tabular-nums}
.xr-amt b{font-weight:800;font-size:1.02rem;white-space:nowrap}
.xr-amt small{color:var(--muted);font-size:.78rem;white-space:nowrap;max-width:9.5em;overflow:hidden;text-overflow:ellipsis}
.xr.refund .xr-amt b{color:var(--bad)}
.xr-chev{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);transition:transform .25s ease,background-color .15s,border-color .15s}
.xr-chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.xr-head:hover .xr-chev{border-color:var(--ink)}
.xr.open .xr-chev{transform:rotate(180deg);background:var(--leather);border-color:var(--leather);color:var(--cream)}
.xr-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.xr.open .xr-body{grid-template-rows:1fr}
.xr-in{overflow:hidden;min-height:0}
.xr.open .xr-in{border-top:1px dashed var(--sand);margin:0 12px;padding:14px 0 14px}
.xr-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px;margin:0}
.xr-kv div{min-width:0}
.xr-kv .wide{grid-column:1/-1}
.xr-kv dt{font:700 .7rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.xr-kv dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.xr-kv dd small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.xr-kv .tot dd{font-size:1.1rem}
.xr-kv .pill{margin-left:4px;padding:5px 8px;font-size:.7rem}
.xr-err{display:block;color:var(--bad);font-size:.84rem;margin-top:4px}
.xr-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.xr-acts .btn{min-height:42px;padding:10px 16px}
.btn.ghost.danger-ghost{color:var(--bad);box-shadow:inset 0 0 0 2px var(--bad)}
.btn.ghost.danger-ghost:hover{background:var(--bad);color:#fff}
.xempty{margin:0;padding:18px;border:1px dashed var(--sand);color:var(--muted);text-align:center;list-style:none}
@media (max-width:480px){
  .xr-head{grid-template-columns:40px minmax(0,1fr) auto 28px;gap:9px;padding:8px}
  .xr-date{height:42px}.xr-date b{font-size:1.15rem}
  .xr-chev{width:28px;height:28px}
  .xr-amt b{font-size:.95rem}
  .xr-kv{grid-template-columns:1fr 1fr}
  .xr-acts .btn{flex:1 1 auto}
  .xl-bar{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.xr-body,.xr-chev,.acc-nav button{transition:none}}

/* Costs: one bar split by category, and category buttons that filter the list. */
.cost-bar{display:flex;height:10px;gap:2px;margin:-8px 0 14px;overflow:hidden}
.cost-bar:empty{display:none}
.cost-bar i{min-width:4px}
.cost-bar .c0{background:var(--ink)}.cost-bar .c1{background:#8a6d3b}.cost-bar .c2{background:var(--sand)}.cost-bar .c3{background:#2e7d46}.cost-bar .c4{background:#c98a12}.cost-bar .c5{background:#6b6259}
.chips button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border:1px solid var(--line);background:var(--cream-2);color:var(--ink);font:600 .92rem var(--body);cursor:pointer;transition:background-color .15s,border-color .15s}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed=true]{background:var(--leather);border-color:var(--leather);color:var(--cream)}
.cost-cats,.mar-sort{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;flex-wrap:nowrap;scrollbar-width:none}
.cost-cats button,.mar-sort button{flex:none;white-space:nowrap}

/* Margin per product: a bar per product. */
.mar-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.mr{background:var(--cream-2);border:1px solid var(--line);padding:12px 14px;display:grid;gap:8px}
.mr-top,.mr-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.mr-top b{font-weight:700}
.mr-top span,.mr-foot span{color:var(--muted);font-size:.88rem;font-variant-numeric:tabular-nums}
.mr-foot b{font-variant-numeric:tabular-nums;color:#236036}
.mr-bar{height:8px;background:var(--beige);overflow:hidden}
.mr-bar i{display:block;height:100%;background:var(--ok)}
.mr.neg .mr-bar i{background:var(--bad)}.mr.neg .mr-foot b{color:var(--bad)}
.mr.unknown .mr-bar{background:repeating-linear-gradient(135deg,var(--beige) 0 6px,transparent 6px 12px)}
.mr.unknown .mr-bar i{display:none}
.mr.unknown .mr-foot span{font-style:italic}
.acc-page,.xg{padding:0}
@media (max-width:420px){.xr-amt small{display:none}.xr-head{grid-template-columns:40px minmax(0,1fr) auto 28px}}

/* "Open the door" button: admin Today (full-width under the quick jobs) and the desk sales header. */
.qj-btns>.qj-door{grid-column:1/-1;flex-direction:row;gap:10px;min-height:56px;background:var(--leather);background-image:var(--grain);color:var(--cream);border-color:var(--leather);font-size:1rem}
.qj-btns>.qj-door:hover{background-color:var(--leather-d)}
.qj-door.ok,.door-head.ok{background:var(--ok)!important;border-color:var(--ok);color:#fff!important}
.qj-door.err,.door-head.err{background:var(--bad)!important;border-color:var(--bad);color:#fff!important}
.qj-door[disabled],.door-head[disabled]{cursor:progress}
.app-head .head-actions .door-head{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 12px}
/* Account page (admins): big "Open the door" button between the name card and the QR code. */
.door-big{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;margin:0 0 16px;padding:14px 20px;border:0;background:var(--leather);background-image:var(--grain);color:var(--cream);font:700 1.1rem/1 var(--body);letter-spacing:.02em;cursor:pointer;transition:background-color .15s,transform .1s}
.door-big svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.door-big:active{transform:scale(.98)}
.door-big.ok{background:var(--ok)}.door-big.err{background:var(--bad)}
.door-big[disabled]{cursor:progress}
@media (prefers-reduced-motion:reduce){.door-big{transition:none}}

/* Settings → TV screen */
.tv-form{grid-template-columns:1fr 1fr}
.tv-form #tv-code{font:700 1.3rem var(--body);letter-spacing:.15em}
.tv-list li{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tv-list .linkbtn{min-height:40px}
@media (max-width:480px){.tv-form{grid-template-columns:1fr}}

/* Account: your children (parents) */
.kids-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.kids-head h3{margin:0}
.kids-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kid{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);background:var(--cream);padding:8px 10px}
.kid-main{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:12px;min-height:56px;background:none;border:0;padding:0;text-align:left;color:var(--ink);font:inherit;cursor:pointer}
.kid-av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--beige);display:grid;place-items:center;font:700 1rem var(--body);overflow:hidden}
.kid-av img{width:100%;height:100%;object-fit:cover}
.kid-txt{min-width:0;display:grid;gap:4px}
.kid-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kid-txt .pill{justify-self:start;padding:5px 8px;font-size:.72rem}
.kid-txt small{color:var(--muted);font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kid-go{flex:none;font-size:1.6rem;color:var(--muted);margin-left:auto}
.kid-buy{flex:none;min-height:44px}
@media (max-width:420px){.kid-buy{flex:1 1 100%}}
.kid-sheet .waiver{margin-top:4px}
.kids-head .btn{white-space:nowrap;flex:none}
@media (max-width:360px){.kids-head{flex-wrap:wrap}.kids-head .btn{width:100%}}

/* Door mode (admins): under the "Open the door" button */
.door-modes{padding:14px 16px;margin-bottom:16px}
.dm-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dm-now{font:700 .82rem/1.2 var(--body);padding:6px 10px;border-radius:999px;background:var(--ok-bg);color:#236036}
.dm-now.dm-open{background:var(--warn-bg);color:#8a5d06}.dm-now.dm-staff,.dm-now.dm-event{background:#e4e1f3;color:#3b3478}.dm-now.dm-closed{background:var(--bad-bg);color:var(--bad)}
.dm-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dm-row button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:64px;padding:8px 4px;border:1px solid var(--line);background:var(--cream);color:var(--ink);font:700 .78rem/1.15 var(--body);text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.dm-row button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dm-row button:hover{border-color:var(--ink)}
.dm-row button[aria-pressed=true]{background:var(--leather);background-image:var(--grain);border-color:var(--leather);color:var(--cream)}
.dm-row button.busy{opacity:.6;cursor:progress}
.dm-hint{margin:8px 0 0;font-size:.86rem;color:var(--muted)}
.dm-choices{display:grid;gap:8px}
.dm-choices .btn{width:100%}
@media (max-width:400px){.dm-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.dm-row button{transition:none}}
/* Settings → Door schedule */
.dms-list{display:grid;gap:10px}
.dms-row{border:1px solid var(--line);background:var(--cream);padding:10px;display:grid;gap:10px}
.dms-days{display:flex;flex-wrap:wrap;gap:4px}
.dms-days button{min-width:40px;min-height:40px;border:1px solid var(--line);background:var(--cream-2);font:700 .85rem var(--body);color:var(--ink);cursor:pointer}
.dms-days button[aria-pressed=true]{background:var(--leather);border-color:var(--leather);color:var(--cream)}
.dms-time{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dms-time label{display:grid;gap:4px;font:600 .85rem var(--body);margin:0}
.dms-time input,.dms-time select{width:auto;min-width:110px}
/* Today → Ending this week: what was sent */
.sent-chip{display:inline-block;margin:6px 6px 0 0;padding:3px 9px;border-radius:999px;background:var(--ok-bg);color:#1f5c33;font-size:.82rem;font-weight:600}
.sent-chip.wait{background:var(--beige);color:var(--muted)}
/* Insights: this month */
.month-h{margin:6px 0 10px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--cream-2);border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi-l{font-size:.85rem;color:var(--muted);font-weight:600}
.kpi b{font:800 1.7rem/1.1 var(--body);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi-sub{font-size:.8rem;color:var(--muted)}
.kpi-sub.up{color:#1f5c33}.kpi-sub.down{color:var(--bad)}
.hbars{display:grid;gap:10px;padding:4px 0}
.hbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;align-items:center;gap:10px;font-size:.9rem}
.hbar-l{overflow-wrap:anywhere}
.hbar-track{height:12px;background:var(--beige);border-radius:6px;overflow:hidden}
.hbar-track i{display:block;height:100%;background:var(--ink);border-radius:0 6px 6px 0}
.hbar b{font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
/* Insights: Ask about the gym */
.ask-card{margin-bottom:18px;border-left:6px solid var(--ink)}
.ask-row{display:flex;gap:8px}
.ask-row input{flex:1;min-width:0}
.ask-row .btn{min-height:48px}
.ask-chips{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:10px 0 2px;scrollbar-width:none}
.ask-chips .chip{white-space:nowrap;font-weight:600}
.ask-out{margin-top:12px;padding:14px 16px;background:var(--cream-2);border:1px solid var(--line)}
.ask-q{font-weight:700;margin:0 0 8px}
.ask-a p{margin:0 0 8px}.ask-a ul{margin:0 0 8px;padding-left:20px}
.ask-a.small{font-size:.9rem;margin-top:6px}
.ask-recent{margin-top:10px}
@media (max-width:520px){.ask-row{flex-direction:column}.ask-row .btn{width:100%}}
.mr-est{font-style:normal;font-size:.8rem;color:var(--muted);margin-left:6px;padding:1px 7px;border:1px dashed var(--line);border-radius:999px}
/* App pages: ES/EN switch next to the header links; on small phones the Prices link gives way */
.app-head .lang-btn{min-width:38px;height:38px;margin-right:2px}
@media (max-width:420px){.app-head .head-actions a[href^="/membership"]{display:none}}

/* Login page opened from the email button: one big "Log in" button (tapped by the person, never by email scanners) */
.tap-panel { text-align: center; }
.tap-panel #tap-login { width: 100%; min-height: 56px; font-size: 1.15rem; margin-top: 6px; }

/* Insights → Daily briefing */
.brief-card{margin-top:18px}
.brief-to{border:0;padding:0;margin:0 0 12px}
.brief-to .check{display:flex;align-items:center;gap:10px;min-height:44px}
.brief-to .check span{overflow-wrap:anywhere}
.brief-acts{gap:10px;flex-wrap:wrap}
.brief-img{margin-top:14px}
.brief-img img{display:block;width:100%;max-width:540px;height:auto;border:1px solid var(--line)}

/* Desk sales → Products → New product: price, stock now and cost in the first step */
#pe-first{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--cream-2);border:1px solid var(--line);padding:16px}
#pe-first p{grid-column:1/-1}
@media (max-width:900px){#pe-first{grid-template-columns:1fr}}