/* ============================================================================
   United Gym Fitness Federation — application design system
   Same language as the public site: Anton headlines, Oswald labels,
   Work Sans body, near-black panels, orange accent, sharp 2px corners,
   hairline grids and dashed seal rings.
   ========================================================================== */

:root{
  /* Tells the browser to render its own widgets dark: select popups, date
     pickers, scrollbars and checkboxes. Without it Chrome draws the dropdown
     list on white, and our light option text disappears into it. */
  color-scheme:dark;
  accent-color:#e85c29;

  --void:#0b0b0c; --panel:#151517; --panel-2:#1c1c1f; --panel-3:#232326;
  --line:#2a2a2d; --line-2:#3a3a3e;
  --orange:#e85c29; --orange-2:#ff6b34; --orange-dim:#b8461f;
  --bone:#f2efe9; --steel:#8b8b88; --mute:#5f5f5c;
  --good:#5fd8a0; --warn:#d9a441; --bad:#e2685f;
  --sidebar:264px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{margin:0; padding:0; box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--void); color:var(--bone);
  font-family:'Work Sans',sans-serif; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font:inherit; cursor:pointer;}

h1,h2,h3,.display{
  font-family:'Anton',sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.01em; line-height:.95;
}
.eyebrow{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.28em; font-size:.7rem; color:var(--orange);
}
.oswald{font-family:'Oswald',sans-serif;}
.num{font-family:'Anton',sans-serif; letter-spacing:.01em;}

/* ---------------------------------------------------------------- shell --- */
.shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar); flex-shrink:0; position:fixed; top:0; bottom:0; left:0;
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; z-index:60;
}
.side-brand{
  display:flex; align-items:center; gap:12px;
  padding:20px 22px; border-bottom:1px solid var(--line);
}
/* The crest is 420x385, so never force it square — contain keeps it undistorted. */
.crest{object-fit:contain; flex-shrink:0;}
.side-brand .crest{width:42px; height:42px;}
.side-brand .bt{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:.9rem;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.25;
}
.side-brand .bt span{
  display:block; font-size:.58rem; color:var(--steel);
  letter-spacing:.2em; font-weight:500;
}
.side-nav{padding:16px 12px; flex:1; overflow-y:auto;}
.side-label{
  font-family:'Oswald',sans-serif; font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute); padding:14px 10px 8px;
}
.side-link{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  font-family:'Oswald',sans-serif; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel); border-radius:2px;
  border-left:2px solid transparent; transition:all .18s;
}
.side-link:hover{color:var(--bone); background:var(--panel-2);}
.side-link.active{
  color:var(--bone); background:linear-gradient(90deg,rgba(232,92,41,.14),transparent);
  border-left-color:var(--orange);
}
.side-link .ic{width:18px; height:18px; flex-shrink:0;}
.side-link .count{
  margin-left:auto; font-family:'Oswald',sans-serif; font-size:.68rem;
  background:var(--panel-3); color:var(--steel); padding:2px 7px; border-radius:2px;
}
.side-link.active .count{background:var(--orange); color:var(--void);}
.side-foot{border-top:1px solid var(--line); padding:14px 16px;}
.side-user{display:flex; align-items:center; gap:11px; margin-bottom:12px;}
.side-user .who{min-width:0;}
.side-user .who b{
  display:block; font-family:'Oswald',sans-serif; font-size:.82rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-user .who span{
  display:block; font-size:.66rem; color:var(--orange);
  text-transform:uppercase; letter-spacing:.12em; font-family:'Oswald',sans-serif;
}

.main{flex:1; min-width:0; margin-left:var(--sidebar); display:flex; flex-direction:column;}
.wrap{max-width:1240px; width:100%; margin:0 auto; padding:0 32px;}

/* -------------------------------------------------------------- top bar --- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1240px; margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.topbar h1{font-size:1.7rem;}
.topbar .sub{color:var(--steel); font-size:.85rem; margin-top:7px;}
.topbar-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.mobile-brand{display:none;}

.page{padding:34px 0 60px; flex:1;}

/* ------------------------------------------------------------- marquee --- */
.ticker{
  background:var(--panel); border-bottom:1px solid var(--line);
  overflow:hidden; padding:11px 0;
}
.ticker-track{display:flex; width:max-content; animation:tick 34s linear infinite;}
.ticker-track span{
  font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; font-size:.76rem; color:var(--steel);
  padding:0 24px; white-space:nowrap; border-right:1px solid var(--line);
}
.ticker-track span b{color:var(--orange);}
@keyframes tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* --------------------------------------------------------- section head --- */
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px;}
.head-l{min-width:0;}
.head .eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:11px;}
.head .eyebrow .rule{width:26px; height:1px; background:var(--orange); flex-shrink:0;}
.head h2{font-size:1.45rem;}
.head p{color:var(--steel); margin-top:9px; font-size:.9rem; line-height:1.6; max-width:620px;}
.section{margin-bottom:44px;}

/* ----------------------------------------------------------------- KPI --- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
      background:var(--line); border:1px solid var(--line);}
.kpi{background:var(--void); padding:22px 22px 20px; position:relative; transition:background .25s;}
.kpi:hover{background:var(--panel);}
.kpi::before{content:""; position:absolute; top:0; left:0; width:34px; height:2px; background:var(--orange);}
.kpi b{display:block; font-family:'Anton',sans-serif; font-size:2.1rem; line-height:1; color:var(--bone);}
.kpi b.sm{font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:600;}
.kpi span{
  display:block; margin-top:9px; font-size:.68rem; color:var(--steel);
  letter-spacing:.14em; text-transform:uppercase; font-family:'Oswald',sans-serif;
}
.kpi .delta{margin-top:8px; font-size:.72rem; font-family:'Oswald',sans-serif; letter-spacing:.06em;}
.kpi .delta.up{color:var(--good);} .kpi .delta.down{color:var(--bad);}
.kpi.alert b{color:var(--warn);} .kpi.alert::before{background:var(--warn);}
.kpi.danger b{color:var(--bad);} .kpi.danger::before{background:var(--bad);}

/* ---------------------------------------------------------------- card --- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:22px;}
.card + .card{margin-top:16px;}
.card h3{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:.92rem; letter-spacing:.08em; margin-bottom:4px;
}
.card .sub{color:var(--steel); font-size:.85rem; line-height:1.6;}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.card-head h3{margin:0;}
.card.accent{border-left:2px solid var(--orange);}

.cols{display:grid; gap:16px;}
.cols.c2{grid-template-columns:1fr 1fr;}
.cols.c3{grid-template-columns:repeat(3,1fr);}
.cols.side{grid-template-columns:1.6fr 1fr; align-items:start;}
.cols.side-l{grid-template-columns:1fr 1.6fr; align-items:start;}

/* --------------------------------------------------------- hairline grid --- */
.grid-hair{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
.grid-hair > *{background:var(--void);}

/* ----------------------------------------------------------- list rows --- */
.rows{border:1px solid var(--line); background:var(--panel);}
.row{
  display:flex; align-items:center; gap:16px; padding:15px 18px;
  border-bottom:1px solid var(--line); transition:background .18s;
}
.row:last-child{border-bottom:none;}
a.row:hover{background:var(--panel-2);}
.row .grow{flex:1; min-width:0;}
.row .rt{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row .rs{color:var(--steel); font-size:.78rem; margin-top:4px;
         white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row .chev{color:var(--mute); font-size:1.2rem; flex-shrink:0;}
.row-actions{display:flex; gap:8px; flex-shrink:0;}

/* -------------------------------------------------------------- avatar --- */
.avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:.9rem; color:#180d06;
  background:linear-gradient(145deg,var(--orange-2),var(--orange-dim));
}
.avatar.lg{width:64px; height:64px; font-size:1.3rem;}
.avatar.sm{width:32px; height:32px; font-size:.72rem;}
.avatar.ghost{background:var(--panel-3); color:var(--steel); border:1px dashed var(--line-2);}

/* --------------------------------------------------------------- pills --- */
.pill{
  display:inline-block; font-family:'Oswald',sans-serif; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.12em; padding:4px 9px;
  border-radius:2px; border:1px solid var(--line-2); color:var(--steel);
  white-space:nowrap;
}
.pill.good{border-color:rgba(95,216,160,.4); color:var(--good);}
.pill.warn{border-color:rgba(217,164,65,.4); color:var(--warn);}
.pill.bad{border-color:rgba(226,104,95,.4); color:var(--bad);}
.pill.solid{background:var(--orange); border-color:var(--orange); color:var(--void);}

/* ------------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; padding:13px 24px;
  border-radius:2px; border:1px solid transparent; transition:all .2s;
}
.btn-primary{background:var(--orange); color:var(--void);}
.btn-primary:hover{background:var(--orange-2); transform:translateY(-1px);}
.btn-ghost{border-color:var(--line-2); color:var(--bone); background:transparent;}
.btn-ghost:hover{border-color:var(--orange); color:var(--orange-2);}
.btn-sm{padding:9px 15px; font-size:.7rem;}
.btn-danger{border-color:rgba(226,104,95,.4); color:var(--bad); background:transparent;}
.btn-danger:hover{border-color:var(--bad); background:rgba(226,104,95,.08);}
.btn-good{border-color:rgba(95,216,160,.4); color:var(--good); background:transparent;}
.btn-good:hover{border-color:var(--good); background:rgba(95,216,160,.08);}
.btn-block{width:100%;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}

/* --------------------------------------------------------------- forms --- */
.field{margin-bottom:15px;}
.field label{
  display:block; font-family:'Oswald',sans-serif; font-weight:600; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.16em; color:var(--steel); margin-bottom:7px;
}
.field .opt{color:var(--mute); letter-spacing:.04em; text-transform:none; font-size:.66rem;}
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border-radius:2px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--bone); font-size:.92rem;
  font-family:'Work Sans',sans-serif; transition:all .18s;
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px;}
/* Belt and braces for the popup list, for browsers that ignore color-scheme. */
.field select option,
.field select optgroup{background:#1c1c1f; color:#f2efe9;}
.field select option:checked{background:#e85c29; color:#0b0b0c;}

.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--orange); background:rgba(232,92,41,.05);
  box-shadow:0 0 0 3px rgba(232,92,41,.1);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-row.c3{grid-template-columns:repeat(3,1fr);}

.search{position:relative;}
.search input{padding-left:42px;}
.search .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--mute);}

/* ---------------------------------------------------------------- tabs --- */
.tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:22px;}
.tab{
  padding:12px 20px; font-family:'Oswald',sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .18s;
  display:inline-flex; align-items:center; gap:8px;
}
.tab:hover{color:var(--bone);}
.tab.active{color:var(--orange); border-bottom-color:var(--orange);}
.tab-count{
  font-size:.66rem; padding:1px 7px; border-radius:2px;
  background:var(--panel-3); color:var(--steel); margin-inline-start:2px;
}
.tab.active .tab-count{background:var(--orange); color:var(--void);}

/* ---------------------------------------------------------------- plan --- */
.plan-editor{
  width:100%; padding:18px; border-radius:2px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--bone); resize:vertical; min-height:420px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.86rem; line-height:1.75; transition:all .18s;
}
.plan-editor:focus{
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(232,92,41,.1); background:rgba(232,92,41,.03);
}
.plan-doc{
  white-space:pre-wrap; overflow-wrap:break-word;
  font-size:.95rem; line-height:1.9; color:var(--bone);
}
.plan-doc-wrap{border-left:2px solid var(--orange); padding-left:20px;}
.plan-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:var(--steel); font-size:.78rem; margin-bottom:16px;
}

/* -------------------------------------------------------------- charts --- */
.chart{width:100%; display:block; overflow:visible;}
.chart .bar{fill:var(--orange-dim); transition:fill .2s;}
.chart .bar:hover{fill:var(--orange-2);}
.chart .bar.zero{fill:var(--panel-3);}
.chart .grid-line{stroke:var(--line); stroke-width:1;}
.chart .axis{fill:var(--mute); font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:.08em;}
.chart .line{fill:none; stroke:var(--orange); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;}
.chart .area{fill:url(#chartFade);}
.chart .dot{fill:var(--orange-2); stroke:var(--void); stroke-width:2;}
.chart-legend{display:flex; gap:18px; flex-wrap:wrap; color:var(--steel);
  font-size:.72rem; font-family:'Oswald',sans-serif; letter-spacing:.08em;
  text-transform:uppercase; margin-top:12px;}

.meter{height:5px; background:var(--panel-3); border-radius:2px; overflow:hidden; margin-top:10px;}
.meter i{display:block; height:100%; background:linear-gradient(90deg,var(--orange-dim),var(--orange-2));}
.meter.good i{background:var(--good);} .meter.warn i{background:var(--warn);} .meter.bad i{background:var(--bad);}

/* ------------------------------------------------------------ timeline --- */
.timeline{position:relative; padding-left:22px;}
.timeline::before{content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--line);}
.tl-item{position:relative; padding:0 0 18px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-22px; top:5px; width:9px; height:9px;
  border-radius:50%; background:var(--void); border:1px solid var(--orange-dim);
}
.tl-item b{font-family:'Oswald',sans-serif; font-weight:600; font-size:.85rem;}
.tl-item span{display:block; color:var(--steel); font-size:.75rem; margin-top:3px;}

/* --------------------------------------------------------------- misc ---- */
.empty{
  text-align:center; padding:44px 20px; color:var(--steel);
  font-family:'Oswald',sans-serif; font-size:.85rem; letter-spacing:.04em;
  border:1px dashed var(--line); border-radius:2px;
}
.empty::before{content:"○"; display:block; font-size:1.5rem; color:var(--orange-dim); margin-bottom:10px;}

.flash{
  padding:14px 18px; border-radius:2px; margin-bottom:20px;
  font-family:'Oswald',sans-serif; font-size:.85rem; letter-spacing:.03em;
  border:1px solid; animation:rise .3s ease both;
}
.flash.ok{background:rgba(95,216,160,.08); border-color:rgba(95,216,160,.3); color:var(--good);}
.flash.err{background:rgba(226,104,95,.08); border-color:rgba(226,104,95,.3); color:var(--bad);}
.flash.info{background:rgba(232,92,41,.07); border-color:rgba(232,92,41,.25); color:var(--orange-2);}
.flash a{text-decoration:underline;}
@keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

.pw-reveal{
  border:1px dashed var(--orange); background:linear-gradient(180deg,rgba(232,92,41,.08),transparent);
  padding:22px; border-radius:2px; margin-bottom:22px;
}
.pw-reveal .eyebrow{display:block; margin-bottom:14px;}
.pw-creds{display:flex; gap:34px; flex-wrap:wrap; margin:14px 0 12px;}
.pw-creds div span{
  display:block; font-size:.64rem; color:var(--steel); text-transform:uppercase;
  letter-spacing:.16em; font-family:'Oswald',sans-serif; margin-bottom:5px;
}
.pw-creds div b{font-family:'Anton',sans-serif; font-size:1.5rem; color:var(--orange-2); letter-spacing:.02em;}
.pw-note{color:var(--steel); font-size:.78rem; line-height:1.55;}

.kv{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:11px 0; border-bottom:1px solid var(--line); font-size:.88rem;}
.kv:last-child{border-bottom:none;}
.kv > span{color:var(--steel); flex-shrink:0;}
.kv > b{font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.02em; text-align:right;}

.ic{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.seal-ring{position:absolute; border-radius:50%; border:1px dashed var(--line); pointer-events:none;}
.muted{color:var(--steel);}
.right{text-align:right;}
.nowrap{white-space:nowrap;}
.stack-sm > * + *{margin-top:10px;}

/* --------------------------------------------------------- bottom nav ---- */
.bottom-nav{display:none;}

/* ---------------------------------------------------------- login page --- */
.login-lang{position:absolute; top:20px; inset-inline-end:24px; z-index:5;}
.login{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;}
.login-art{
  position:relative; overflow:hidden; border-right:1px solid var(--line);
  background:radial-gradient(circle at 74% 22%, rgba(232,92,41,.18), transparent 46%),var(--void);
  display:flex; flex-direction:column; justify-content:center; padding:70px 64px;
}
.login-art .seal-ring:nth-of-type(1){width:620px; height:620px; top:-200px; right:-190px;}
.login-art .seal-ring:nth-of-type(2){width:440px; height:440px; top:-90px; right:-60px; border-color:rgba(232,92,41,.2);}
.login-art .inner{position:relative; z-index:2; max-width:520px;}
.login-art h1{font-size:clamp(2.4rem,4.4vw,3.9rem); margin:20px 0 24px; line-height:1.02;}
.login-art h1 span{display:block;}          /* one phrase per line */
.login-art h1 .accent{color:var(--orange);}
.login-art p{color:var(--steel); font-size:1rem; line-height:1.7; max-width:430px;}
.login-form{display:flex; align-items:center; justify-content:center; padding:60px 44px; background:var(--panel);}
.login-card{width:100%; max-width:390px;}
.login-logo{width:104px; height:auto; margin-bottom:26px; filter:drop-shadow(0 14px 30px rgba(0,0,0,.6));}
.login-card h2{font-size:1.7rem; margin:8px 0 8px;}
.login-card .lead{color:var(--steel); font-size:.88rem; line-height:1.6; margin-bottom:26px;}
.login-help{margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--steel); font-size:.82rem; line-height:1.65;}
.login-help b{color:var(--bone);}

/* -------------------------------------------------- stepped create form --- */
.new-account{padding:0; overflow:hidden;}
.step{
  display:flex; gap:18px; padding:24px 26px;
  border-bottom:1px solid var(--line); position:relative;
}
.step:last-of-type{border-bottom:none;}
.step-n{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:.9rem; line-height:1;
  background:var(--panel-3); color:var(--steel); border:1px solid var(--line-2);
}
.step:focus-within .step-n{background:var(--orange); color:var(--void); border-color:var(--orange);}
.step-body{flex:1; min-width:0;}
.step-body h4{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--bone);
  margin:0 0 16px;
}
.step-hint{
  color:var(--steel); font-size:.83rem; line-height:1.6; margin:2px 0 0;
  padding-inline-start:2px; border-inline-start:2px solid var(--orange-dim);
  padding-inline-start:12px;
}
.new-account > .btn{margin:0; border-radius:0; width:100%;}
.btn-lg{padding:18px 28px; font-size:.88rem; letter-spacing:.12em;}
@media (max-width:560px){
  .step{padding:20px 16px; gap:13px;}
  .step-n{width:26px; height:26px; font-size:.78rem;}
}

/* ---------------------------------------------------- permission picker --- */
.perm{
  border:1px solid var(--line-2); border-radius:2px; background:var(--panel-2);
  margin-bottom:16px;
}
.perm > summary{
  list-style:none; cursor:pointer; padding:15px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.86rem;
  text-transform:uppercase; letter-spacing:.08em;
}
.perm > summary::-webkit-details-marker{display:none;}
.perm > summary::after{
  content:"▾"; color:var(--steel); font-size:.9rem; transition:transform .2s;
  margin-inline-start:auto;
}
.perm[open] > summary::after{transform:rotate(180deg);}
.perm > summary:hover{background:var(--panel-3);}
.perm-title{display:inline-flex; align-items:center; gap:9px;}
.perm-count{
  font-family:'Oswald',sans-serif; font-size:.72rem; color:var(--steel);
  letter-spacing:.06em; white-space:nowrap;
}
.perm-count b{color:var(--orange-2); font-size:.95rem;}
.perm-blurb{
  color:var(--steel); font-size:.82rem; line-height:1.6;
  padding:0 18px 12px; margin:0;
}
.perm-actions{display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 14px;}
.perm-groups{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px; background:var(--line); border-top:1px solid var(--line);
}
.perm-group{
  background:var(--void); border:none; margin:0; padding:0 0 10px;
  display:flex; flex-direction:column;
}
/* A real header bar, so each column reads as its own block */
.perm-group legend{
  padding:0; margin:0; width:100%;
  float:left;                       /* legend ignores width without this */
}
.perm-ghead{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:13px 16px; margin-bottom:6px;
  background:var(--panel); border-bottom:1px solid var(--line);
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--bone);
  cursor:pointer; transition:background .18s;
}
.perm-ghead:hover{background:var(--panel-3);}
.perm-ghead .ic{width:15px; height:15px; color:var(--orange);}
.perm-ghead-label{display:inline-flex; align-items:center; gap:8px; min-width:0;}
.perm-gcount{
  margin-inline-start:auto; font-size:.68rem; letter-spacing:.04em;
  color:var(--mute); flex-shrink:0;
}
.perm-gcount.some{color:var(--orange-2);}
.perm-gcount.all{color:var(--good);}

.perm-item{
  padding:8px 16px; align-items:flex-start; gap:11px;
  font-size:.82rem; line-height:1.45; color:var(--steel);
  border-inline-start:2px solid transparent; transition:all .15s;
}
.perm-item input{margin-top:2px; flex-shrink:0;}
.perm-item:hover{color:var(--bone); background:var(--panel-2);}
.perm-item:has(input:checked){color:var(--bone); border-inline-start-color:var(--orange);}

/* ------------------------------------------------------------ entry pass --- */
.pass{text-align:center; padding:20px 0 4px;}
.pass-code span{
  display:block; font-family:'Oswald',sans-serif; font-size:.62rem; color:var(--steel);
  text-transform:uppercase; letter-spacing:.2em; margin-bottom:6px;
}
.pass-code b{
  display:block; font-family:'Anton',sans-serif; font-size:2.4rem; letter-spacing:.16em;
  color:var(--orange-2); line-height:1; margin-bottom:18px;
}
.pass-qr{
  width:220px; height:220px; margin:0 auto; display:block;
  border:6px solid var(--bone); border-radius:2px; background:var(--bone);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.pass-note{color:var(--steel); font-size:.78rem; line-height:1.6; margin:16px auto 0; max-width:290px;}

.upsell{border:1px solid var(--orange-dim);
  background:linear-gradient(180deg, rgba(232,92,41,.08), transparent 55%);}
.ticks{list-style:none; margin:0; padding:0;}
.ticks li{padding:9px 0 9px 26px; position:relative; color:var(--steel); font-size:.88rem;
  border-bottom:1px solid var(--line);}
.ticks li:last-child{border-bottom:none;}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--orange-2); font-weight:700;}
[dir="rtl"] .ticks li{padding-left:0; padding-right:26px;}
[dir="rtl"] .ticks li::before{left:auto; right:0;}

.scan-box input{
  font-family:'Anton',sans-serif; font-size:1.5rem; letter-spacing:.18em;
  text-align:center; padding:18px 14px;
}

/* ------------------------------------------------------ personal records --- */
.pr-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);}
.pr{background:var(--void); padding:14px 10px; text-align:center; transition:background .2s;}
.pr:hover{background:var(--panel-2);}
.pr.on{background:linear-gradient(180deg,rgba(232,92,41,.16),transparent);}
.pr b{display:block; font-family:'Anton',sans-serif; font-size:1.35rem; color:var(--orange-2); line-height:1;}
.pr b small{font-family:'Oswald',sans-serif; font-size:.62rem; color:var(--steel); margin-inline-start:3px;}
.pr span{display:block; margin-top:6px; font-size:.66rem; color:var(--steel);
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em;}

/* --------------------------------------------------------- progress photos --- */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px;}
.photo{margin:0; border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--panel-2);}
.photo img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .25s;}
.photo:hover img{transform:scale(1.03);}
.photo figcaption{padding:8px 9px; font-size:.68rem; color:var(--steel);
  font-family:'Oswald',sans-serif; letter-spacing:.03em;
  display:flex; align-items:center; justify-content:space-between; gap:6px;}
.linkish{background:none; border:none; color:var(--bad); font-size:.66rem;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em; padding:0;}
.linkish:hover{text-decoration:underline;}
.check{display:flex; align-items:center; gap:9px; color:var(--steel); font-size:.85rem; cursor:pointer;}
.check input{width:16px; height:16px; accent-color:var(--orange);}
.field input[type="file"]{padding:10px; font-size:.82rem;}

/* --------------------------------------------------------- busy heatmap --- */
.heat{border-collapse:separate; border-spacing:3px; width:100%;}
.heat th{
  font-family:'Oswald',sans-serif; font-size:.6rem; font-weight:500; color:var(--mute);
  letter-spacing:.04em; text-align:center; padding:0;
}
.heat th.day{text-align:start; padding-inline-end:8px; white-space:nowrap; color:var(--steel);}
.heat td{height:19px; min-width:15px; border-radius:2px; background:var(--panel-2);}
.heat td.l0{background:var(--panel-2);}
.heat td.l1{background:rgba(232,92,41,.25);}
.heat td.l2{background:rgba(232,92,41,.5);}
.heat td.l3{background:rgba(232,92,41,.75);}
.heat td.l4{background:var(--orange-2);}
.heat-key{display:inline-flex; gap:3px; align-items:center;}
.heat-key i{width:15px; height:12px; border-radius:2px; display:block;}
.heat-key i.l0{background:var(--panel-2);}
.heat-key i.l1{background:rgba(232,92,41,.25);}
.heat-key i.l2{background:rgba(232,92,41,.5);}
.heat-key i.l3{background:rgba(232,92,41,.75);}
.heat-key i.l4{background:var(--orange-2);}

/* -------------------------------------------------------------- receipt --- */
.receipt-page{background:var(--void); padding:30px 16px;}
.receipt{
  max-width:460px; margin:0 auto; background:var(--panel);
  border:1px solid var(--line); border-radius:2px; padding:28px;
}
.receipt-head{display:flex; align-items:center; gap:14px; padding-bottom:18px;
  margin-bottom:18px; border-bottom:1px solid var(--line);}
.receipt-head h2{font-size:1.15rem; font-family:'Oswald',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;}
.receipt-head .muted{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;}
.receipt-no{margin-inline-start:auto; text-align:end;}
.receipt-no span{display:block; font-size:.6rem; color:var(--steel); text-transform:uppercase;
  letter-spacing:.14em; font-family:'Oswald',sans-serif;}
.receipt-no b{font-family:'Anton',sans-serif; font-size:1.2rem; color:var(--orange-2);}
.receipt-total{
  display:flex; justify-content:space-between; align-items:center; margin-top:18px;
  padding:16px 18px; background:var(--void); border:1px dashed var(--orange); border-radius:2px;
}
.receipt-total span{font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:.72rem; color:var(--steel);}
.receipt-total b{font-family:'Anton',sans-serif; font-size:1.5rem; color:var(--orange-2);}
.receipt-due{display:flex; justify-content:space-between; margin-top:10px; padding:12px 18px;
  border:1px solid rgba(217,164,65,.35); border-radius:2px; color:var(--warn);
  font-family:'Oswald',sans-serif; font-size:.82rem;}
.receipt-foot{margin-top:20px; text-align:center; color:var(--steel); font-size:.78rem;}
@media print{
  .receipt-page{background:#fff; padding:0;}
  .receipt{border:none; background:#fff; color:#000; max-width:none;}
  .receipt .kv > span, .receipt-head .muted, .receipt-foot{color:#555;}
  .receipt-total{background:#fff; border-color:#000;}
  .receipt-total b, .receipt-no b{color:#000;}
}

/* ------------------------------------------------------ language switch --- */
.lang-toggle{display:inline-flex; border:1px solid var(--line-2); border-radius:2px; overflow:hidden; flex-shrink:0;}
.lang-toggle a{
  padding:8px 12px; font-family:'Oswald',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.1em; color:var(--steel); line-height:1; transition:all .18s;
}
.lang-toggle a + a{border-inline-start:1px solid var(--line-2);}
.lang-toggle a:hover{color:var(--bone); background:var(--panel-2);}
.lang-toggle a.on{background:var(--orange); color:var(--void);}

/* ------------------------------------------------------------ Arabic ------ */
/* Anton and Oswald have no Arabic glyphs, so Cairo carries the whole page.
   Weight, not letterform, has to do the work that Anton did in English. */
[dir="rtl"] body,
[dir="rtl"] .oswald,
[dir="rtl"] .field label,
[dir="rtl"] .btn,
[dir="rtl"] .pill,
[dir="rtl"] .eyebrow,
[dir="rtl"] .side-link,
[dir="rtl"] .tab{font-family:'Cairo',sans-serif;}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .display,
[dir="rtl"] .num,[dir="rtl"] .kpi b,[dir="rtl"] .stat-num,
[dir="rtl"] .pw-creds div b,[dir="rtl"] .login-art h1{
  font-family:'Cairo',sans-serif; font-weight:900; letter-spacing:0; line-height:1.3;
}
[dir="rtl"] .eyebrow{letter-spacing:.06em;}
[dir="rtl"] .side-link,[dir="rtl"] .tab,[dir="rtl"] .btn,[dir="rtl"] .pill{letter-spacing:0;}
[dir="rtl"] .kpi span,[dir="rtl"] .side-label{letter-spacing:.04em;}

/* Mirror the fixed chrome. */
[dir="rtl"] .sidebar{left:auto; right:0; border-right:none; border-left:1px solid var(--line);}
[dir="rtl"] .main{margin-left:0; margin-right:var(--sidebar);}
[dir="rtl"] .side-link{border-left:none; border-right:2px solid transparent;}
[dir="rtl"] .side-link.active{
  border-right-color:var(--orange);
  background:linear-gradient(270deg,rgba(232,92,41,.14),transparent);
}
[dir="rtl"] .side-link .count{margin-left:0; margin-right:auto;}
[dir="rtl"] .kpi::before{left:auto; right:0;}
[dir="rtl"] .card.accent{border-left:1px solid var(--line); border-right:2px solid var(--orange);}
[dir="rtl"] .plan-doc-wrap{border-left:none; border-right:2px solid var(--orange); padding-left:0; padding-right:20px;}
[dir="rtl"] .chev{transform:scaleX(-1);}
[dir="rtl"] .timeline{padding-left:0; padding-right:22px;}
[dir="rtl"] .timeline::before{left:auto; right:4px;}
[dir="rtl"] .tl-item::before{left:auto; right:-22px;}
[dir="rtl"] .search input{padding-left:14px; padding-right:42px;}
[dir="rtl"] .search .ic{left:auto; right:14px;}
[dir="rtl"] .field select{
  background-position:18px 50%, 13px 50%;
  padding-right:14px; padding-left:38px;
}
[dir="rtl"] .meter i{margin-left:auto;}

/* The plan text itself is written by a coach and may be either language;
   let the browser decide per paragraph rather than forcing a direction. */
.plan-doc, .plan-editor{unicode-bidi:plaintext;}
[dir="rtl"] .plan-doc, [dir="rtl"] .plan-editor{text-align:start;}

@media (max-width:900px){
  [dir="rtl"] .main{margin-right:0;}
  [dir="rtl"] .sidebar{border-left:none;}
  [dir="rtl"] .side-link{border-right:none; border-top:2px solid transparent;}
  [dir="rtl"] .side-link.active{border-top-color:var(--orange); background:none;}
}

/* --------------------------------------------------------------- print --- */
@media print{
  .sidebar,.topbar,.bottom-nav,.actions,.tabs,.ticker,.no-print{display:none !important;}
  body{background:#fff; color:#000;}
  .main{margin:0;}
  .card{border:1px solid #ccc; background:#fff;}
  .plan-doc{color:#000;}
}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:1100px){
  .cols.c3{grid-template-columns:1fr 1fr;}
  .cols.side,.cols.side-l{grid-template-columns:1fr;}
}

@media (max-width:900px){
  :root{--sidebar:0px;}
  .sidebar{
    position:fixed; left:0; right:0; top:auto; bottom:0; width:100%;
    flex-direction:row; border-right:none; border-top:1px solid var(--line);
    background:rgba(11,11,12,.96); backdrop-filter:blur(12px);
    padding:8px 6px calc(8px + var(--safe-bottom));
  }
  .side-brand,.side-label,.side-foot,.side-link .count{display:none;}
  /* The owner has more entries than fit across a phone, so the bar scrolls. */
  .side-nav{display:flex; padding:0; flex:1; overflow-x:auto; overflow-y:hidden;
            -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .side-nav::-webkit-scrollbar{display:none;}
  .side-link{
    flex:1 0 auto; min-width:70px; flex-direction:column; gap:5px; padding:7px 6px;
    border-left:none; border-top:2px solid transparent;
    font-size:.58rem; letter-spacing:.06em; text-align:center; white-space:nowrap;
  }
  .side-link.active{background:none; border-left:none; border-top-color:var(--orange); color:var(--orange-2);}
  .side-link .ic{width:19px; height:19px;}
  .main{margin-left:0; padding-bottom:76px;}
  .wrap{padding:0 18px;}
  .topbar-in{padding:15px 18px;}
  .topbar h1{font-size:1.3rem;}
  .mobile-brand{display:block; width:38px; height:38px; object-fit:contain; flex-shrink:0;}
  .cols.c2,.cols.c3{grid-template-columns:1fr;}
  .field-row,.field-row.c3{grid-template-columns:1fr;}
  .login{grid-template-columns:1fr;}
  .login-art{display:none;}
  .login-form{padding:40px 22px; min-height:100vh; background:var(--void);}
  .page{padding:24px 0 40px;}
  .head{flex-direction:column; align-items:flex-start; gap:14px;}
  .kpis{grid-template-columns:1fr 1fr;}
}

@media (max-width:560px){
  .pw-creds{gap:22px;}
  .row{padding:13px 14px; gap:12px;}
  .tabs{overflow-x:auto; scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{padding:11px 15px; white-space:nowrap;}

  /* One ellipsised line is right on a wide desk screen and wrong on a phone:
     .rs carries the code, the expiry and the plan, and only the code survived
     the truncation at this width. Wrap to two lines instead of cutting. */
  .row .rt{white-space:normal; text-overflow:clip; overflow:hidden;
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
           line-height:1.3;}
  .row .rs{white-space:normal; text-overflow:clip;
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
           overflow:hidden; line-height:1.45; margin-top:5px;}

  /* Everything below was under ~11px, which is small on a phone held at arm's
     length in a gym. Sizes only — weights, tracking and colours are untouched. */
  .kpi{padding:18px 16px 16px;}
  .kpi span{font-size:.74rem; letter-spacing:.1em;}
  .kpi b{font-size:1.85rem;}
  .kpi .delta{font-size:.76rem;}
  .pill{font-size:.7rem; padding:5px 10px;}
  .btn-sm{font-size:.74rem; padding:10px 15px;}
  .perm-gcount{font-size:.74rem;}
  .heat th{font-size:.68rem;}
  .heat th.day{font-size:.72rem;}
  /* A long page title must not shove the buttons off the bar. */
  .topbar-actions{flex-wrap:wrap; justify-content:flex-end;}
}

/* ------------------------------------------------------- camera scanner --- */
.no-scroll{overflow:hidden;}

.cam{
  position:fixed; inset:0; z-index:200;
  background:rgba(11,11,12,.94); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.cam[hidden]{display:none;}

.cam-box{
  width:100%; max-width:460px; background:var(--panel);
  border:1px solid var(--line); border-radius:2px; padding:18px;
}
.cam-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px;}
.cam-head h3{display:flex; align-items:center; gap:9px; font-size:1.05rem;}
.cam-head .ic{color:var(--orange);}

.cam-stage{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--void); border:1px solid var(--line); border-radius:2px;
}
.cam-stage video{width:100%; height:100%; object-fit:cover; display:block;}

/* Four corner ticks, so the desk knows where to hold the member's phone. */
.cam-frame{
  position:absolute; inset:14%; pointer-events:none;
  background:
    linear-gradient(var(--orange),var(--orange)) 0    0   /2px 34px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 0    0   /34px 2px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 0   /2px 34px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 0   /34px 2px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 0    100%/2px 34px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 0    100%/34px 2px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 100%/2px 34px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 100%/34px 2px no-repeat;
}

.cam-note{
  margin-top:12px; min-height:1.3em; text-align:center; color:var(--steel);
  font-family:'Oswald',sans-serif; font-size:.76rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.cam-note.bad{
  color:var(--bad); font-family:'Work Sans',sans-serif; font-size:.82rem;
  letter-spacing:0; text-transform:none; line-height:1.45;
}

.cam-flip{width:100%; margin-top:12px;}
.cam-flip[hidden]{display:none;}

@media (max-width:560px){
  .cam{align-items:flex-start; padding:12px; padding-top:calc(12px + env(safe-area-inset-top,0px));}
  .cam-box{padding:14px;}
}

/* ------------------------------------------------------------ membership ---
   The card the desk works in: what they hold, what they owe, and what is
   being sold to them now. */
[hidden]{display:none !important;}

.pills{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}

/* A row of radios that reads as one control. Quicker than a dropdown with
   somebody standing at the desk waiting, and every choice is visible. */
.seg{display:flex; flex-wrap:wrap; border:1px solid var(--line-2); border-radius:2px; overflow:hidden;}
.seg label{flex:1 1 auto; min-width:78px; cursor:pointer; position:relative;}
.seg input{position:absolute; opacity:0; width:0; height:0;}
.seg span{
  display:block; text-align:center; padding:11px 10px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--steel);
  background:var(--panel-2); border-inline-end:1px solid var(--line);
  transition:background .18s, color .18s;
}
.seg label:last-child span{border-inline-end:none;}
.seg label:hover span{color:var(--bone);}
.seg input:checked + span{background:var(--orange); color:var(--void);}
.seg input:focus-visible + span{outline:2px solid var(--orange-2); outline-offset:-2px;}
.seg-mode{margin-bottom:16px;}
/* Five methods, so three to a row and two under them — even, and never one
   stranded on its own line. */
.seg-pay label{flex:1 1 30%;}

.ms-sell{margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.ms-sell-head{margin-bottom:13px;}

/* The end date the current choices would produce, before anything is sent. */
.ms-preview{
  margin:0 0 16px; padding:12px 14px; background:var(--panel-2);
  border-inline-start:2px solid var(--orange);
  color:var(--steel); font-size:.85rem; line-height:1.6;
}
.ms-preview b{color:var(--bone); font-family:'Oswald',sans-serif; font-weight:600;}

.ms-due{
  margin-top:18px; padding:16px; border-radius:2px;
  border:1px solid rgba(217,164,65,.35); background:rgba(217,164,65,.06);
}
.ms-due-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px;}
.ms-due-head .eyebrow{color:var(--warn);}
.ms-due-head b{font-family:'Anton',sans-serif; font-size:1.3rem; color:var(--warn);}

.ms-receipts{margin-top:20px; padding-top:16px; border-top:1px solid var(--line);}
.ms-receipts .eyebrow{display:block; margin-bottom:10px;}
.ms-receipt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.ms-receipt:last-child{border-bottom:none;}
.ms-receipt b{font-family:'Oswald',sans-serif; font-weight:600; font-size:.9rem;}
.ms-receipt span{display:block; margin-top:3px; color:var(--steel); font-size:.76rem;}

@media (max-width:560px){
  .seg label{min-width:64px;}
  .seg span{padding:10px 6px; font-size:.66rem; letter-spacing:.03em;}
}

/* --------------------------------------------------------------- leads --- */
/* Two halves that read as one control: "the whole desk" or "me only". */
.seg-priority label{flex:1 1 50%; min-width:120px;}

/* The star beside a high-priority name. Orange and filled, because it is the
   thing the eye should land on first in a long book. */
.lead-hot{display:inline-flex; align-items:center; margin-inline-start:6px; color:var(--orange);}
.lead-hot .ic{width:13px; height:13px; fill:currentColor; stroke-width:1.2;}

/* Lines the app wrote itself sit quieter than the ones somebody typed. */
.tl-item.tl-sys b{color:var(--steel); font-weight:400;}
.tl-item.tl-sys::before{border-color:var(--line-2);}

/* ---- the follow-up panel ---------------------------------------------- */
/* One entry per trip to the desk: what happened, and when to try again. */
.fu-panel{
  border:1px solid var(--line); background:var(--panel-2);
  padding:16px; margin-bottom:20px;
}

/* Tappable phrases. Big enough for a thumb at a busy front desk, and they
   toggle — tapping one twice takes it back out of the note. */
.fu-quick, .fu-shortcuts{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px;}
.chip{
  font-family:'Oswald',sans-serif; font-size:.72rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  padding:8px 13px; border:1px solid var(--line-2); border-radius:2px;
  background:transparent; color:var(--steel); cursor:pointer; transition:all .16s;
}
.chip:hover{color:var(--bone); border-color:var(--steel);}
.chip.on{background:var(--orange); border-color:var(--orange); color:var(--void);}
.chip-off.on, .chip-off:hover{color:var(--bad); border-color:rgba(226,104,95,.4);}

.fu-when{display:flex; gap:8px; flex-wrap:wrap;}
.fu-when input[type="date"]{flex:2 1 150px;}
.fu-when input[type="time"]{flex:1 1 110px;}
.fu-next{margin-top:4px;}
.fu-next label .ic{width:14px; height:14px; vertical-align:-2px; margin-inline-end:4px;}
.fu-shortcuts{margin:9px 0 0;}

/* The clock in a lead row, inline with the rest of the sub-line. */
.row .rs .ic{width:12px; height:12px; vertical-align:-1px;}

/* ------------------------------------------------- date of birth / next of kin --- */
/* Three lists beat one date picker for a birthday: a thirty-year-old's year is
   one tap away instead of thirty months of travel. */
.dob-parts{display:flex; gap:8px;}
.dob-parts select{flex:1 1 0; min-width:0;}
.dob-parts select:nth-child(3){flex:1.2 1 0;}
/* The age is derived and shown, never typed — there is no field that can
   disagree with the date beside it. */
.dob-age{
  margin-inline-start:auto; color:var(--orange-2);
  font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.06em; text-transform:none;
}
.dob > label{display:flex; align-items:baseline; gap:8px;}

/* The paper form's sections, kept as sections so a receptionist holding the
   sheet can follow it down the screen. */
.ec-block{
  border:1px solid var(--line); padding:14px 15px 4px; margin-bottom:16px;
}
.ec-block > .eyebrow{display:block; margin-bottom:12px;}

/* Appears on its own the moment the year says the member is a child. */
.ec-block.minor{border-color:rgba(217,164,65,.35); background:rgba(217,164,65,.04);}
.ec-block.minor > .eyebrow{color:var(--warn);}
.minor[hidden]{display:none;}

/* --------------------------------------------------- the application form --- */
/* A public page with no sidebar: one column, phone first, because that is
   where it will be filled in. */
.apply-page{background:var(--void);}
.apply{max-width:620px; margin:0 auto; padding:22px 16px 60px;}
.apply-head{display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap;}
.apply-head h1{font-family:'Anton',sans-serif; font-size:1.5rem; line-height:1; margin:0;}
.apply-head span{
  display:block; margin-top:4px; color:var(--steel);
  font-family:'Oswald',sans-serif; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.apply-head .lang-toggle{margin-inline-start:auto;}
.apply-intro{color:var(--steel); font-size:.9rem; line-height:1.7; margin-bottom:20px;}
.apply-foot{color:var(--mute); font-size:.78rem; text-align:center; margin-top:14px;}

/* The terms, scrollable in their own box so the form is not three screens of
   legal text before the button. */
.terms{
  max-height:280px; overflow-y:auto; border:1px solid var(--line);
  background:var(--panel-2); padding:14px 16px; margin-bottom:14px;
  font-family:'Cairo',sans-serif; font-size:.82rem; line-height:1.9; color:var(--steel);
}
.terms h4{
  font-family:'Cairo',sans-serif; font-weight:700; font-size:.88rem;
  color:var(--orange-2); margin:14px 0 8px;
}
.terms h4:first-child{margin-top:0;}
.terms ul{margin:0; padding-inline-start:20px;}
.terms li{margin-bottom:7px;}
.terms-tick{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid var(--line-2); padding:12px 14px; cursor:pointer;
}
.terms-tick input{margin-top:3px; flex-shrink:0;}

.apply-done{text-align:center; padding:50px 20px;}
.apply-tick{
  width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  border:2px solid var(--good); color:var(--good);
  display:flex; align-items:center; justify-content:center;
}
.apply-tick .ic{width:30px; height:30px; stroke-width:2.4;}
.apply-done h2{font-family:'Anton',sans-serif; font-size:1.5rem; margin-bottom:12px;}
.apply-done p{color:var(--steel); line-height:1.7;}

.seg-coachpref label{flex:1 1 45%;}

/* ------------------------------------------------------------ discount --- */
/* Dragged, not typed. The desk is usually holding a phone in the other hand,
   and a slider with a live total is faster and harder to fat-finger than a
   number box — you cannot slide to 5000 by missing the decimal point. */
.disc{
  border:1px solid rgba(232,92,41,.25); background:rgba(232,92,41,.04);
  padding:14px 15px 12px; margin-bottom:16px;
}
.disc > label{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.seg-disc{margin:10px 0 14px;}
.seg-disc label{flex:1 1 50%;}

.disc input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:26px;
  background:transparent; cursor:pointer; padding:0; border:none;
}
.disc input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:2px; background:var(--panel-3); border:1px solid var(--line-2);
}
.disc input[type="range"]::-moz-range-track{
  height:4px; border-radius:2px; background:var(--panel-3); border:1px solid var(--line-2);
}
/* Deliberately large: this is dragged with a thumb across a counter. */
.disc input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; margin-top:-9px;
  width:21px; height:21px; border-radius:50%;
  background:var(--orange); border:2px solid var(--void);
  box-shadow:0 0 0 1px var(--orange);
}
.disc input[type="range"]::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%;
  background:var(--orange); border:2px solid var(--void); box-shadow:0 0 0 1px var(--orange);
}
.disc input[type="range"]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--orange-2); outline-offset:2px;}

.disc-read{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:8px; min-height:22px;
}
.disc-read span{
  font-family:'Oswald',sans-serif; font-size:.76rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--steel);
}
.disc-read b{font-family:'Anton',sans-serif; font-size:1.15rem; color:var(--orange-2);}

/* ------------------------------------------------------- signing out --- */
/* It used to live only at the end of the sidebar. On a phone the sidebar is a
   bottom bar that scrolls sideways, so on the owner's ten-item bar the logout
   link sat off the edge of the screen. It is in the header now, next to the
   language toggle, where it is always visible. */
.topbar-out{flex-shrink:0;}
.topbar-out .ic{width:15px; height:15px;}
@media (max-width:900px){
  /* On a phone the icon alone — the header has no room for the word. */
  .topbar-out-t{display:none;}
  .topbar-out{padding:9px 11px;}
}

/* ---------------------------------------------------- the leads filter --- */
/* Nine tabs across a phone was a sideways-scrolling strip where half of them
   were off the edge. One grouped dropdown says the same thing in one tap. */
.lead-bar{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px;}
.lead-pick{flex:1 1 165px; margin:0; min-width:0;}

/* A row in the Won list: its tick, then everything else. */
.won-row{display:flex; align-items:flex-start; gap:4px;
         padding:13px 0; border-bottom:1px solid var(--line);}
.won-row:last-of-type{border-bottom:none;}
.won-tick{display:flex; align-items:center; justify-content:center;
          min-width:46px; min-height:46px; cursor:pointer; flex-shrink:0;}

/* The bar above a ticked list: select all, how many, and what to do to them. */
.bulkbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px;
         padding:12px; margin-bottom:14px;
         border:1px solid var(--line); background:var(--panel-2);}

/* Handing several leads over at once is done with a finger, at a desk, with
   somebody standing in front of you — so the box is a target rather than the
   browser's own 13px default. Selected by the attributes the markup already
   carries, so the size lives here rather than being sprinkled inline. */
input[data-bulk-pick],
input[data-bulk-all]{
  width:22px; height:22px; margin:0; flex-shrink:0;
  cursor:pointer; accent-color:var(--orange);
}
/* The row's own label is the target, not just the 22px inside it. */
label:has(> input[data-bulk-pick]){min-height:46px;}
input[data-bulk-pick]:focus-visible,
input[data-bulk-all]:focus-visible{
  outline:2px solid var(--orange-2); outline-offset:2px;
}
.lead-find{flex:2 1 220px; margin:0; position:relative; min-width:0;}
.lead-find .ic{top:auto; bottom:13px; transform:none;}
[dir="rtl"] .lead-find .ic{left:auto; right:14px;}
@media (max-width:560px){
  .lead-bar{gap:10px;}
  .lead-pick,.lead-find{flex:1 1 100%;}
}

/* ---------------------------------------------------- exercise library --- */
/* One row per exercise, each its own form: name, Arabic name, order, save,
   delete. It wraps to two lines on a phone rather than scrolling sideways. */
.lib-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:7px 0; border-bottom:1px solid var(--line);
}
.lib-row:last-of-type{border-bottom:0;}
.lib-row input[type=text]{flex:1 1 160px; min-width:0; padding:8px 10px; font-size:.82rem;}
.lib-row .lib-sort{flex:0 0 62px; width:62px; padding:8px 8px; font-size:.82rem; text-align:center;}
.lib-row .btn{flex:0 0 auto;}
.lib-num{
  flex:0 0 22px; text-align:center; font-family:var(--mono, inherit);
  font-size:.72rem; color:var(--steel);
}
.lib-add{border-top:1px solid var(--line); border-bottom:0; margin-top:8px; padding-top:12px;}
.lib-group-row{padding:14px 16px;}
.lib-tools{margin-top:10px;}
.lib-tools summary{cursor:pointer; font-size:.76rem;}

/* The coach's read-only view: the printed sheet, numbered. */
.lib-list{margin:0; padding-inline-start:26px;}
.lib-list li{padding:5px 0; font-size:.9rem; color:var(--bone);}
.lib-list li::marker{color:var(--steel); font-size:.75rem;}

/* Destructive buttons read as destructive. Used by the library and safe to
   reuse anywhere a delete needs to look like one. */
.btn.danger{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent);}
.btn.danger:hover{background:var(--bad); color:var(--void); border-color:var(--bad);}

@media (max-width:640px){
  .lib-row input[type=text]{flex:1 1 100%;}
  .lib-row .lib-sort{flex:0 0 56px; width:56px;}
}

/* -------------------------------------------------- fitness assessment --- */
/* Twenty-nine questions asked five screens at a time, with a bar filling up.
   The whole point is that it never looks like a wall of form. */
.fa-progress{margin-bottom:18px;}
.fa-progress-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.fa-progress-head b{font-family:var(--display, inherit); font-size:.95rem; color:var(--bone);}

.fa-nav{display:flex; gap:10px; align-items:center; margin-top:16px;}
.fa-nav .btn{flex:1 1 auto; justify-content:center;}
.fa-nav .btn-ghost{flex:0 0 auto;}

/* Jump straight to a section instead of pressing Next four times. */
.fa-jump{display:flex; flex-wrap:wrap; gap:7px; margin-top:22px;}
.fa-chip{
  padding:7px 12px; border:1px solid var(--line-2); font-size:.72rem;
  color:var(--steel); text-decoration:none; border-radius:2px;
}
.fa-chip:hover{color:var(--bone); border-color:var(--steel);}
.fa-chip.on{background:var(--orange); border-color:var(--orange); color:var(--void);}

/* "If yes, specify" — revealed by assessment_script() beside a yes, and
   simply left visible when JavaScript does not run. */
.fa-detail{margin-top:10px; padding-inline-start:12px; border-inline-start:2px solid var(--orange-dim);}
.fa-detail label{display:block; margin-bottom:5px; font-size:.76rem;}
.fa-detail[hidden]{display:none;}

/* Yes/No wants to be a big target on a phone, not a pair of tiny pills. */
.field .seg label{min-width:96px;}
@media (max-width:640px){
  .field .seg span{padding-top:13px; padding-bottom:13px;}
  .fa-nav{flex-wrap:wrap;}
}

/* --------------------------------------------------------- member sheet --- */
/* One member on paper: who they are, what they told us, and both plans.
   Dark on screen like the rest of the app, plain black on white once printed. */
.sheet-page{background:var(--void); padding:30px 16px;}
.sheet{
  max-width:820px; margin:0 auto; background:var(--panel);
  border:1px solid var(--line); border-radius:2px; padding:32px;
}
.sheet-head{
  display:flex; align-items:center; gap:14px; padding-bottom:18px;
  margin-bottom:22px; border-bottom:2px solid var(--orange);
}
.sheet-head h2{font-size:1.15rem; font-family:'Oswald',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;}
.sheet-head .muted{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel);}
.sheet-who{margin-inline-start:auto; text-align:end;}
.sheet-who b{display:block; font-family:'Anton',sans-serif; font-size:1.25rem; color:var(--bone);}
.sheet-who span{font-size:.7rem; color:var(--steel);}

.sheet-sec{margin-bottom:26px;}
.sheet-sec h3{
  font-family:'Oswald',sans-serif; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--orange-2); margin-bottom:12px;
  padding-bottom:7px; border-bottom:1px solid var(--line);
}
.sheet-sec h3 small{float:inline-end; color:var(--steel); letter-spacing:.06em; font-weight:400;}
.sheet-sec h4{
  font-family:'Oswald',sans-serif; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--steel); margin:14px 0 6px;
}
.sheet-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 26px;}

.sheet-qa .qa{
  display:flex; gap:16px; align-items:baseline; padding:6px 0;
  border-bottom:1px dotted var(--line);
}
.sheet-qa .qa span{flex:1 1 55%; color:var(--steel); font-size:.8rem;}
.sheet-qa .qa b{flex:1 1 45%; color:var(--bone); font-size:.84rem; font-weight:600;}

.sheet-plan{white-space:pre-wrap; font-size:.86rem; line-height:1.65;}
.sheet-foot{margin-top:24px; text-align:center; color:var(--steel); font-size:.74rem;}

@media (max-width:640px){ .sheet{padding:20px;} .sheet-grid{grid-template-columns:1fr;} }

@media print{
  .sheet-page{background:#fff; padding:0;}
  .sheet{border:none; background:#fff; color:#000; max-width:none; padding:0;}
  .sheet-head{border-bottom:2px solid #000;}
  .sheet-head .muted, .sheet-who span, .sheet-sec h3 small,
  .sheet-qa .qa span, .sheet-foot, .sheet .kv > span{color:#444;}
  .sheet-who b, .sheet-qa .qa b, .sheet .kv > b, .sheet-plan{color:#000;}
  .sheet-sec h3{color:#000; border-bottom:1px solid #000;}
  .sheet-sec h4{color:#333;}
  /* A plan gets carried round the gym floor on its own, so it starts a page. */
  .sheet-break{break-before:page; page-break-before:always;}
  .sheet-sec{break-inside:avoid-page;}
  .sheet-qa .qa{break-inside:avoid;}
}

/* ------------------------------------------------ food table and meals --- */
/* Three hundred foods, edited in place. The row is the form. */
.table-wrap{overflow-x:auto;}
.food-table{width:100%; border-collapse:collapse; font-size:.82rem;}
.food-table th{
  text-align:start; padding:8px 6px; border-bottom:1px solid var(--line-2);
  font-family:'Oswald',sans-serif; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--steel); white-space:nowrap;
}
.food-table td{padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:middle;}
.food-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.015);}
.food-table .f-name{color:var(--bone); font-weight:600;}
.food-table .f-num{text-align:end; font-variant-numeric:tabular-nums; color:var(--steel);}
.food-table .kcal{color:var(--orange-2); font-weight:600;}
.food-table .f-edit{padding:4px 6px;}

.food-row{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.food-row input[type=text]{flex:1 1 130px; min-width:0; padding:7px 9px; font-size:.8rem;}
.food-row .f-serv{flex:0 1 110px;}
.food-row .f-num-in{flex:0 0 74px; width:74px; padding:7px 6px; font-size:.78rem; text-align:center;}
.food-row .f-num-in.kcal{border-color:var(--orange-dim);}

/* A meal: the foods in it, then what they add up to. */
.meals-wrap{margin-top:26px;}
.meal .meal-time{
  margin-inline-start:8px; font-family:'Oswald',sans-serif; font-size:.72rem;
  color:var(--orange-2); letter-spacing:.08em;
}
.meal-note{margin:-6px 0 12px; font-size:.8rem;}
.meal-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.meal-table td{padding:7px 4px; border-bottom:1px solid var(--line);}
.meal-table tr:last-child td{border-bottom:0;}
.mi-name{color:var(--bone);}
.mi-serving{display:block; font-size:.72rem; color:var(--steel);}
.mi-num{text-align:end; width:62px; font-variant-numeric:tabular-nums; color:var(--steel);}
.mi-num.kcal{color:var(--orange-2); font-weight:600;}
.mi-x{width:28px; text-align:end;}

.macros{display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; margin-top:12px;
  padding-top:10px; border-top:1px solid var(--line);}
.macro{display:flex; gap:5px; align-items:baseline;}
.macro b{font-family:'Oswald',sans-serif; font-size:.95rem; color:var(--bone);
  font-variant-numeric:tabular-nums;}
.macro i{font-style:normal; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--steel);}
.macro.kcal b{color:var(--orange-2); font-size:1.1rem;}
.macro-note{margin-inline-start:auto; font-size:.7rem; color:var(--warn);}

.meal-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px;
  padding-top:12px; border-top:1px dashed var(--line-2);}
.meal-add input[type=text]{flex:1 1 200px; min-width:0; padding:9px 11px; font-size:.84rem;}
.meal-add .meal-qty{flex:0 0 76px; width:76px; padding:9px 8px; text-align:center;}

.linkish.danger{color:var(--bad);}
form.inline{display:inline;}

@media (max-width:640px){
  .food-row input[type=text], .food-row .f-serv{flex:1 1 100%;}
  .food-row .f-num-in{flex:1 1 68px; width:auto;}
  .macros{gap:12px;}
}

@media print{
  .meal-add, .mi-x, .meals-wrap .card-head form{display:none !important;}
  .meal-table td{border-bottom:1px solid #ddd;}
  .mi-name, .macro b{color:#000;}
  .mi-num, .mi-serving, .macro i{color:#444;}
  .macro.kcal b, .mi-num.kcal{color:#000;}
  .macros{border-top:1px solid #999;}
  .meal{break-inside:avoid-page;}
}

/* -------------------------------------------------- renewal and pricing --- */
/* The one thing on a member's own page they can act on, so it looks like it. */
.renew-box{
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line-2);
  position:relative;
}
.renew-off{
  position:absolute; inset-inline-end:0; top:14px;
  background:var(--orange); color:var(--void); padding:3px 9px;
  font-family:'Oswald',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.08em; border-radius:2px;
}
.renew-box .sub{margin-top:9px; font-size:.76rem;}
.pr-key{font-size:.74rem; margin:-6px 0 14px;}
.pr-key code{background:var(--panel-3); padding:2px 6px; border-radius:2px; color:var(--bone);}

/* ------------------------------------------------------- pricing cards --- */
/* Drawn the way the public site draws them, because that is the sheet the
   owner is comparing against. A pen on each card turns it into a form. */
.pfam{
  font-family:'Anton',sans-serif; font-size:1.6rem; color:var(--orange-2);
  text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px;
}
.pfam-sub{margin-bottom:16px; font-size:.8rem;}
.pgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px;}

.pcard{
  position:relative; background:var(--panel); border:1px solid var(--line);
  padding:22px 18px 20px; border-radius:2px;
}
.pcard.off{opacity:.55;}
.pcard.editing{grid-column:1 / -1; border-color:var(--orange);}

.pcard-pen{
  position:absolute; inset-inline-end:12px; top:12px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:2px; color:var(--steel);
}
.pcard-pen:hover{border-color:var(--orange); color:var(--orange-2); background:var(--panel-3);}
.pcard-pen .ic{width:15px; height:15px;}

.pcard-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border:1px solid var(--orange-dim); border-radius:50%;
  font-family:'Oswald',sans-serif; font-size:.72rem; font-weight:600;
  color:var(--orange-2); margin-bottom:16px;
}
.pcard h4{
  font-family:'Oswald',sans-serif; font-size:.86rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; color:var(--bone); margin-bottom:10px;
}
.pcard-price{display:flex; align-items:baseline; gap:6px;}
.pcard-price b{font-family:'Anton',sans-serif; font-size:2.1rem; color:var(--bone); line-height:1;}
.pcard-price b.none{font-size:1rem; color:var(--steel); font-family:'Oswald',sans-serif;}
.pcard-price i{font-style:normal; font-size:.72rem; color:var(--steel); letter-spacing:.08em;}
.pcard-once{font-size:.72rem; color:var(--mute); margin-top:6px;}

.pcard-list{list-style:none; margin:16px 0 0; padding:0;}
.pcard-list li{
  padding:9px 0; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--steel); line-height:1.45;
}
.pcard-empty{margin-top:16px; padding-top:12px; border-top:1px solid var(--line);
  font-size:.76rem; color:var(--mute);}
.pcard-off{
  display:inline-block; margin-top:14px; padding:3px 8px;
  border:1px solid var(--line-2); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute);
}
.pcard-form .field{margin-bottom:12px;}
.pcard-form .pr-key{font-size:.72rem; margin-bottom:14px;}

@media (max-width:640px){
  .pgrid{grid-template-columns:1fr;}
  .pfam{font-size:1.3rem;}
}

/* ------------------------------------------------ money in and out --- */
/* Income above the line, spending below it. */
.money-chart .bar.in{fill:var(--good);}
.money-chart .bar.out{fill:var(--bad);}
.money-base{stroke:var(--line-2); stroke-width:1;}
.mn-legend i{width:10px; height:10px; display:inline-block; margin-inline-end:6px;}
.mn-legend i.in{background:var(--good);}
.mn-legend i.out{background:var(--bad);}
.mn-legend span{display:inline-flex; align-items:center;}

/* The amount is the one field somebody opened this form to type, so it is
   set in the same face as every other number in the app and says its unit. */
.mn-amount{position:relative;}
.mn-amount input{padding-inline-end:54px; font-family:'Oswald',sans-serif;
                 font-size:1.05rem; letter-spacing:.02em;}
.mn-amount span{position:absolute; inset-inline-end:14px; top:50%;
                transform:translateY(-50%); pointer-events:none;
                color:var(--steel); font-size:.76rem;}

/* A checkbox that reads as a setting rather than as a stray tick. */
.mn-toggle{display:flex; align-items:center; gap:9px; padding:13px 14px;
           border:1px solid var(--line); background:var(--panel-2); cursor:pointer;}
.mn-toggle input{width:auto; margin:0;}
.mn-toggle span{font-size:.85rem; color:var(--steel);}
.mn-toggle:hover{border-color:var(--steel);}
.mn-toggle:has(input:checked) span{color:var(--bone);}

/* Which way the money went, at the start of every row. */
.mn-dot{width:8px; height:8px; flex-shrink:0; border-radius:50%;}
.mn-dot.in{background:var(--good);}
.mn-dot.out{background:var(--bad);}
.mn-dot.new{background:var(--orange);}
.mn-amt{font-family:'Oswald',sans-serif; white-space:nowrap;}
.mn-amt.in{color:var(--good);}
.mn-amt.out{color:var(--bad);}

/* A reason folds open on its pen into the form that rewrites it. */
.mn-cat > summary{list-style:none; cursor:pointer;}
.mn-cat > summary::-webkit-details-marker{display:none;}
.mn-pen{display:inline-flex; align-items:center; justify-content:center;
        width:28px; height:28px; flex-shrink:0; border:1px solid var(--line);
        background:var(--panel); color:var(--steel);
        transition:border-color .18s, color .18s;}
.mn-cat > summary:hover .mn-pen{border-color:var(--orange); color:var(--orange);}
.mn-cat[open] .mn-pen{border-color:var(--orange); color:var(--orange);}
.mn-cat.retired > summary .rt{color:var(--mute); text-decoration:line-through;}
.mn-catform{padding:16px; border:1px solid var(--line); border-top:none;
            background:var(--panel-2); margin-bottom:10px;}

/* ------------------------------------------- how far back a chart looks --- */
#attendance{scroll-margin-top:90px;}
.rng{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.rng-btn{padding:5px 11px; border:1px solid var(--line); background:var(--panel);
         color:var(--steel); font-family:'Oswald',sans-serif; font-size:.72rem;
         letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
         transition:border-color .18s, color .18s;}
.rng-btn:hover{border-color:var(--steel); color:var(--bone);}
.rng-btn.on{border-color:var(--orange); color:var(--orange); background:var(--panel-2);}
.rng-form{display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:12px;}
.rng-form label{display:flex; flex-direction:column; gap:4px; font-size:.74rem;}
.rng-form input{padding:9px 11px; font-size:.85rem;}
/* These sit outside .field, so they need saying to explicitly or the browser
   draws its own idea of an input in the middle of a designed page. */
.rng-form input, .sa-cell input, .sa-wday input{
  border:1px solid var(--line); border-radius:2px; background:var(--panel-2);
  color:var(--bone); font-family:'Work Sans',sans-serif; transition:border-color .18s;
}
.rng-form input:focus, .sa-cell input:focus, .sa-wday input:focus{
  outline:none; border-color:var(--orange);
}
.rng-span{font-size:.74rem; margin-bottom:10px;}

/* --------------------------------------------- staff attendance --- */
/* A fortnight of the gym's own people as one shape. Each column is a day,
   split by how that day went, because three numbers per day printed in a row
   is a table nobody reads. */
.sa-trend{display:flex; align-items:flex-end; gap:4px; height:160px; padding-top:10px;}
.sa-col{flex:1 1 0; min-width:0; height:100%; gap:6px; text-decoration:none;
        display:flex; flex-direction:column; align-items:center; justify-content:flex-end;}
.sa-col b{font-family:'Oswald',sans-serif; font-size:.7rem; font-weight:500; color:var(--mute);}
.sa-col:hover b{color:var(--bone);}
.sa-col.on b{color:var(--orange);}
.sa-stack{width:100%; max-width:26px; min-height:2px; background:var(--line);
          display:flex; flex-direction:column; justify-content:flex-end;}
.sa-stack i{display:block; width:100%;}
.sa-stack i.good{background:var(--good);}
.sa-stack i.warn{background:var(--warn);}
.sa-stack i.bad{background:var(--bad);}
.sa-col:hover .sa-stack{filter:brightness(1.2);}

.sa-key{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px;
        font-size:.76rem; color:var(--steel);}
.sa-key span{display:inline-flex; align-items:center; gap:6px;}
.sa-key i{width:10px; height:10px; display:inline-block;}
.sa-key i.good{background:var(--good);}
.sa-key i.warn{background:var(--warn);}
.sa-key i.bad{background:var(--bad);}

/* A row that opens onto somebody says so, quietly, at its end. */
.sa-go{display:inline-flex; align-items:center; color:var(--mute); flex-shrink:0;}
.sa-go .ic{width:15px; height:15px;}
a.row:hover .sa-go{color:var(--orange);}
[dir="rtl"] .sa-go .ic{transform:scaleX(-1);}

/* One person's week, on their own page: seven boxes rather than a table row. */
.sa-week{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px;}
.sa-wday{border:1px solid var(--line); background:var(--panel-2); padding:11px;}
.sa-wday > b{display:block; font-family:'Oswald',sans-serif; font-size:.74rem;
             letter-spacing:.06em; text-transform:uppercase; color:var(--steel);
             margin-bottom:8px;}
.sa-wday input{width:100%; padding:5px 6px; font-size:.76rem; margin-bottom:4px;}
.sa-wday input:last-child{margin-bottom:0;}
.sa-wday.on{border-color:var(--orange);}
.sa-wday.on > b{color:var(--orange);}

/* The timetable: seven days across, one row per person, two times per cell. */
.sa-table td.sa-cell{padding:6px;}
.sa-cell input{display:block; width:80px; margin:0 auto 4px; padding:5px 6px;
               font-size:.76rem;}
.sa-cell input:last-child{margin-bottom:0;}
.btn.on{border-color:var(--orange); color:var(--orange);}
@media(max-width:900px){ .sa-cell input{width:70px;} }

/* ------------------------------------------------- the workout sheet --- */
/* A day is a page of the gym's printed sheet: what it trains, the warm-up,
   the table, the cardio, the cool-down. The table is the point - a member
   reads it standing at a rack, one hand on a phone. */
.wk-day{border-inline-start:2px solid var(--orange); scroll-margin-top:90px;}
.wk-day-name{font-family:'Work Sans',sans-serif;font-weight:500;font-size:.82rem;
             color:var(--steel);margin-inline-start:10px;text-transform:none;letter-spacing:0;}

/* The end of a day's header: what it trains, then the arrow that opens it. */
.wk-dayhead-end{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                justify-content:flex-end;}

/* A day is a fold. Folded, the header is the whole card, so a week of
   training is a short list rather than a page of tables to scroll. */
.wk-daysum{cursor:pointer; list-style:none;}
.wk-daysum::-webkit-details-marker{display:none;}
.wk-day:not([open]) > .wk-daysum{border-bottom:none; padding-bottom:0; margin-bottom:0;}
.wk-daysum:hover .wk-daytoggle{border-color:var(--orange); color:var(--orange);}

/* The arrow points down at the day it opens, and up once it is open. */
.wk-daytoggle{display:inline-flex; align-items:center; justify-content:center;
              width:26px; height:26px; flex-shrink:0; border:1px solid var(--line);
              background:var(--panel); color:var(--steel);
              transition:transform .18s, border-color .18s, color .18s;}
.wk-daytoggle .ic{width:13px; height:13px;}
.wk-day[open] > .wk-daysum .wk-daytoggle{transform:rotate(180deg);
                                         border-color:var(--orange); color:var(--orange);}

/* Paper has no arrow to press, so every day is open on the printed sheet. */
@media print{
  .wk-daytoggle{display:none;}
  details.wk-day:not([open]) > *:not(summary){display:block !important;
                                              content-visibility:visible !important;}
}
.wk-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.wk-block:first-of-type{border-top:none;padding-top:0;}
.wk-block .eyebrow{display:block;margin-bottom:10px;}

/* Wide tables scroll inside their own box rather than pushing the page. */
.wk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.wk-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.wk-table th{font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.08em;
             text-transform:uppercase;color:var(--steel);font-weight:600;
             text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
.wk-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;}
.wk-table tr:last-child td{border-bottom:none;}
.wk-table .num{text-align:center;white-space:nowrap;width:1%;}
.wk-table th.num{text-align:center;}
.wk-ex b{display:block;font-weight:600;color:var(--bone);}
.wk-part{display:block;font-size:.74rem;color:var(--steel);margin-top:2px;}
.wk-note{display:block;font-size:.76rem;color:var(--orange);margin-top:3px;}

/* The video sits at the end: watched before the session, not during it. */
.wk-video{position:relative;margin-top:16px;padding-bottom:56.25%;height:0;overflow:hidden;
          border:1px solid var(--line);}
.wk-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---- the coach's side ---- */
.wk-edit-day{border-inline-start:2px solid var(--line);}
.wk-groups{display:flex;flex-wrap:wrap;gap:8px;}
.wk-groups .chip{cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.wk-groups .chip input{margin:0;}
.wk-edit-table td{padding:6px 8px;}
.wk-edit-table input[type="text"]{width:100%;min-width:52px;padding:7px 8px;font-size:.85rem;}
.wk-table .wk-x{width:1%;text-align:center;}
.wk-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
.wk-add input[type="text"]{flex:1 1 130px;min-width:0;padding:9px 10px;font-size:.85rem;}
.wk-add .wk-pick{flex:2 1 220px;min-width:0;}
.wk-add input[size="3"],.wk-add input[size="4"],.wk-add input[size="5"],
.wk-add input[size="6"]{flex:0 0 82px;}

@media(max-width:640px){
  .wk-table{font-size:.82rem;}
  .wk-table th,.wk-table td{padding:8px 7px;}
  .wk-add input[type="text"]{flex:1 1 100%;}
  .wk-add .wk-pick{flex:1 1 100%;}
}

/* On paper the member carries the table, not a video they cannot press. */
@media print{
  .wk-video{display:none;}
  .wk-day{break-inside:avoid;}
}

/* The shelf of exercises for the day: ticked in bulk, so it has to stay
   readable at twenty or thirty chips without owning the page. */
.wk-shelf{max-height:280px;overflow-y:auto;border:1px solid var(--line);padding:12px;}
.wk-shelf-part + .wk-shelf-part{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.wk-shelf .chip{cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.wk-shelf .chip input{margin:0;}
.wk-shelf .chip:has(input:checked){border-color:var(--orange);color:var(--bone);}

/* ---- the builder as a page: a day at a time, like the printed sheet ---- */
.wk-daybar{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;}
.wk-daytab{display:flex;flex-direction:column;justify-content:center;gap:2px;
           min-width:130px;padding:12px 16px;border:1px solid var(--line);
           background:var(--panel);transition:border-color .18s,background .18s;}
.wk-daytab b{font-family:'Oswald',sans-serif;font-size:.82rem;letter-spacing:.06em;
             text-transform:uppercase;color:var(--bone);}
.wk-daytab span{font-size:.76rem;color:var(--steel);}
a.wk-daytab:hover{border-color:var(--steel);background:var(--panel-2);}
.wk-daytab.on{border-color:var(--orange);background:var(--panel-2);}
.wk-daytab.on b{color:var(--orange);}
.wk-daytab-add{flex-direction:row;align-items:center;gap:8px;min-width:0;}
.wk-daytab-add input{width:150px;padding:8px 10px;font-size:.85rem;}

/* The steps, numbered, so the order to work in is visible rather than learned. */
.wk-step{border-inline-start:2px solid var(--line);}
.wk-stepno{display:inline-flex;align-items:center;justify-content:center;
           width:22px;height:22px;margin-inline-end:8px;background:var(--orange);
           color:#0b0b0c;font-family:'Oswald',sans-serif;font-size:.76rem;font-weight:700;}
.wk-sheet .card + .card{margin-top:16px;}

@media(max-width:640px){
  .wk-daytab{min-width:calc(50% - 5px);}
  .wk-daytab-add{min-width:100%;}
  .wk-daytab-add input{flex:1;width:auto;}
}

/* The clip for a movement, beside the movement. Small, because it is an offer
   rather than the point of the row. */
.wk-play{display:inline-block;margin-inline-start:7px;color:var(--orange);
         font-size:.78rem;text-decoration:none;vertical-align:middle;}
.wk-play:hover{color:var(--bone);}
.wk-rowvideo{display:block;width:100%;margin-top:5px;padding:5px 7px !important;
             font-size:.74rem !important;color:var(--steel);}
.lib-video{flex:1 1 150px;min-width:0;font-size:.8rem;}
@media print{ .wk-play,.wk-rowvideo{display:none;} }