/* The look, in one place.
   Matched to balivolleyballacademy.com so that somebody moving between the
   two sites does not feel handed off to a different company: sand ground,
   white cards with soft shadows, green pill buttons, a dark green strip
   across the very top.
   The texture photograph the marketing site uses as a background is
   deliberately not copied. Behind a calendar grid or a table of numbers it
   fights the data and makes small text harder to read. Flat sand instead. */
:root{
  --bg:#FFF5EB; --surface:#FFFCF7; --surface2:#FBF3E8; --raised:#FFFCF7;
  /* M595, Hans: "a lot of text is grey on another grey". The secondary
     voice was 4.6:1 on white and under 3:1 on a sand card at 13.6px;
     it is now 7:1 and 4.6:1, still visibly quieter than the text. */
  --text:#23302A; --muted:#4A5951; --muted-dim:#75847B;
  --line:#E7DCCC; --line-soft:#F0E7DA;
  --green:#073B25; --green2:#1E8F5A; --beige:#FFF5EB;
  --sand:#B98A12; --gray:#464646; --blue:#1D4ACF;
  --pill-ok-bg:#E4F4EA; --pill-ok:#146B43;
  --danger:#B4302A; --danger-line:#E9C9C6;
  --warn-bg:#FBF0D8; --warn-text:#6B5210;
  --live:#D1342B; --on-accent:#FFF5EB; --on-sand:#2A2308; --btn:#073B25;
  --shadow:0 2px 10px rgba(35,48,42,.07);
  --shadow-lg:0 6px 24px rgba(35,48,42,.10);
  --topbar:#073B25;
}
/* Staff screens stay dark. Reception is on the desk for eight hours, the
   admin pages are never seen by a customer, and a tournament page is often
   on a screen in daylight. Different job, different answer. */
body.dark{
  --bg:#0A2A1C; --surface:#0E3626; --surface2:#134231; --raised:#17503B;
  --text:#F3EADE; --muted:#B9CBBF; --muted-dim:#8FA697;
  --line:#1C5340; --line-soft:#173F30;
  --green:#073B25; --green2:#4ECB8D; --beige:#FFF5EB;
  --sand:#EDC04F; --gray:#F3EADE; --blue:#7C9BFF;
  --pill-ok-bg:#123F2C; --pill-ok:#7FE0AC;
  --danger:#F08A80; --danger-line:#6B302C;
  --warn-bg:#33290C; --warn-text:#EDC04F;
  --live:#FF6B60; --on-accent:#06251A; --on-sand:#3D3208; --btn:#4ECB8D;
  --shadow:none; --shadow-lg:none;
}
/* M882 (Hans, 29 Sep): "add a light mode for the back office, similar to
   the customer facing UI". A staff screen keeps its layout (body.dark) and
   only swaps the colours to the customer palette when the person picks
   Light in the header; remembered in this browser. */
body.dark.lite{
  --bg:#FFF5EB; --surface:#FFFCF7; --surface2:#FBF3E8; --raised:#FFFCF7;
  --text:#23302A; --muted:#4A5951; --muted-dim:#75847B;
  --line:#E7DCCC; --line-soft:#F0E7DA;
  --green:#073B25; --green2:#1E8F5A; --beige:#FFF5EB;
  --sand:#B98A12; --gray:#464646; --blue:#1D4ACF;
  --pill-ok-bg:#E4F4EA; --pill-ok:#146B43;
  --danger:#B4302A; --danger-line:#E9C9C6;
  --warn-bg:#FBF0D8; --warn-text:#6B5210;
  --live:#D1342B; --on-accent:#FFF5EB; --on-sand:#2A2308; --btn:#073B25;
  --shadow:0 2px 10px rgba(35,48,42,.07); --shadow-lg:0 6px 24px rgba(35,48,42,.10);
  color-scheme:light;
}
body.dark.lite header,body.dark.lite header h1{color:var(--text)}
body.dark.lite .brandname,body.dark.lite .adminchip{color:var(--text)}
body.dark.lite .brand img{filter:brightness(.28) sepia(1) hue-rotate(95deg) saturate(3)}
body.dark.lite input,body.dark.lite select,body.dark.lite textarea{background:#fff;color:var(--text);border-color:var(--line)}
body.dark.lite table th{color:var(--muted)}
.themechip{margin-left:.4rem;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.12rem .45rem;
  border-radius:6px;border:1px solid var(--line);color:var(--muted);background:none;cursor:pointer;font-family:inherit}
[hidden]{display:none !important}
*{box-sizing:border-box}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-synthesis-weight:none;margin:0;background:var(--bg);color:var(--text);
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--green2)}
body{background:var(--bg)}
h1,h2,h3{font-family:'Bebas Neue','Open Sans',sans-serif;letter-spacing:.02em;
  color:var(--text);margin:0 0 .4rem;line-height:1.05;font-weight:400}
/* green is the hero voice, near black is the working voice. Using green for
   everything flattens the hierarchy and nothing stands out. */
header h1{color:var(--green)}
body.dark header h1{color:var(--text)}
/* Sand is a highlight colour on a dark ground and close to invisible on a
   light one. On light it becomes a readable brown, set in the palette, and
   anything that used it for a heading now uses the text colour. */
.card h2,.card h3,.card h4{color:var(--text)}
h1{font-size:2.4rem}h2{font-size:1.6rem;margin-top:1.8rem}h3{font-size:1.2rem}
.topstrip{background:var(--topbar);color:#FFF5EB;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.45rem 1rem;
  text-align:center}
.topstrip a{color:#FFF5EB;text-decoration:none}
.topstrip .waico{vertical-align:-2px;margin-right:.35rem}
.topstrip .topicons{display:inline-flex;gap:.7rem;vertical-align:middle;margin-left:.1rem}
.topstrip .topicon{display:inline-flex;align-items:center;color:#FFF5EB;opacity:.85}
.topstrip .topicon:hover{opacity:1}
body.dark .topstrip{border-bottom:1px solid var(--line)}
header{padding:.9rem 1rem 1.1rem}
header{background:var(--surface);color:var(--text);
  border-bottom:1px solid var(--line)}
body.dark header{color:var(--beige);border-bottom:none}
.brandbar{align-items:center;margin:0 0 .7rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.brand img{display:block;opacity:.95}
.adminchip{margin-left:auto;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.12rem .45rem;border-radius:6px;border:1px solid var(--line);color:var(--muted);text-decoration:none}
.hgrow{flex:1 1 auto}
.acctchip{margin-left:.4rem;color:var(--text);border-color:var(--green2)}
/* Signed in, "Your account" is the one thing in that row somebody is
   actually looking for, and it sat wearing the same outline as Sign out
   beside it: two identical chips, one of which throws you out. It is
   solid now, so the eye finds it first and the one next to it reads as
   what it is, the quiet way out (M556). */
.acctchip.acctmain{background:var(--btn,#073B25);border-color:var(--btn,#073B25);
  color:#fff;font-weight:600}
.acctchip.acctmain:hover,.acctchip.acctmain:focus{background:var(--green);
  border-color:var(--green);color:#fff}
body.dark .acctchip.acctmain{background:var(--sand);border-color:var(--sand);
  color:var(--green);opacity:1}
body.dark .acctchip.acctmain:hover{opacity:.9;color:var(--green)}
/* the style hook is its own class, not the one the script switches on:
   naming the script's class in the stylesheet made the rule the first
   match in the page for anything hunting that button by name (M556) */
body.dark .adminchip{color:var(--beige);border-color:var(--line);opacity:.8}
.adminchip:hover{color:var(--text);border-color:var(--green2)}
.viewaschip{margin-left:.4rem}
.pweye{margin:.25rem 0 0 .3rem;font-size:.72rem;padding:.2rem .5rem;border-radius:6px;
  border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;
  text-transform:none;letter-spacing:0}
body.dark .adminchip:hover{opacity:1;border-color:var(--muted)}
.brandname{font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-size:1.12rem;letter-spacing:.13em;color:var(--green);opacity:1;
  text-transform:uppercase;line-height:1}
body.dark .brandname{color:var(--beige);opacity:.88}
/* The logo colour is chosen on the server, one image, no toggling. Two
   images with a CSS switch put both on screen the moment a rule misses,
   which is exactly what happened. */
.brand:hover .brandname{opacity:1}
.brand:focus-visible{outline:2px solid var(--green2);outline-offset:3px;border-radius:4px}
@media(max-width:520px){.brandname{font-size:.86rem;letter-spacing:.1em}
  .adminchip{font-size:.78rem;padding:.32rem .7rem;border-width:1.5px;
    order:3;margin-left:auto}
  .brandbar .v{order:2}}
header .wrap{max-width:1000px;margin:0 auto;display:flex;align-items:baseline;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}
header h1{color:var(--text);font-size:1.7rem;margin:0}
header .v{font-size:.75rem;letter-spacing:.08em;color:var(--muted);opacity:1}
body.dark header .v{opacity:.7;color:inherit}
main{max-width:1000px;margin:0 auto;padding:1.2rem 1rem 4rem}
body.dark main{max-width:1380px;padding-top:.7rem}
body.dark header .wrap{max-width:1380px}
.card{background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow);border-radius:12px;
  padding:1rem;margin:0 0 1rem}
.muted{color:var(--muted);font-size:.88rem}
.memprice{color:var(--green2);font-weight:600}
.dmyrow{display:inline-flex;align-items:center;gap:.3rem;max-width:100%;vertical-align:middle}
.dmyrow input.dmyfield{min-width:0}
.signup .dmyrow,.formgrid .dmyrow{display:flex}
.signup .dmyrow input.dmyfield,.formgrid .dmyrow input.dmyfield{flex:1}
.dmypick{position:relative;display:inline-block;flex:none;line-height:1}
/* M759: date of birth as Day, Month, Year dropdowns, labelled above */
.dobpick{display:flex;gap:.5rem;width:100%;max-width:26rem;margin-top:.3rem}
.dobcol{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.dobcol:nth-child(1){flex:1}.dobcol:nth-child(2){flex:1.8}.dobcol:nth-child(3){flex:1.3}
.dobcap{font-size:.78rem;font-weight:600;color:var(--muted)}
.dobpick select{width:100%;min-height:44px;border-radius:10px;padding:.35rem .5rem}
.dobnote{display:block;font-size:.78rem;color:var(--muted);margin-top:.3rem;font-weight:400}
.dmybtn{border:1px solid var(--line);background:transparent;color:var(--green2);
  border-radius:8px;padding:.45rem .6rem;cursor:pointer;font-size:1rem;line-height:1}
.signup .dmybtn{padding:.6rem .8rem}
.dmyhidden{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  margin:0;padding:0;border:0;font-size:16px;-webkit-appearance:none;appearance:none}
.pubfoot{margin:2rem 0 1rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:.82rem;text-align:center}
/* M527, Hans, from a phone: "The page tabs at the bottom when selected
   are not readable. They get color blocked". This rule is (0,1,1) and
   .btn is (0,1,0), so the footer's link colour won every button in it
   and the current page's pill rendered green text on a green fill. The
   footer colours its own links, never a control inside it. */
.pubfoot a:not(.btn){color:var(--green2)}
.pubfoot a.btn{color:var(--on-accent)}
.pubfoot a.btn.alt{color:var(--text)}
.pubfoot a.btn.alt:hover{color:var(--green2)}
.footicons{display:inline-flex;gap:1.1rem;margin:.5rem 0;vertical-align:middle}
.footicon{color:var(--muted);display:inline-flex;align-items:center}
.footicon:hover{color:var(--green2)}
/* Fixed to the bottom with nothing making room for it, this covered
   whatever sat at the end of the page and swallowed the click. Azad had
   a Sign up press intercepted by it. The page now reserves the space
   while the bar is up and gives it back the moment it is answered, and
   it wraps to at most two lines on a phone (M518, Azad 6). */
#ckbar{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--green);color:var(--beige);padding:.6rem .9rem;
  display:flex;gap:.7rem;align-items:center;justify-content:center;
  flex-wrap:wrap;font-size:.86rem;max-height:40vh;overflow:auto}
/* The second button sat on the dark green bar wearing colours designed
   for the light page, so its text was dark green on dark green and simply
   could not be read. Hans photographed it on a phone: an invisible
   button. It is given its own colours here rather than borrowed ones.
   Deliberately quieter than Allow, an outline against a solid button, but
   quiet is not the same as invisible: beige on the green bar is high
   contrast and reads at arm's length (M556). */
#ckbar #ckno{background:transparent;color:var(--beige);
  border:1px solid rgba(255,245,235,.55);box-shadow:none}
#ckbar #ckno:hover,#ckbar #ckno:focus{border-color:var(--beige);
  background:rgba(255,245,235,.12);color:var(--beige)}
body.ckup{padding-bottom:7.5rem}
@media (max-width:640px){body.ckup{padding-bottom:10rem}}
.callabel{display:inline-block;min-width:14.5rem;text-align:center}
.calarrow{min-width:2.2rem;text-align:center}
/* M738. Hans, on a phone: "look at the arrow to the right. It's in a
   strange position". It was. The date bar wraps, and the label holds a
   14.5rem minimum, so on a narrow screen the forward arrow was the item
   that did not fit and it wrapped to the start of the next line, under
   Today and beside Day/Week/Month, which is where it looked like it
   belonged to them.
   Back, date, forward are one control, so they are one element. Below
   640px the group takes a row of its own and centres, which is the only
   layout where both arrows are the same distance from the date they
   move. */
.caldate{display:inline-flex;align-items:center;gap:.5rem;min-width:0}
@media (max-width:640px){
  .caldate{flex:1 1 100%;justify-content:center}
  .callabel{min-width:0;flex:0 1 auto}
}
.viewsw{margin:0 .5rem}
.viewsw a,.viewsw strong{margin:0 .25rem}
.calweekgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;
  align-items:start}
.calmonthgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.calhead{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:.7;padding:.1rem .2rem}
.calcell{border:1px solid var(--line);border-radius:8px;padding:.3rem;
  min-height:4.2rem;display:flex;flex-direction:column;gap:.15rem;
  overflow:hidden}
.caltoday{border-color:var(--sand)}
.calday{font-weight:700;text-decoration:none;color:var(--green2)}
.calclosed{font-size:.62rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.calmini{display:block;font-size:.72rem;line-height:1.25;
  text-decoration:none;color:inherit;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.calmini:hover{text-decoration:underline}
.asbadge{position:fixed;top:.7rem;right:.7rem;z-index:60;background:var(--sand);
  color:var(--green);font-weight:700;border-radius:50%;min-width:1.7rem;
  height:1.7rem;display:flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
/* M518, Azad 7: it stands still, says one thing once, and carries a
   real button rather than being one big scrolling link. */
.ticker{display:flex;gap:.6rem;align-items:center;justify-content:center;
  flex-wrap:wrap;background:var(--sand);
  color:var(--green);font-weight:600;font-size:.86rem;letter-spacing:.02em;
  padding:.4rem .8rem;margin:0 0 .6rem;border-radius:8px;text-decoration:none;
  line-height:1.35;text-align:center}
.tickgo{background:var(--green);color:var(--beige);border-radius:999px;
  padding:.25rem .7rem;text-decoration:none;font-size:.8rem;white-space:nowrap}
/* M518, Azad 1: three actions carry the row, the rest fold away. */
.navmore{display:inline-block}
.navmore>summary{list-style:none;cursor:pointer;display:inline-block}
.navmore>summary::-webkit-details-marker{display:none}
/* The arrow is the character itself. Written as a CSS escape it was
   read by PYTHON first,  as octal, and the page served a control
   character followed by the letters BE. Hans saw "EXPLORE BE". */
.navmore>summary::after{content:" ▾"}
.navmorein{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem;
  padding:.5rem;border:1px solid var(--line);border-radius:10px}
.tickrun{display:inline-block;animation:tickmove 24s linear infinite}
.tickrun>span{padding:0 3rem}
.ticker:hover .tickrun{animation-play-state:paused}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .tickrun{animation:none}
  .ticker{white-space:normal;text-align:center;padding:.35rem .8rem}
  .tickrun>span+span{display:none}
}
/* On a narrow screen a marquee shows half a sentence at a time, and half
   a sentence in a gold box reads as broken software rather than as a
   notice. Hans screenshotted exactly that. Below 700px it simply wraps
   and sits still (M486). */
@media (max-width:700px){
  .tickrun{animation:none;display:block}
  .ticker{white-space:normal;text-align:center;padding:.4rem .9rem;
    line-height:1.35}
  .tickrun>span{padding:0}
  .tickrun>span+span{display:none}
}
.cmore summary{cursor:pointer;list-style:none;margin:.2rem 0 .4rem}
.cmore summary::-webkit-details-marker{display:none}
.cmore .chide{display:none}
.cmore[open] .cprev{display:none}
.cmore[open] .chide{display:inline}
.cmore p{margin:.3rem 0}
.packtable{width:100%;border-collapse:collapse;margin:.5rem 0 0}
.packtable th{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;padding:.3rem .4rem;
  border-bottom:1px solid var(--line)}
.packtable td{padding:.5rem .4rem;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.packtable td:nth-child(2),.packtable td:nth-child(3){white-space:nowrap}
@media (max-width:460px){
  .packtable td,.packtable th{padding:.45rem .25rem;font-size:.85rem}
  .packtable .muted{font-size:.72rem}
  .packtable .btn{padding:.45rem .7rem;font-size:.72rem}
}
.packtable tr:last-child td{border-bottom:none}
.packsave{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;color:var(--green2);margin-left:.3rem}
.langrow{margin:.2rem 0 .6rem}.langrow a{margin-right:.6rem}.langrow strong{margin-right:.6rem}
.mbm{width:auto;border-collapse:collapse}.mbm th,.mbm td{padding:.35rem 1.1rem;text-align:right;white-space:nowrap}.mbm th:first-child,.mbm td:first-child{text-align:left}.mbm thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.card table.ymx,.ymx{width:auto;border-collapse:collapse}.ymx th,.ymx td{padding:.3rem .8rem;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}.ymx th:first-child,.ymx td:first-child{text-align:left}.ymx .ysep{border-left:1px solid var(--line-soft)}.ymx thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.custnote{display:inline-block;margin-top:.15rem;font-size:.82rem;
  color:var(--text);background:var(--line-soft);border-radius:.4rem;
  padding:.1rem .45rem;max-width:34rem}
.cwday{display:flex;gap:.7rem;align-items:baseline;padding:.45rem 0;
  border-bottom:1px solid var(--line-soft)}
.cwday:last-child{border-bottom:none}
.cwlabel{min-width:6.2rem;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:700}
.cwcoach{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;
  margin:0 0 .8rem;background:var(--surface)}
.cwcoach h3{margin:0 0 .1rem}
.cwshare{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;
  word-break:break-all}
.pill{display:inline-block;padding:.15rem .55rem;border-radius:999px;
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
.pill.ok{background:var(--pill-ok-bg);color:var(--pill-ok)}
.pill.warn{background:var(--sand);color:var(--green);border-color:var(--sand)}
.pill.off{background:var(--surface2);color:var(--muted)}
.warn{background:var(--warn-bg);border:1px solid var(--sand);border-radius:10px;
  padding:.8rem 1rem;margin:0 0 1rem;color:var(--warn-text);font-size:.9rem}
.datebar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 .5rem}
.btn{display:inline-block;background:var(--btn,#073B25);color:var(--on-accent);border:1px solid var(--btn,#073B25);padding:.62rem 1.15rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;line-height:1.2;font-family:'Open Sans',sans-serif;white-space:nowrap}
.btn.alt{background:transparent;color:var(--text);border:1px solid var(--line)}
/* M905 brand v1.1: the one main action per page is gold with green text */
.btn.main,.btn.sand{background:#EDC04F;border-color:#EDC04F;color:#073B25}
.btn.main:hover,.btn.sand:hover{filter:brightness(1.05)}
.btn.alt:hover{border-color:var(--green2);color:var(--green2)}
.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger-line)}
a.slot.bookable{background:var(--brand,#1E8F5A);color:#fff;font-weight:600;text-decoration:none;border-color:transparent}
a.slot.bookable:hover{filter:brightness(1.12)}
.courtrow{margin:0 0 1.1rem}
.courtrow .head{display:flex;justify-content:space-between;align-items:baseline;
  gap:.6rem;margin:0 0 .4rem}
.slots{display:flex;flex-wrap:wrap;gap:.35rem}
.slotkey{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted);margin:.2rem 0 .6rem}
.slotkey .slot{pointer-events:none}
.slot{border-radius:7px;padding:.35rem .5rem;font-size:.8rem;
  border:1px solid transparent;min-width:60px;text-align:center}
.slot.free{background:var(--surface);border-color:var(--line);color:var(--text);
  text-decoration:none;display:inline-block}
a.slot.free{cursor:pointer;transition:background .12s,border-color .12s}
a.slot.free:hover{background:var(--green2);color:var(--on-accent);border-color:var(--green2)}
a.slot.free:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.slot.busy{background:var(--surface2);border-color:var(--line);color:var(--muted);
  text-decoration:line-through}
.slot.past{background:transparent;border-color:var(--line);color:var(--muted-dim)}
/* Tables scroll sideways rather than pushing out of their card. The register
   now carries six controls in a row and an email address is one unbroken
   word, so on a laptop the row was simply wider than the page and the right
   hand columns were unreachable. A script-added wrapper div (.twrap) is
   the scroller, so no edit is needed at the forty places a table is
   built and the table itself keeps real table layout. */
table{width:100%;border-collapse:collapse;font-size:.9rem}
/* the scroller is a wrapper div the shared page script adds around every
   table at load, so the table stays a REAL table: header and body share
   one set of columns and every title sits over its data. The old
   display:block table with display:table thead/tbody laid the header out
   as its own separate table, which is exactly why every wide page's
   column titles drifted off their columns (Hans, M424). */
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* a table wide enough to scroll only ever showed that at its own bottom
   edge, the native scrollbar, which on a tall table is off screen by the
   time somebody has scrolled down far enough to reach it. This is the same
   scrollbar, moved to sit right above the table instead, so the fact that
   there is more to see sideways is visible immediately. */
.tscrolltop{overflow-x:auto;overflow-y:hidden;height:14px;margin:0 0 -1px}
.tscrolltop > div{height:1px}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line);
  vertical-align:top;overflow-wrap:break-word;min-width:5.5em}
/* a table with many dense cells (register, players) must not starve one
   column down to nothing and then break every letter of a name onto its
   own line to fit; the minimum above keeps every column at least readable,
   and the table already scrolls sideways for anything still too wide */
/* nothing inside a cell may be wider than the cell */
td input,td select,td textarea{max-width:100%}
.card{max-width:100%;overflow:visible}
th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font-family:inherit;font-size:.9rem;padding:.4rem .5rem;
  max-width:100%;
  border:1px solid var(--line);border-radius:7px;background:var(--surface2);
  color:var(--text)}
input::placeholder{color:var(--muted-dim)}
input:focus-visible,select:focus-visible{outline:2px solid var(--green2);outline-offset:1px}
form.inline{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
footer{max-width:1000px;margin:0 auto;padding:0 1rem 3rem;font-size:.78rem;color:var(--muted)}
.rep{margin:.2rem 0 .9rem;padding-left:1.1rem;font-size:.85rem;line-height:1.5}
.rep li{margin:.1rem 0}
h3.ok{color:var(--pill-ok)}
h3.bad{color:var(--danger)}
h3.warnpill{color:var(--warn-text)}
h3.muted{color:var(--muted)}
.chks{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
/* M491. A tick box sat on the same line as its sentence and as the next
   box's sentence, so on a phone three questions read as one paragraph and
   nobody could tell which words belonged to which box. The box now sits at
   the top left of its own text, the explanation under it drops to its own
   line, and .chkstack puts real air between stacked questions. */
label.chk{display:inline-flex;align-items:flex-start;gap:.55rem;font-size:.9rem;
  line-height:1.45}
label.chk>input[type=checkbox]{flex:none;margin-top:.2rem;width:1.05rem;
  height:1.05rem;accent-color:var(--green2)}
label.chk .muted{display:block;margin-top:.2rem;font-size:.8rem;line-height:1.4;
  text-transform:none;letter-spacing:0}
.chkstack label.chk{display:flex;margin:0 0 .95rem;padding-bottom:.85rem;
  border-bottom:1px solid var(--line-soft)}
.chkstack label.chk:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.grid2 label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.grid2 .full{grid-column:1/-1}
.grid2 label .muted,.formgrid label .muted{text-transform:none;letter-spacing:0}
.grid2 label.chk{flex-direction:row;text-transform:none;letter-spacing:0;font-size:.9rem;
  color:var(--gray);align-items:center}
/* ---- season calendar, the fuller brand treatment ---- */
.seasonhero{padding:.6rem 0 .2rem}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .8rem}
.bighead{font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-size:clamp(3.2rem,12vw,6.4rem);line-height:.86;margin:0;letter-spacing:.005em;
  color:var(--text)}
.bighead em{font-style:normal;color:var(--green2);display:block}
.lede{margin:1.1rem 0 0;font-size:1rem;color:var(--muted);max-width:52ch}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;margin:1.8rem 0 0}
.stat{background:var(--surface);padding:.9rem 1rem}
.stat b{display:block;font-family:"Bebas Neue",Impact,sans-serif;font-size:2.3rem;
  line-height:1;color:var(--text);font-weight:400;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0;padding-bottom:1.4rem;
  border-bottom:1px solid var(--line)}
.filters button{font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;background:var(--surface);color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;
  transition:background .15s,color .15s,border-color .15s}
.filters button:hover{border-color:var(--green2);color:var(--green)}
.filters button:focus-visible{outline:2px solid var(--green2);outline-offset:2px}
.filters button[aria-pressed="true"]{background:var(--green2);color:var(--on-accent);
  border-color:var(--green2)}
.season{position:relative;padding:.4rem 0 1rem}
.seasonyear{font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(2.3rem,8vw,3.8rem);line-height:1;color:var(--text);
  margin:2.2rem 0 .2rem;padding-left:82px;position:relative;letter-spacing:.02em}
.seasonyear::before{content:"";position:absolute;left:0;top:.44em;width:64px;height:2px;
  background:var(--line)}
.seasonyear span{color:var(--muted);font-size:.32em;letter-spacing:.14em;margin-left:.7rem}
.sev{position:relative;display:grid;grid-template-columns:82px 1fr;gap:1.3rem;
  padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:start}
.sev::before{content:"";position:absolute;left:29px;top:0;bottom:0;width:2px;
  background:var(--line)}
.sev::after{content:"";position:absolute;left:24px;top:1.55rem;width:12px;height:12px;
  border-radius:50%;background:var(--green2);border:3px solid var(--bg)}
.sev.away::after{background:var(--blue)}
.sev.series::after{background:var(--sand);width:15px;height:15px;left:22px;top:1.5rem;
  border-radius:3px;transform:rotate(45deg)}
.sevwhen{padding-left:52px;font-family:"Bebas Neue",Impact,sans-serif;font-size:1.75rem;
  line-height:1;color:var(--text);font-variant-numeric:tabular-nums;padding-top:.2rem;
  letter-spacing:.01em}
.sevwhen small{display:block;font-family:"Open Sans",sans-serif;font-size:.6rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-top:.35rem}
.sevmain h3{margin:0;font-size:1.12rem;font-weight:700;line-height:1.3;color:var(--text);
  text-wrap:balance}
.sevwhere{margin:.3rem 0 0;font-size:.92rem;color:var(--muted)}
.sevdocs{margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.sevdoc{display:inline-block;padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px;font-size:.8rem;text-decoration:none}
.sevdoc:hover{border-color:var(--green2)}
.sevnote{margin:.4rem 0 0;font-size:.88rem;color:var(--muted);font-style:italic}
.sev .tags{margin-top:.65rem}
.sev[hidden]{display:none}
.sev.series .sevmain h3{color:var(--green2)}
body.dark .sev.series .sevmain h3{color:var(--sand)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:.28rem .6rem;border-radius:3px;
  border:1px solid var(--line);color:var(--muted);line-height:1.3}
.tag.home{color:var(--green2);border-color:var(--green2)}
.tag.away{color:var(--blue);border-color:var(--blue)}
.tag.series{color:var(--green2);border-color:var(--green2)}
body.dark .tag.series{color:var(--sand);border-color:var(--sand)}
@media(max-width:560px){
  .seasonyear{padding-left:0}
  .seasonyear::before{display:none}
  .sev{grid-template-columns:1fr;gap:.5rem;padding:1rem 0 1rem 30px}
  .sev::before{left:5px}
  .sev::after{left:0;top:1.35rem}
  .sev.series::after{left:-1px;top:1.3rem}
  .sevwhen{padding-left:0;display:flex;align-items:baseline;gap:.6rem;padding-top:0}
  .sevwhen small{margin:0}
}
.phonerow{display:flex;align-items:stretch;gap:.3rem}
.phonerow .plus{display:flex;align-items:center;color:var(--muted);font-size:1rem}
.phonerow .cc{width:4.6rem;text-align:center}
.phonerow .phone{flex:1;min-width:0}
.regtable{min-width:1400px}
.regtable th{white-space:nowrap;text-align:left}
/* the row number stays a row number, and the avatar sits inside the name
   rather than owning a column of a very wide table (Hans, M449) */
.regtable td:first-child,.regtable th:first-child{width:2.6rem}
.namerow{display:flex;gap:.6rem;align-items:flex-end}
.namerow>label{flex:1 1 0;min-width:0}
.namerow input{width:100%}
.namenote{display:block;text-transform:none;letter-spacing:0;
  margin:-.4rem 0 0;font-size:.78rem}
@media(max-width:420px){.namerow{flex-direction:column;align-items:stretch}}
/* the view-as directory: name left, one button hard right (Hans, M450) */
.vrow{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.12rem .1rem;border-top:1px solid var(--line-soft);min-height:0}
.vrow:first-of-type{border-top:0}
.vrow .vwho{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:.9rem}
.vrow .btn{flex:none;min-height:0;padding:.15rem .6rem;font-size:.72rem}
.vrow form{margin:0}
/* M829 (Hans, 28 Sep): "too much empty space", so the directory is columns */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));column-gap:1.4rem}
.vgrid .vrow:first-of-type{border-top:1px solid var(--line-soft)}
.vrole{margin:.55rem 0 .1rem;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* on air, in the one colour the brand already uses for live (M456) */
.pill.live{background:var(--live);color:#fff;border-color:transparent}
/* a YouTube embed that keeps its shape on a phone (M459) */
.ytwrap{position:relative;width:100%;padding-top:56.25%;margin:1rem 0;
  border-radius:10px;overflow:hidden;background:var(--surface2)}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pagebody h2{font-size:1.35rem;margin:1.4rem 0 .4rem}
.pagebody h3{font-size:1.08rem;margin:1.2rem 0 .3rem}
.pagebody p{margin:.6rem 0;max-width:62ch}
.pagebody ul{margin:.4rem 0 .8rem;padding-left:1.1rem}
.pagebody li{margin:.25rem 0}
.namecell{display:flex;align-items:flex-start;gap:.5rem}
.namecell>.av{margin-top:.15rem}
.namecell>span:last-child{min-width:0}
/* M617. Hans, 15 Sep, with a photo of /invest on a phone: the labels and
   the boxes ran into one grey paragraph. The cause was never that page: a
   form element with no layout class left its labels inline, because every form
   that reads properly (.signup, .wideform, .grid2, .addany, .formgrid)
   only reads properly because somebody remembered the class. This is the
   default, so a form that forgets one still stacks: caption on its own
   line, field under it. Only the form's own children are touched, so a
   form that lays its fields out in a classed grid or row is untouched,
   and a form that deliberately sits on one line says so with a style
   attribute or class=inline. */
form:not([class]):not([style]) > label:not(.chk){display:flex;
  flex-direction:column;gap:.3rem;margin:0 0 .85rem;max-width:26rem;
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted)}
form:not([class]):not([style]) > label:not(.chk) input,
form:not([class]):not([style]) > label:not(.chk) select,
form:not([class]):not([style]) > label:not(.chk) textarea{font-size:1rem;
  padding:.55rem .6rem;text-transform:none;letter-spacing:0;color:var(--text)}
form:not([class]):not([style]) > label:not(.chk) .muted{text-transform:none;
  letter-spacing:0}
form:not([class]):not([style]) > label.chk:not([style]){margin:0 0 .85rem}
.signup{display:grid;gap:.8rem;max-width:340px;grid-template-columns:minmax(0,1fr)}
.signup label{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);min-width:0}
.signup input,.signup select{font-size:1rem;padding:.55rem .6rem}
/* M927 (Hans, 2 Oct, "fix design issue"): a dropdown is as wide as its
   longest option, and "Assistant coach: six names" made the coaching pack
   form a 1,100px column inside a 600px card. The column is the form's
   width now, whatever an option says, and a long option is cut, not the card. */
.signup select{min-width:0;max-width:100%;text-overflow:ellipsis}
.pair2>.card{min-width:0}
.signup label .muted,.wideform label .muted{text-transform:none;letter-spacing:0}
.signup button{justify-self:start;padding:.6rem 1.4rem}
/* M862 (Hans, 29 Sep: "boxes and text not well structured"): a tick box or a
   choice inside a sign up form reads as a sentence beside its box, not as a
   shouted caption under a centred box */
.signup label.chk{display:grid;grid-template-columns:1.05rem 1fr;column-gap:.55rem;
  row-gap:.15rem;align-items:start;text-transform:none;letter-spacing:0;
  font-size:.95rem;color:var(--text);text-align:left}
.signup label.chk>input{grid-column:1;grid-row:1 / span 3;width:1.05rem;height:1.05rem;
  padding:0;margin:.2rem 0 0}
.signup label.chk>:not(input){grid-column:2}
.signup label.chk .muted{font-size:.85rem}
.signup fieldset legend{color:var(--muted)}
/* a card that stays folded until somebody wants it, for the jobs that are
   real but rare: creating a coach, editing a rate. Open, it lays its
   fields out two to a row instead of one narrow column (Hans, M447) */
.foldcard{border:1px solid var(--line);border-radius:10px;margin:0 0 1rem;
  background:var(--surface)}
.foldcard>summary{cursor:pointer;list-style:none;padding:.7rem .9rem;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sand);font-weight:600}
.foldcard>summary::-webkit-details-marker{display:none}
.foldcard>summary::after{content:'be';float:right;color:var(--muted)}
.foldcard[open]>summary::after{content:'b4'}
.foldcard[open]>summary{border-bottom:1px solid var(--line)}
.foldbody{padding:.9rem}
.wideform{display:grid;gap:.8rem 1.2rem;grid-template-columns:repeat(2,minmax(12rem,1fr))}
.wideform label{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.wideform input,.wideform select{font-size:1rem;padding:.55rem .6rem;width:100%}
.wideform label.chk{flex-direction:row;align-items:center;gap:.5rem;
  text-transform:none;letter-spacing:0}
.wideform label.chk input{width:auto}
.wideform .full{grid-column:1/-1}
.wideform .full.actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.wideform button{padding:.6rem 1.4rem}
@media(max-width:560px){.wideform{grid-template-columns:1fr}}
.pubnav{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.2rem}
@media(max-width:560px){
  .pubnav .btn{padding:.42rem .7rem;font-size:.86rem}
}
/* M582, Hans: "make a background behind Schedule, Book a court etc. so
   they look like buttons, and make the text bigger." On the sand ground
   (M579) the see-through alt pill with its beige hairline read as plain
   words. The row under the hero is a nav element; the footer's copy is a
   div and keeps the quiet look. */
/* M691: every pill in this row carries the SAME border width. The base
   .btn is 1px and every variant in the row was 1.5px, so the pill for the
   page you are on rendered a hair shorter than its neighbours and the row
   did not line up. On a phone, at 3x, that reads as two different sizes. */
nav.pubnav .btn{font-size:.95rem;padding:.72rem 1.3rem;border-width:1.5px;
  box-shadow:0 1px 3px rgba(7,59,37,.14)}
nav.pubnav .btn.alt{background:var(--surface);border:1.5px solid var(--green2);color:var(--text);
  box-shadow:0 1px 3px rgba(7,59,37,.14)}
body:not(.dark) nav.pubnav .btn.alt{color:var(--green)}
nav.pubnav .btn.alt:hover{background:var(--green2);border-color:var(--green2);color:var(--on-accent)}
nav.pubnav .navmorein .btn{font-size:.86rem;padding:.5rem .95rem}
/* M589: the one the visitor came for. Filled, a shade wider, and a halo
   that breathes every three seconds so the eye finds it without the page
   shouting. Reduced motion turns the halo off and keeps the fill.

   M691, Hans: "schedule button should be a different color. because
   clicked buttons are already green and having both green is not good",
   and "make the more important tabs a slightly different color and
   explore again different". Green filled used to mean two things at once
   in this row: THIS IS THE ONE TO PRESS, and YOU ARE HERE. Two meanings
   on one colour is no meaning, so the row now has four states and each
   one is a different thing:

     Schedule      sand, filled, with the halo. The loudest, always.
     the actions   a green wash with a green edge. Real things to do.
     you are here  solid green. The only solid green left in the row.
     Explore       plain grey. Not an action, a way to see more.

   Sand is the brand's own "press this" colour and it is already what the
   top chip uses, so the visitor is not being taught a new one. */
nav.pubnav .btn.navkey{background:var(--sand);border:1.5px solid var(--sand);
  color:var(--on-sand);position:relative;padding-left:1.5rem;padding-right:1.5rem;
  box-shadow:0 2px 12px rgba(185,138,18,.34)}
nav.pubnav .btn.navkey:hover{filter:brightness(1.08);color:var(--on-sand)}
nav.pubnav .btn.navkey::after{content:"";position:absolute;inset:-3px;border-radius:999px;
  border:2px solid var(--sand);opacity:0;pointer-events:none;
  animation:navkeypulse 3s ease-out infinite}
/* the second tier: the things a visitor actually comes here to buy. A
   wash rather than an outline, so they read as doors and not as chrome,
   and quiet enough that the sand one still wins the eye. */
nav.pubnav .btn.navdo{background:rgba(30,143,90,.10);
  background:color-mix(in srgb, var(--green2) 12%, transparent);
  border:1.5px solid var(--green2);color:var(--green);
  box-shadow:0 1px 3px rgba(7,59,37,.14)}
body.dark nav.pubnav .btn.navdo{color:var(--green2)}
nav.pubnav .btn.navdo:hover{background:var(--green2);color:var(--on-accent)}
/* the third: Explore is not an action, it is a lid. Grey, and it stops
   competing with the four things under it. */
/* M695, Hans: "explore button on public page is almost transparent, pick
   a different more visible color". Transparent on a beige ground behind a
   hairline border is close to no button at all in daylight. It stays the
   quiet one, because it is a lid and not an action, but quiet now means a
   solid neutral with a real edge rather than an outline you hunt for. */
nav.pubnav .navmore>summary.btn.alt{background:rgba(70,70,70,.12);
  background:color-mix(in srgb, #464646 14%, transparent);
  border:1.5px solid #464646;color:var(--text);
  box-shadow:0 1px 3px rgba(7,59,37,.14)}
nav.pubnav .navmore>summary.btn.alt:hover{background:#464646;
  border-color:#464646;color:#FFF5EB}
body.dark nav.pubnav .navmore>summary.btn.alt{background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.45)}
body.dark nav.pubnav .navmore>summary.btn.alt:hover{background:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.9);color:#073B25}
@keyframes navkeypulse{
  0%{transform:scale(1);opacity:.6}
  60%{transform:scale(1.16);opacity:0}
  100%{transform:scale(1.16);opacity:0}
}
@media(prefers-reduced-motion:reduce){nav.pubnav .btn.navkey::after{animation:none}}
@media(max-width:560px){
  nav.pubnav .btn{font-size:.88rem;padding:.6rem 1rem}
  nav.pubnav .btn.navkey{padding-left:1.2rem;padding-right:1.2rem}
  nav.pubnav .navmorein .btn{font-size:.82rem;padding:.45rem .8rem}
}
.evblurb{margin:.15rem 0 .45rem;font-size:.93rem;line-height:1.4}
textarea[name=blurb]{width:100%;min-height:3.2rem;font:inherit;font-size:.95rem;padding:.4rem .5rem}
.pubfoot{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.pubfoot .pubnav{margin:0}
.livestrip{display:flex;align-items:center;gap:.55rem;background:var(--surface);
  border:1px solid var(--danger-line);border-left:4px solid var(--live);border-radius:10px;
  padding:.75rem 1rem;margin:0 0 1rem;text-decoration:none;color:var(--gray);
  font-size:.95rem;flex-wrap:wrap}
.livedot{width:9px;height:9px;border-radius:50%;background:var(--live);flex:0 0 auto;
  animation:livepulse 2s ease-in-out infinite}
.livego{color:var(--green2);font-weight:600}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.livedot{animation:none}}
.evprev{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  text-decoration:none;color:var(--green);font-size:.72rem;font-weight:600}
.evprev img{border-radius:8px;display:block;object-fit:cover;border:1px solid var(--line)}
.evprev:hover span{text-decoration:underline}
.evday{font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:1.8rem 0 .6rem;font-weight:600}
.evcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1rem;margin:0 0 .6rem;display:flex;gap:1rem;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.evmain{flex:1 1 260px}
.evcard h3{margin:0 0 .25rem;font-size:1.05rem;color:var(--text);display:flex;align-items:center;gap:.5rem;
  flex-wrap:wrap}
.evcard p{margin:.15rem 0}
.evcost{font-size:.9rem;color:var(--text)}
.evact{flex:0 0 auto;display:flex;flex-direction:column;gap:.4rem;align-items:stretch;text-align:center}
.evask{font-size:.8rem;padding:.4rem .7rem}
/* The mobile rule used to cut the slots from 60px to 54px wide and left
   them 32px tall, under the 44px a finger needs. Narrower is fine, short
   is not (M518, Azad 12). */
@media(max-width:640px){h1{font-size:1.9rem}
  .slot{min-width:54px;font-size:.75rem}}
@media (pointer:coarse){
  .slot{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center}
  .daychip{min-height:44px;display:inline-flex;align-items:center}
}/* M874 (Hans, 29 Sep): "you are wasting a lot of space on mobile, make
   sure there is less scrolling". Staff screens on a phone: one thin header
   row (logo, page name, Admin), tighter cards and buttons, the advisor count
   lives on the Menu badge only, and the calendar tools sit in two rows. */
@media(max-width:640px){
  body.dark .topstrip{display:none}
  body.dark header{padding:.3rem .6rem .25rem}
  body.dark header{display:flex;align-items:center;gap:.4rem}
  body.dark header .brandbar{display:contents}
  body.dark header .brand{order:1}
  body.dark header .wrap:not(.brandbar){order:2;flex:1 1 auto;min-width:0;margin:0;display:block}
  body.dark header .brandbar .v{display:none}
  html body.dark header .adminchip{order:3 !important;margin-left:0}
  html body.dark header .brand{order:1}
  body.dark .brandbar{margin:0}
  body.dark .brandname{display:none}
  body.dark .brand img{width:30px;height:auto}
  body.dark header h1{font-size:1.05rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
  body.dark header .v{font-size:.62rem}
  body.dark .adminchip{font-size:.62rem;padding:.16rem .42rem;border-width:1px}
  html body.dark main{padding:.35rem .45rem 3.6rem}
  /* number tiles two to a row instead of one per screen height */
  html body.dark .card[style*="flex:1 1"]{flex-basis:140px !important;margin:0}
  html body.dark div[style*="flex-wrap:wrap"]:has(> .card[style*="flex:1 1"]){gap:.4rem !important;margin-bottom:.45rem}
  html body.dark .kpirow{grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}
  /* public pages: the menu in two short rows instead of four tall ones */
  html body:not(.dark) nav.pubnav{gap:.3rem}
  html body:not(.dark) nav.pubnav .btn{font-size:.72rem;padding:.38rem .7rem;min-height:34px}
  html body:not(.dark) nav.pubnav .btn.navkey{padding-left:.8rem;padding-right:.8rem}
  html body:not(.dark) .topstrip{font-size:.64rem;padding-top:.2rem;padding-bottom:.2rem;line-height:1.5}
  html body:not(.dark) header{padding:.45rem .7rem .5rem}
  html body:not(.dark) header h1{font-size:1.45rem}
  html body:not(.dark) main{padding-top:.6rem}
  html body.dark .card{padding:.55rem .6rem;margin:0 0 .45rem;border-radius:12px}
  html body.dark .card h2,html body.dark main h2{font-size:1rem;margin:.1rem 0 .35rem}
  html body.dark .card h3{font-size:.9rem;margin:.1rem 0 .3rem}
  body.dark main p{margin:.3rem 0}
  html body.dark .btn,html body.dark button.btn{padding:.3rem .65rem;font-size:.68rem;letter-spacing:.03em;min-height:34px}
  body.dark .advline{display:none}
  body.dark .datebar{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:.2rem 0 .35rem}
  body.dark .datebar>.btn:first-child{order:1}
  body.dark .datebar .caldate{order:2;flex:1 1 65% !important;min-width:0}
  body.dark .datebar .viewsw{order:3;font-size:.8rem;margin-right:auto}
  body.dark .datebar>.btn:not(:first-child){order:4}
  html body.dark .datebar .btn{min-height:32px}
  body.dark .callabel{font-size:.88rem}
  body.dark .calarrow{padding:.25rem .55rem}
  body.dark input,body.dark select,body.dark textarea{padding:.4rem .5rem}
  body.dark label{margin:.2rem 0}
  body.dark table td,body.dark table th{padding:.3rem .35rem}
}

.calwrap{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.cal{display:flex;min-width:max-content;position:relative}
.gutter{position:sticky;left:0;z-index:3;background:var(--surface);width:52px;flex:0 0 52px;
  border-right:1px solid var(--line)}
.colhead{height:38px;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  background:var(--surface2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;
  font-weight:600;padding:0 .4rem;text-align:center}
.col{flex:1 1 0;min-width:158px;border-right:1px solid var(--line);position:relative}
.col:last-child{border-right:0}
/* on a phone every court fits on screen at once: narrower columns and a
   smaller gutter beat sideways scrolling nobody discovers (Hans, M403) */
@media (max-width:640px){
  .col{min-width:84px}
  .gutter{width:40px;flex:0 0 40px}
  .colhead{font-size:.6rem;letter-spacing:.02em;padding:0 .15rem}
  .ev{font-size:.66rem}
  .ev .t{font-size:.6rem}
}
/* closed time is striped, open time sits flat on top of it. The old
   version separated them by two near-identical background tones, which is
   why a fully closed Saturday looked like an empty bookable day. */
.body{position:relative;background:repeating-linear-gradient(135deg,
  var(--bg) 0 8px,rgba(125,125,125,.10) 8px 11px)}
.gutter .body{background:var(--surface)}
.open{position:absolute;left:0;right:0;background:var(--surface)}
.closedtag{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  z-index:1;pointer-events:none;font-size:.66rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  background:var(--surface2);border:1px solid var(--line);
  border-radius:999px;padding:.18rem .6rem;white-space:nowrap}
.hline{position:absolute;left:0;right:0;border-top:1px solid var(--line-soft)}
.hline.half{border-top:1px dotted var(--line-soft)}
.tick{position:absolute;right:6px;font-size:.68rem;color:var(--muted);line-height:1}
/* Above the click catcher, or every tap lands on the empty space layer
   underneath and a booking can never be opened or dragged. The catcher is
   z-index 1, so anything meant to be clickable has to sit higher. */
.ev{position:absolute;left:3px;right:3px;border-radius:6px;padding:.25rem .35rem;
  font-size:.72rem;line-height:1.25;overflow:hidden;text-decoration:none;display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.12);z-index:2;touch-action:none;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;cursor:grab}
.ev:active{cursor:grabbing}
.ev:hover{box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* one event across several courts. A dashed edge on the same side of every
   card reads as one thing spanning them, without needing the cards to
   physically touch. */
.ev.grouped{border-top:2px dashed var(--muted-dim);
  border-bottom:2px dashed var(--muted-dim)}
/* the courts an event spills onto: same colour, no repeated title, so three
   courts read as one booking rather than three coincidences */
.ev.hold{opacity:.72;border-left:0}
.ev .cont{display:block;font-size:.62rem;opacity:.8;font-style:italic}
.ev.grouphit{outline:2px solid #EDC04F;outline-offset:1px}
.ev .grp{display:inline-block;margin-left:.25rem;padding:0 .25rem;
  border-radius:4px;background:var(--line);font-size:.6rem;
  letter-spacing:.03em}
.ev b{display:block;font-weight:600;font-size:.72rem}
/* M738: its own line. These marks are appended before it and ran
   straight into the time, so a hidden session read "not public14:00 to
   16:00". A block is also what the line always wanted to be. */
.ev .t{opacity:.85;font-size:.66rem;display:block}
/* M739. WHAT A CARD DROPS WHEN THERE IS NO ROOM.
   Hans, on a two hour card on a phone: the text ran out of the box and
   printed over the line below. A card cannot hold a title, a repeat
   pill, times, sport, courts, audience, coach and two money figures at
   that width, and shrinking the type again only moves the point at
   which it breaks.
   So it drops, in the order he chose: the money and the coach. Both are
   knowable in one tap, and neither is what somebody standing at the
   desk is reading the calendar FOR. Title, time, sport and audience
   stay, because those are the question the grid exists to answer. */
@media (max-width:760px){
  .ev .calmoney,.ev .evmem,.ev .evsport{display:none}
  .ev{overflow:hidden;padding:.2rem .3rem}
  .ev b{font-size:.68rem;line-height:1.15}
  .ev .evrep{font-size:.55rem;padding:0 .2rem}
}
/* M740. The Staff page lists everybody who ever had a login, in one
   run, ordered active first. Hans: "then make a separation line and put
   all disabled names at the bottom beneath it". Nobody is deleted here
   on purpose, because a staff row is what says who recorded a payment
   and who opened a contract, so the list only grows. A line is what
   turns it back into two lists: who works here, and who used to. */
tr.staffsplit td{padding:1.1rem 0 .35rem;border:0;border-top:2px solid
  var(--line,#ddd);color:#777;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700}
tr.staffsplit + tr td,tr.staffsplit ~ tr td{opacity:.72}
.ev .evaud{font-weight:600;opacity:1;text-transform:uppercase;letter-spacing:.02em}
.ev .evrep{font-size:.62rem;font-weight:700;background:rgba(255,255,255,.28);border-radius:8px;padding:0 .3rem;vertical-align:1px}
.ev .evcoach{display:block;font-weight:700;font-size:.66rem;opacity:1}
.ev .faces{display:flex;flex-wrap:wrap;gap:2px;margin-top:3px}
.ev .faces .av{width:18px;height:18px;font-size:9px;border:1px solid rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ev .faces .av.more{background:rgba(255,255,255,.35);color:inherit;font-weight:700}
/* an hour or less: the faces sit top-right, the text keeps clear of them.
   Below the title there is no third row on a 54px card (M507) */
.ev.tight{padding-right:min(55%,calc(.35rem + var(--fw,0px)))}
.ev.tight .faces{position:absolute;top:3px;right:4px;margin:0;flex-wrap:nowrap;
  max-width:55%;overflow:hidden;justify-content:flex-end}
/* what the session is owed and what it has taken, pinned to the bottom of
   the card so the day reads as money without opening anything (Hans, M465) */
.fieldpair{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;
  grid-column:1/-1}
.fieldpair > label{margin:0;display:flex;flex-direction:column;gap:.3rem;
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.fieldpair > label.chk{flex-direction:row;align-items:center;gap:.5rem;
  text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--text)}
/* M861 (Hans, 29 Sep: "text is badly overlapping"): the money line follows
   the text instead of sitting on top of it at the card's bottom edge; a card
   too short for it cuts it off rather than printing it over the members */
.ev .calmoney{display:block;position:static;margin-top:2px;
  font-size:.62rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ev .evcap{font-weight:700;white-space:nowrap}
.ev .evcap.full{text-decoration:underline}
.ev .evmem{display:block;font-size:.62rem;opacity:.9;margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ev.short .evmem{display:none}
.ev .calmoneyshort{opacity:.95}
.ev .calmoneyfull{opacity:.85}
.ev .calmoneyfull::before{content:"¹3 "}
.ev.short .calmoney{display:none}
.ev.blocked{background-image:repeating-linear-gradient(45deg,
  var(--line) 0 6px,transparent 6px 12px)}
.nowline{position:absolute;left:0;right:0;border-top:2px solid var(--live);z-index:4}
.nowline:after{content:'';position:absolute;left:0;top:-4px;width:6px;height:6px;
  border-radius:50%;background:var(--live)}
.legend{display:flex;gap:.5rem;flex-wrap:wrap;margin:.7rem 0 0}
.legend span{font-size:.7rem;padding:.15rem .5rem;border-radius:999px}
.clickcatch{position:absolute;inset:0;z-index:1;cursor:crosshair}
/* the half hour the pointer is over, with a plus, so an empty court reads as
   somewhere you can add something rather than dead space */
.ghost{position:absolute;left:3px;right:3px;height:0;z-index:1;display:none;
  border:1px dashed var(--line-strong,#8aa);border-radius:6px;
  background:rgba(30,143,90,.10);pointer-events:none;
  align-items:center;justify-content:center;color:var(--muted);font-size:1rem}
.col:hover .ghost,.col.drop .ghost{display:flex}
.col.drop .ghost.dropzone{background:rgba(30,143,90,.28);border:2px dashed #1E8F5A;
  color:transparent;pointer-events:none}
/* a panel over the calendar rather than a jump to the bottom of the page.
   On a desk monitor the sheet uses the width it is given, so the booking
   popup reads in two eyefuls instead of a scroll */
.modal{position:fixed;inset:0;z-index:50;display:none;
  background:rgba(0,0,0,.45);overflow:auto;padding:1.1rem 1rem}
.modal.open{display:block}
.modal .sheet{max-width:44rem;margin:0 auto;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;
  box-shadow:0 12px 40px rgba(0,0,0,.35)}
@media(min-width:1100px){
  .modal .sheet{max-width:74rem;padding:1rem 1.4rem}
  .modal .sheet p.muted{margin:.25rem 0}
  .modal .sheet .formgrid{gap:.45rem .9rem}
  .modal .sheet .whocard .deskrow{padding:.4rem .6rem;margin:.3rem 0}
}
/* M630. A wide monitor was showing a 74rem sheet with empty desk either
   side while the seat list scrolled for a page and a half. The sheet takes
   the width the screen has. */
@media(min-width:1500px){.modal .sheet{max-width:92rem}}
/* The calendar's own event popup is different from a real form modal: a
   click on the backdrop here almost always means "I meant to click a
   different event underneath", not "dismiss this and look at the empty
   calendar". Letting the click reach the calendar grid, rather than only
   ever closing the popup, is what makes a second event openable in one
   click instead of two. The explicit close button and Escape still work,
   this only changes what an accidental or intentional click-through does. */
#focusmodal{pointer-events:none}
/* M627. The backdrop ignores the mouse so a click reaches the event
   underneath, but the scrollbar belonged to that same backdrop, and an
   element with pointer events off cannot be scrolled or grabbed. So a
   popup with more in it than fits could not be scrolled at all. The sheet
   keeps the mouse and now does its own scrolling. */
#focusmodal .sheet{pointer-events:auto}
/* M628: the height cap and the scrolling are for NARROW screens only. A
   monitor scrolls the backdrop, which is what the modal has always done. */
@media(max-width:1099px){
  #focusmodal .sheet{max-height:calc(100vh - 2.2rem);overflow-y:auto;
    overscroll-behavior:contain}
  /* M733. 100vh IS NOT WHAT YOU CAN SEE ON A PHONE.
     Hans, on a booking popup: "the scroll bar while being in booking
     popup still not working".
     The backdrop cannot scroll, on purpose: M627 gave it
     pointer-events:none so a click reaches the event underneath, and an
     element the pointer cannot reach cannot be dragged either. All the
     scrolling therefore has to happen inside the sheet, and the sheet
     only scrolls when its content is taller than this cap.
     On mobile browsers 100vh is the LARGE viewport: the height the page
     would have if the address bar were hidden. The address bar is not
     hidden, so the cap can be sixty to a hundred pixels TALLER than the
     screen. A popup whose content lands in that gap is too tall to fit
     and too short to trigger its own scrollbar, so nothing scrolls at
     all and the bottom of it simply cannot be reached. Bigger popups
     scrolled, which is why this looked intermittent.
     dvh is the viewport as it actually is at this moment. */
  @supports (height: 100dvh){
    #focusmodal .sheet{max-height:calc(100dvh - 2.2rem)}}}
/* M630. The popup used to sit in two balanced columns on a monitor. It
   read tidily and cost a page of scrolling. The edit form is one
   unbreakable block, so it took a 556px column on its own and wrapped
   every field onto a line of its own; the other column stood empty above
   the fold; and the seat list ran on underneath in the same narrow half,
   1225px of form and 139px per seat. Full width the same form is 741px,
   its fields pack four to a row, and a seat is 81px. On a 1400px screen
   the whole popup went from 6284px to 4018. The columns are gone. What
   replaces them is the width itself, here and in WHOCARD_CSS, which is
   what Hans asked for: reduce the number of lines by using the width. */
@media(min-width:1100px){
  #focusmodal .sheet>.card,#focusmodal .sheet>.blink{width:100%}
}
.modal .sheet .card{border:0;padding:0;margin:0 0 .8rem;background:none;
  box-shadow:none}
.modalhead{display:flex;justify-content:space-between;align-items:center;
  gap:.6rem;margin:0 0 .6rem}
.modalhead h2{margin:0;font-size:1.1rem}
.xbtn{border:0;background:none;font-size:1.4rem;line-height:1;cursor:pointer;
  color:var(--muted);padding:0 .3rem}
@media (max-width:640px){.modal{padding:.6rem}.modal .sheet{padding:.8rem}}
.formgrid{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:0 0 .6rem}
.formgrid label{display:flex;flex-direction:column;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.formgrid label.chk{flex-direction:row;align-items:center;gap:.4rem;
  text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--text)}
.formgrid input,.formgrid select{margin-top:.15rem}
.courtpick{border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem;
  margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:center}
.courtpick legend{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.courtpick label.chk{display:flex;align-items:center;gap:.35rem}

.whostrip{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--muted);text-decoration:none;margin-top:.15rem}
a.whostrip:hover{text-decoration:underline}
.whostrip .avs{display:inline-flex;flex:none}
.whostrip .avs .av{margin-right:-6px;border:1.5px solid var(--surface)}
.whostrip .avs .av:last-child{margin-right:2px}
.sesrow .whostrip{display:flex;margin-top:.1rem}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  object-fit:cover;font-weight:600;letter-spacing:.02em;flex:none;
  border:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.5rem 0 0}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .6rem .25rem .25rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface2);
  color:var(--text);text-decoration:none;font-size:.92rem;line-height:1.1}
a.chip:hover{border-color:var(--green2);background:var(--raised)}
.chip em{font-style:normal;color:var(--muted);font-size:.82rem}
.chip.waiting{opacity:.72}
.pill.house{background:var(--sand);color:var(--on-sand);font-size:.68rem;padding:.1rem .4rem}
.whohead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:.9rem 0 .1rem}
.whohead h3{margin:0;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.prof{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.prof .av{border:2px solid var(--line)}
.prof h2{margin:0 0 .15rem}
.statrow{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 0}
.statbox{flex:1 1 7rem;background:var(--surface2);border:1px solid var(--line);
  border-radius:10px;padding:.6rem .7rem}
.statbox b{display:block;font-family:'Bebas Neue',Impact,sans-serif;font-size:1.5rem;
  line-height:1;color:var(--green2)}
.statbox span{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted)}
/* a figure's working, folded under 'how' (M429): the formula in words and
   the parts that add up to it, each a door to its rows */
.how{display:block;font-size:.72rem;margin-top:.3rem}
.how summary{cursor:pointer;color:var(--muted);text-transform:uppercase;
  letter-spacing:.07em;list-style:none;display:inline-block}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:"? "}
.how[open] summary{color:var(--green2)}
.howbody{margin-top:.35rem;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:.5rem .65rem;font-size:.8rem;text-transform:none;
  letter-spacing:0;color:var(--text);line-height:1.35}
.howbody p{margin:0 0 .35rem}
.howbody ul{list-style:none;margin:0;padding:0}
.howbody li{display:flex;justify-content:space-between;gap:.8rem;padding:.12rem 0;
  border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.howbody li:last-child{border-bottom:0}
td .how,p .how{display:inline-block;margin-left:.4rem}
/* M701. The number itself is the control. A statbox that carries a
   working gets a quiet underline on its figure and opens on a click
   anywhere on the box, because a fold labelled "how" is a thing nobody
   opens sitting under a number everybody reads. */
.figq{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);background:none;border:0;padding:.15rem 0 0;
  cursor:pointer;display:block}
.figq::before{content:"? "}
.figq:hover{color:var(--green2)}
.statbox:has(.figq){cursor:pointer;position:relative}
.statbox:has(.figq):hover{border-color:var(--green2)}
.statbox:has(.figq) b{text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:.18em;text-decoration-color:var(--line)}
#xpw{position:fixed;inset:0;background:rgba(7,59,37,.86);display:none;
  z-index:9500;align-items:flex-start;justify-content:center;
  padding:3rem 1rem 1rem;overflow:auto}
#xpw.on{display:flex}
#xpb{background:var(--surface);color:var(--text);border-radius:12px;
  max-width:52rem;width:100%;padding:1.2rem 1.3rem 1.4rem;
  box-shadow:0 10px 50px rgba(0,0,0,.45);position:relative}
#xpx{position:absolute;top:.4rem;right:.6rem;font-size:1.7rem;line-height:1;
  background:none;border:0;color:var(--muted);cursor:pointer;padding:.1rem .4rem}
#xpx:hover{color:var(--text)}
.photopick{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.photopick img{border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.histlist{list-style:none;padding:0;margin:.4rem 0 0}
.histlist li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;
  border-bottom:1px solid var(--line-soft);font-size:.94rem}
.histlist li:last-child{border-bottom:0}
.histlist span{color:var(--muted);white-space:nowrap}
details.adder{margin:.7rem 0 0;border-top:1px solid var(--line-soft);padding:.6rem 0 0}
details.adder summary{cursor:pointer;color:var(--green2);font-size:.9rem;
  letter-spacing:.04em}
details.adder form{margin:.2rem 0 0}
details.adder .phonerow{display:inline-flex;vertical-align:middle}
.pform{display:grid;gap:.9rem;max-width:460px}
.pform label{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pform input,.pform select,.pform textarea{font-size:1rem;padding:.55rem .6rem;
  font-family:inherit}
.pform textarea{resize:vertical;line-height:1.45}
.pform button{justify-self:start;padding:.6rem 1.4rem}
.pform label.chk{flex-direction:row;align-items:center;gap:.5rem;text-transform:none;
  letter-spacing:0;font-size:.95rem;color:var(--text)}
.pform input[type=file]{padding:.4rem 0;font-size:.9rem;color:var(--muted)}
.newhere{margin:.9rem 0 0;color:var(--muted)}
.evwho{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 0;text-decoration:none;
  color:var(--muted);font-size:.86rem}
.evwho:hover{color:var(--green2)}
.evwho .avs{display:flex;flex:none}
.evwho .avs .av{margin-right:-8px;border:2px solid var(--surface)}
.evwho .avs .av:last-child{margin-right:0}
.addany{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;margin:.6rem 0 0}
.addany label{display:flex;flex-direction:column;gap:.25rem;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.addany label.chk{flex-direction:row;align-items:center;gap:.4rem;text-transform:none;
  letter-spacing:0;font-size:.9rem;color:var(--text);padding-bottom:.5rem}
.addany select{max-width:22rem}

.hub{max-width:520px;margin:0 auto}
.hubhero{text-align:center;padding:2.6rem 0 1.8rem}
.hubhero img{display:block;margin:0 auto .7rem}
.hubhero h1{font-family:'Bebas Neue',Impact,sans-serif;font-size:2.6rem;line-height:.95;
  letter-spacing:.02em;margin:0 0 .4rem;color:var(--text)}
body.dark .hubhero h1{font-family:'Bebas Neue',Impact,sans-serif;font-size:2.6rem;line-height:.95;
  letter-spacing:.02em;margin:0 0 .4rem;color:var(--beige)}
.hubhero h1 em{display:block;font-style:normal;color:var(--green2)}
.hubhero p{margin:0;color:var(--muted);font-size:.98rem}
.hublinks{display:grid;gap:.6rem;margin:0 0 1.6rem}
.hublink{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  color:var(--text);text-decoration:none;transition:transform .08s ease}
.hublink:hover{border-color:var(--green2);background:var(--surface2)}
.hublink:active{transform:scale(.99)}
.hublink .he{font-size:1.4rem;line-height:1;flex:none;width:1.6rem;text-align:center}
.hublink .ht{min-width:0}
.hublink b{display:block;font-weight:600;font-size:1.02rem;letter-spacing:.01em;
  font-family:'Bebas Neue',Impact,sans-serif;font-size:1.35rem;letter-spacing:.03em;
  line-height:1.05}
.hublink .ht span{display:block;color:var(--muted);font-size:.85rem;margin-top:.15rem;
  font-weight:400}
.hublink .arr{margin-left:auto;color:var(--muted-dim);flex:none}
.hublink.primary{background:var(--green2);border-color:var(--green2);color:var(--on-accent)}
.hublink.primary span,.hublink.primary .arr{color:var(--green)}
.hublink.primary:hover{background:var(--green);border-color:var(--green)}
body.dark .hublink.primary:hover{background:var(--beige);border-color:var(--beige)}
.hublink.quiet{background:transparent;border-style:dashed}
.linkform{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  padding:.2rem 0 .5rem}
.linkform .emo{width:3.2rem;text-align:center;flex:none}
.linkform input[name=label]{flex:1 1 11rem;min-width:7rem}
.linkform input[name=sub]{flex:1 1 13rem;min-width:7rem}
.linkform input[name=url]{flex:1 1 100%;font-size:.88rem;color:var(--muted)}
.linkform select{flex:0 0 8.5rem}
.linkform label.chk{flex:none;margin:0 .2rem;white-space:nowrap}
.linkform button{flex:none}
.hubfoot{text-align:center;color:var(--muted-dim);font-size:.82rem;padding:0 0 2rem}
.hubfoot a{color:var(--muted)}
.wknav{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin:0 0 1rem;flex-wrap:wrap}
.wknav h2{margin:0;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.wk{display:grid;gap:.7rem}
.wkday{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden}
.wkday>h3{margin:0;padding:.6rem .95rem;background:var(--surface2);
  border-bottom:1px solid var(--line);font-size:.8rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;
  gap:1rem}
.wkday>h3 b{color:var(--text);font-weight:600}
.wkday.today>h3{background:var(--raised);color:var(--green2)}
.wkrow{display:flex;align-items:center;gap:.9rem;padding:.65rem .95rem;
  border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--text)}
.wkrow:last-child{border-bottom:0}
.wkrow:hover{background:var(--surface2)}
.wktime{flex:none;width:5.2rem;font-variant-numeric:tabular-nums;color:var(--muted);
  font-size:.9rem}
.wkmain{flex:1;min-width:0}
.wkmain b{display:block;font-weight:600;font-size:.98rem}
.wkmain span{display:block;color:var(--muted);font-size:.82rem;margin-top:.05rem}
.wkstate{flex:none;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted)}
.wkstate.ok{color:var(--pill-ok)}
.wkstate.off{color:var(--danger)}
.wkclosed{padding:.9rem .95rem;color:var(--muted-dim);font-size:.92rem}
@media(max-width:560px){
  .wktime{width:4.4rem;font-size:.84rem}
  .wkrow{gap:.6rem;padding:.6rem .75rem}
}

.sched{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:1.8rem 1.6rem 1.4rem;margin:0 0 1.2rem}
.schedhead{text-align:center;margin:0 0 1.6rem}
.schedhead img{display:block;margin:0 auto .5rem}
.schednote{margin:.45rem auto 0;max-width:30rem;font-size:.72rem;
  line-height:1.45;color:var(--muted);letter-spacing:.01em}
.schedhead .eyebrow{margin:0 0 .1rem;font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--green2)}
.schedhead h2{margin:0;font-family:'Bebas Neue',Impact,sans-serif;font-size:2.4rem;
  letter-spacing:.06em;line-height:1;color:var(--text)}
body.dark .schedhead h2{margin:0;font-family:'Bebas Neue',Impact,sans-serif;font-size:2.4rem;
  letter-spacing:.06em;line-height:1;color:var(--beige)}
/* M564. The week view leads and can be put away. Which word the switch
   shows is decided by the element's own open state, in CSS, so the label
   and the panel can never disagree. */
.weekfold > summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:.4rem}
.weekfold > summary::-webkit-details-marker{display:none}
.weekfold > summary .wkhide{display:none}
.weekfold[open] > summary .wkhide{display:inline}
.weekfold[open] > summary .wkshow{display:none}
/* M674. One row: title, range, week links, the switch. */
.weekfold > summary.wkbar{display:flex;align-items:baseline;flex-wrap:wrap;
  gap:.2rem .8rem;width:100%;padding:.1rem 0;border-bottom:1px solid var(--line)}
.wkbar .wkttl{font-family:'Bebas Neue',Impact,sans-serif;font-size:1.6rem;
  letter-spacing:.06em;line-height:1.1}
.wkbar .wkrange{font-size:.82rem}
.wkbar .wkctl{margin-left:auto;display:flex;gap:.9rem;align-items:baseline;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.wkbar .wklink,.wkbar .wkflip{color:var(--green2);text-decoration:none;white-space:nowrap}
.wkbar .wkflip{color:var(--muted)}
.wkbar .wklink:hover,.wkbar .wkflip:hover{text-decoration:underline}
@media (max-width:520px){.wkbar .wkctl{margin-left:0;width:100%;justify-content:space-between}}
.schedcols{column-count:2;column-gap:2.4rem}
.schedday{break-inside:avoid;margin:0 0 1.1rem}
.schedhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:.6rem;margin:.4rem 0 0;flex-wrap:wrap}
.schedday h3{margin:0 0 .5rem;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green2);border-bottom:1px solid var(--line);
  padding-bottom:.35rem;display:flex;justify-content:space-between;align-items:baseline}
.schedday h3 b{color:var(--muted-dim);font-weight:400;letter-spacing:.06em;
  font-size:.72rem}
.schedday.today h3{color:var(--green2);border-bottom-color:var(--green2)}
.schedday.past{opacity:.45}
.sesrow{display:block;text-decoration:none;color:var(--text);padding:.3rem 0 .45rem;
  border-radius:6px}
.sesrow:hover{background:var(--surface2);box-shadow:0 0 0 .5rem var(--surface2)}
.sesrow.far{opacity:.5;pointer-events:none}
.sestime{display:block;font-size:.72rem;color:var(--muted);letter-spacing:.03em}
.sesname{display:block;font-weight:600;font-size:.95rem;line-height:1.25}
.sesaud{color:var(--green2);font-weight:600}
body.dark .sesaud{color:var(--sand)}
.sescoach{font-weight:400;color:var(--green2)}
.sesmeta{display:block;font-size:.72rem;color:var(--muted-dim);margin-top:.05rem}
.sesleft{color:var(--pill-ok)}
.sesfull{color:var(--danger)}
.schednone{color:var(--muted-dim);font-size:.82rem;margin:0 0 1.1rem}
.schedlegend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:.4rem 0 0;
  padding-top:1rem;border-top:1px solid var(--line-soft)}
.schedlegend span{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;
  color:var(--muted)}
.schedlegend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.schedfoot{text-align:center;margin:1.2rem 0 0;padding-top:1rem;
  border-top:1px solid var(--line-soft);font-size:.72rem;color:var(--muted-dim)}
.schedfoot a{color:var(--green2);text-decoration:none}
.minecard .schedday:last-child{margin-bottom:0}
.mineacts{display:flex;flex-wrap:wrap;gap:.4rem;margin:.15rem 0 .9rem}
.mineacts .btn{font-size:.78rem;padding:.3rem .7rem}
.minerow{border-bottom:1px solid var(--line-soft)}
.minerow:last-child{border-bottom:0}
.sesrow .pill{margin-left:.35rem;vertical-align:.05rem}
body.dark .schedfoot a{color:var(--sand)}
@media(max-width:720px){
  .sched{padding:1.4rem 1.1rem 1.1rem}
  .schedcols{column-count:1}
  .schedhead h2{font-size:2rem}
}

.anngrid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.annblock{display:flex;flex-direction:column;gap:.25rem}
.anntext{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.35;resize:none;background:var(--surface2);
  overflow:hidden;field-sizing:content;touch-action:pan-y}

.cmore summary .cread{color:var(--green2);font-weight:700;text-decoration:none;
  border-bottom:1.5px solid var(--green2);white-space:nowrap}
body.dark .cmore summary .cread{color:var(--sand);border-bottom-color:var(--sand)}
.cmore summary:hover .cread{background:var(--surface2)}
.cmore summary{cursor:pointer;list-style:none}
/* Hans: the bio read terribly on a phone. It used to be a flex child of
   .whohead, squeezed into a third of the width beside the photo and the
   price. It is its own full width block now, with a real measure and
   real leading. */
.cbio{max-width:62ch;margin:.35rem 0 .5rem}
.cbio p{margin:.55rem 0;line-height:1.62}
.cbio p:first-child{margin-top:.2rem}
.chead{display:flex;gap:12px;align-items:center;margin:0 0 .35rem}
.cid{min-width:0}
.cid h2{margin:0;font-size:1.05rem;line-height:1.25;overflow-wrap:anywhere}
.cid .crole{font-size:.8rem;font-weight:400;color:var(--muted)}
.cprice{display:block;font-size:.78rem;color:var(--muted);margin:.1rem 0 0}
.clist .card{margin-bottom:.7rem}
.cfree{font-weight:700;color:var(--pill-ok)}
.cnone{color:var(--muted-dim)}
.coff{opacity:.72}
.cwhen{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0 0}
.csplit{margin:1.2rem 0 .4rem;padding-top:.8rem;border-top:1px solid var(--line-soft);
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media(max-width:620px){
  .cbio{max-width:none}
  .cbio p{font-size:.94rem;line-height:1.65}
  .cwhen .btn{width:100%;text-align:center}
}

.gjoin{max-width:36rem}
.gjoin .btn{width:100%;text-align:center;margin-top:.6rem}
.glink{display:block;word-break:break-all;margin:.2rem 0;font-weight:700}
.gdone{border:1px solid var(--green2);border-radius:12px;padding:1rem;
  background:var(--surface2);margin:0 0 .7rem}
.gpick{display:block;border:1px solid var(--line);border-radius:10px;
  padding:.6rem .7rem;margin:.35rem 0;background:var(--surface2);
  cursor:pointer}
.gpick:hover{border-color:var(--green2)}
.gpick input{margin-right:.5rem}
.gpick .gname{font-weight:700}
.gpick .gwhy{display:block;font-size:.8rem;opacity:.75;margin-left:1.4rem}
.gmain{font-size:.85rem;opacity:.8;margin:.2rem 0 .7rem}

.langrow{display:flex;gap:.5rem;align-items:center;justify-content:center;
  margin:.6rem 0 0;font-size:.8rem}
.langrow a,.langrow strong{padding:.15rem .5rem;border-radius:999px;
  text-decoration:none}
.langrow a{color:var(--muted);border:1px solid var(--line)}
.langrow a:hover{border-color:var(--green2);color:var(--text)}
.langrow strong{background:var(--green2);color:#fff;font-weight:700}

/* M570: less scrolling. Tighter everywhere, wider on staff screens. */
p{margin:.35rem 0 .65rem}
main{padding:.9rem .9rem 3.5rem}
.card{padding:.75rem .9rem;margin:0 0 .7rem}
h1{font-size:2.1rem}h2{font-size:1.5rem;margin-top:1rem}h3{font-size:1.15rem}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.btn{padding:.48rem .95rem}
.warn{padding:.55rem .85rem;margin:0 0 .7rem}
th,td{padding:.32rem .45rem}
input,select,textarea{padding:.32rem .45rem}
ul,ol{margin:.3rem 0 .6rem;padding-left:1.3rem}
details{margin:.2rem 0}
details.introfold>summary{font-size:.82rem}
details.introfold>p{margin-top:.4rem}
@media(min-width:1200px){
  body.dark main,body.dark header .wrap{max-width:1320px}
}
/* staff screens: the marketing top strip and the tall page title are
   forty pixels of scrolling on every page, on a screen reception looks at
   all day */
body.dark .topstrip{display:none}
body.dark header{padding:.5rem 1rem .5rem}
body.dark .brandbar{margin:0 0 .3rem}
body.dark header h1{font-size:1.5rem;margin:0}
body.dark .anavbar{margin-bottom:.6rem}
.spotnote{position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);
  z-index:500;max-width:min(92vw,40rem);background:var(--sand);
  color:var(--on-sand,#3D3208);padding:.55rem .9rem;border-radius:10px;
  font-weight:600;font-size:.88rem;line-height:1.35;
  box-shadow:0 6px 24px rgba(0,0,0,.28);cursor:pointer;transition:opacity .6s}
.spotnote.gone{opacity:0}
.spotnote.err{background:#F08A80;color:#3D0D0A}
.onesave{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end;
  margin:.2rem 0 .5rem}
.onesave label.fld{display:flex;flex-direction:column;gap:.15rem;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted)}
.onesave label.fld>input,.onesave label.fld>select{font-size:.9rem;
  text-transform:none;letter-spacing:0}
.onesave .ticks{display:flex;flex-wrap:wrap;gap:.3rem 1rem;flex-basis:100%}
.onesave .about{flex-basis:100%}
.onesave .about textarea{width:100%;margin-top:.15rem}
.onesave .saverow{flex-basis:100%;display:flex;gap:.6rem;align-items:center;
  flex-wrap:wrap}

.fdhero{position:relative;margin:-.9rem -.9rem 1rem;min-height:min(70vh,576px);
  display:flex;align-items:flex-end;background:var(--green);color:#FFF5EB;
  overflow:hidden;border-radius:0 0 18px 18px}
.fdhero video,.fdhero img.fdbg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 72%;opacity:.92}
/* M668, Hans: "cut the top 10% of the picture, it reduces scrolling and the
   roof part is not needed": the hero is a tenth shorter (was 78vh / 640px)
   and the picture sits lower in its frame, so what is cropped is the roof */
.fdhero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,59,37,.05) 0%,rgba(7,59,37,.55) 55%,rgba(7,59,37,.88) 100%)}
.fdtext{position:relative;z-index:1;padding:2.2rem 1.2rem 1.6rem;max-width:56rem}
.fdeyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sand);font-weight:700;margin:0 0 .5rem}
.fdtext h1{font-size:clamp(2.6rem,7vw,4.8rem);line-height:.98;margin:0 0 .8rem;
  color:#FFF5EB;text-wrap:balance}
.fdproof{font-size:1.05rem;font-weight:600;margin:0 0 .3rem;color:#FFF5EB}
.fdfacts{font-size:.9rem;margin:0 0 1rem;color:rgba(255,245,235,.85)}
.fdact{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.fdvtoggle{position:absolute;right:.9rem;bottom:.9rem;z-index:3;width:2.2rem;height:2.2rem;border-radius:50%;
  border:1px solid rgba(255,245,235,.55);background:rgba(7,59,37,.55);color:#FFF5EB;font-size:.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.fdvtoggle:hover{background:rgba(7,59,37,.85)}
.fdact .fdprice{font-size:.85rem;color:rgba(255,245,235,.9)}
.btn.sand,.topchip{background:#EDC04F;border-color:#EDC04F;color:#073B25}
.btn.sand:hover,.topchip:hover{filter:brightness(1.06)}
.fdact a.fdsee{color:#FFF5EB;text-decoration:underline;font-size:.9rem}
.fdsec{margin:1.4rem 0}
.fdsec h2{margin:0 0 .6rem}
.fdsoon{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fdsoon .card{margin:0;display:flex;flex-direction:column;gap:.25rem}
.fdsoon .when{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fdsoon .ttl{font-family:'Bebas Neue','Open Sans',sans-serif;font-size:1.5rem;line-height:1.05}
.fdsoon .meta{font-size:.85rem;color:var(--muted)}
.fdsoon .act{margin-top:auto;padding-top:.4rem}
.fdthree{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fdthree a.fdcard{display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.fdthree .fdpic{aspect-ratio:4/3;background:var(--green2);
  background-size:cover;background-position:center}
.fdthree .fdbody{padding:.7rem .9rem .9rem}
.fdthree .fdbody h3{margin:0 0 .25rem;font-size:1.6rem}
.fdthree .fdbody p{margin:0 0 .5rem;font-size:.9rem}
.fdthree .fdarrow{font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green2)}
.fdyou{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fdyou .card{margin:0}
.fdyou .card p{margin:0 0 .5rem}
.fdmember{background:var(--green);color:#FFF5EB;border-radius:12px;padding:1rem 1.1rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between}
.fdmember p{margin:0;font-size:1rem}
.fdplan dl{margin:0;display:grid;gap:.4rem .8rem;grid-template-columns:max-content 1fr}
.fdplan dt{font-weight:700;font-size:.85rem}
.fdplan dd{margin:0;font-size:.92rem}
@media(max-width:520px){.fdplan dl{grid-template-columns:1fr}.fdplan dt{margin-top:.3rem}}
/* M592: the chip in the brand bar, sand on every public page. It said
   Book a court until 14 Sep and says Schedule now; the class is named
   for where it sits rather than for where it points, so the next change
   of mind is one href. */
.topchip{display:inline-block;padding:.32rem .8rem;border-radius:999px;font-size:.72rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  margin-left:auto;white-space:nowrap}
.topchip+.hgrow{display:none}
.bookfab{position:fixed;right:1rem;bottom:1rem;z-index:300;display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
/* M996: shown by m996_site's script once the hero's button has left the screen */

table.grouprate{border-collapse:collapse;width:100%;max-width:26rem;
  margin:.4rem 0 0;font-size:.9rem}
table.grouprate th,table.grouprate td{padding:.3rem .5rem;text-align:left;
  border-bottom:1px solid var(--line-soft)}
table.grouprate th{font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
table.grouprate td.num,table.grouprate th.num{text-align:right;
  font-variant-numeric:tabular-nums}
.grouprate_wrap{overflow-x:auto;margin:.4rem 0 0}
table.grouprate.grid{max-width:34rem}
table.grouprate.grid th,table.grouprate.grid td{white-space:nowrap}
table.grouprate.grid th.rowhead{font-size:.9rem;text-transform:none;
  letter-spacing:0;color:var(--text);font-weight:600}
table.grouprate.grid .sm{display:none}
@media(max-width:520px){
  /* fixed layout so five columns share the width evenly instead of each
     one claiming its longest word and pushing the last two off screen */
  table.grouprate.grid{font-size:.76rem;table-layout:fixed;width:100%}
  table.grouprate.grid th,table.grouprate.grid td{padding:.3rem .2rem}
  table.grouprate.grid th.rowhead{font-size:.82rem;width:20%}
  table.grouprate.grid .lg{display:none}
  table.grouprate.grid .sm{display:inline}
}

.evpic{margin:0 0 .6rem;border-radius:12px;overflow:hidden;
  background:var(--surface2);line-height:0}
.evpic img{width:100%;height:auto;display:block;max-height:22rem;
  object-fit:cover}
.evpic figcaption{line-height:1.35;padding:.35rem .6rem;font-size:.8rem;
  color:var(--muted);background:var(--surface2)}
.evcard .evthumb{flex:0 0 auto;width:120px;height:90px;border-radius:8px;
  overflow:hidden;background:var(--surface2)}
.evcard .evthumb img{width:100%;height:100%;object-fit:cover;display:block}
.picpick{display:flex;gap:.8rem;align-items:flex-start;flex-wrap:wrap;
  margin:.2rem 0 .3rem}
.picpick .picprev{width:160px;height:120px;object-fit:cover;border-radius:8px;
  background:var(--surface2)}
@media(max-width:620px){
  .evcard .evthumb{width:100%;height:150px}
  .evpic img{max-height:14rem}
}

.daynow{border-left:4px solid var(--green2);padding-left:.6rem;
  margin-left:-1rem}
.daynext{border-left:4px solid var(--sand);padding-left:.6rem;
  margin-left:-1rem}
/* the public week grid: a tint on the column, so the eye lands on the
   right one before it reads a single word */
.schedday.today{background:color-mix(in srgb, var(--green2) 7%, transparent);
  border-radius:10px;padding:.5rem .6rem;margin-left:-.6rem;
  margin-right:-.6rem}
.schedday.tomorrow{background:color-mix(in srgb, var(--sand) 12%, transparent);
  border-radius:10px;padding:.5rem .6rem;margin-left:-.6rem;
  margin-right:-.6rem}
.schedday.tomorrow h3{color:var(--text);border-bottom-color:var(--sand)}
.daypill{display:inline-block;vertical-align:middle;margin-left:.5rem;
  padding:.12rem .5rem;border-radius:999px;font-size:.66rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.daypill.now{background:var(--green2);color:var(--on-accent)}
.daypill.next{background:var(--sand);color:var(--on-sand)}
@media(max-width:620px){.daynow,.daynext{margin-left:0}}

.teamsm{padding:.3rem .75rem;font-size:.64rem}
.teamfold > summary{cursor:pointer;font-size:.78rem;color:var(--muted);
  list-style:none}
.teamfold > summary::-webkit-details-marker{display:none}
summary.teamwhy{display:inline-flex;align-items:center;justify-content:center;
  width:1.15rem;height:1.15rem;border:1px solid var(--line);border-radius:999px;
  font-weight:700;vertical-align:middle}
label.teamnames{display:flex;flex-direction:column;align-items:stretch;
  gap:.25rem;margin:.6rem 0 .5rem;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);text-align:left}
label.teamnames input{width:100%;box-sizing:border-box}
label.chk.onnow{background:color-mix(in srgb, var(--green2) 12%, transparent);
  border-radius:8px;padding:.15rem .55rem .2rem}
.teamone{display:inline-flex;flex-direction:column;align-items:flex-start}
label.chk.teamplays,.whocard .teamgrid label.chk.teamplays{font-size:.7rem;opacity:.75;
  margin:-.15rem 0 .35rem 1.75rem;padding:0;gap:.3rem}
label.chk.teamplays input{transform:scale(.8);margin:0}
.teamrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.1rem .8rem}
.teamrow{display:flex;flex-direction:column;align-items:flex-start;padding:.15rem 0;min-width:0}
.teamrow:has(details.teamwhen[open]){grid-column:1/-1}
details.teamwhen{margin:-.2rem 0 .3rem 1.75rem;font-size:.78rem;max-width:calc(100% - 1.75rem)}
details.teamwhen>summary{cursor:pointer;list-style:none}
details.teamwhen>summary::-webkit-details-marker{display:none}
details.teamwhen .chks{display:flex;flex-wrap:wrap;gap:.15rem .5rem;margin:.3rem 0}
details.teamwhen .teamdbtns{display:flex;gap:.3rem;flex-wrap:wrap;margin:.2rem 0}

.pophead{position:sticky;top:0;z-index:5;background:var(--surface);
  border-bottom:1px solid var(--line);margin:-.2rem -.2rem .5rem;
  padding:.55rem .2rem .5rem}
.pophead h3{margin:0;font-size:1.02rem;line-height:1.25}
.popbar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  margin-top:.45rem}
.popbar > label{display:inline-flex;align-items:center;gap:.35rem;margin:0;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted)}
.popbar select{max-width:12rem}
/* M671, Hans: "who is the coach should be visibly a bit more apparent". The
   coach is the first thing in the bar and the only one in colour: a green
   frame, the word in green and bold, the name in a larger, bold select;
   amber when nobody is set, so an uncoached session shows at a glance. */
.popbar label.popcoach{background:rgba(30,143,90,.12);border:1.5px solid var(--green2);
  border-radius:999px;padding:.25rem .45rem .25rem .8rem;color:var(--green2);font-weight:800}
.popbar label.popcoach select{font-weight:700;font-size:.95rem;border-color:var(--green2);
  background:var(--surface);color:var(--text);max-width:13rem}
.popbar label.popcoach.nobody{border-color:#EDC04F;background:rgba(237,192,79,.16);color:#8a6100}
.popbar label.popcoach.nobody select{border-color:#EDC04F}
.popact{display:inline-block}
.popact > summary{cursor:pointer;list-style:none;display:inline-block;
  background:var(--surface2);border:1px solid var(--line);border-radius:999px;
  padding:.34rem .8rem;font-size:.66rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap}
.popact > summary::-webkit-details-marker{display:none}
.popact[open] > summary{background:var(--green2);color:var(--on-accent);
  border-color:var(--green2)}
.popact.danger > summary{color:var(--danger);border-color:var(--danger-line)}
.popact.danger[open] > summary{background:var(--danger);color:#fff;
  border-color:var(--danger)}
.popactbody{border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;
  margin:.45rem 0 .2rem;background:var(--surface2)}
.popfold{border-top:1px solid var(--line-soft);padding:.1rem 0}
.popfold > summary{cursor:pointer;list-style:none;display:flex;
  align-items:baseline;gap:.5rem;padding:.5rem .1rem;font-size:.74rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.popfold > summary::-webkit-details-marker{display:none}
.popfold > summary::before{content:"\25B8";font-size:.7rem;color:var(--muted);
  transition:transform .12s}
.popfold[open] > summary::before{transform:rotate(90deg)}
.popfold > summary .foldnote{font-weight:400;letter-spacing:0;
  text-transform:none;font-size:.8rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.popfold > .foldbody{padding:.1rem .1rem .7rem}
.popwhy{display:inline-block;vertical-align:middle}
.popwhy > summary{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;justify-content:center;width:1.1rem;height:1.1rem;
  border:1px solid var(--line);border-radius:999px;font-size:.66rem;
  font-weight:700;color:var(--muted)}
.popwhy > summary::-webkit-details-marker{display:none}
.popwhy[open] > summary{background:var(--green2);color:var(--on-accent);
  border-color:var(--green2)}
.popwhy .whytext{display:block;margin:.3rem 0 .4rem;font-size:.8rem;
  color:var(--muted);line-height:1.45;max-width:46rem}
.popline{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;
  font-size:.82rem;margin:.1rem 0 .4rem}
@media(max-width:620px){
  .pophead h3{font-size:.95rem}
  .popbar select{max-width:8.5rem}
}

.cpic{position:relative;display:inline-block;flex:none;line-height:0;
  cursor:zoom-in;text-decoration:none;border-radius:50%}
.cpic .av{display:block;transition:box-shadow .15s}
.cpic:hover .av,.cpic:focus-visible .av{box-shadow:0 0 0 3px var(--green2)}
.cpicz{position:absolute;right:-3px;bottom:-3px;width:19px;height:19px;
  border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--green2);
  box-shadow:0 1px 3px rgba(0,0,0,.18);pointer-events:none}
.lbox{position:fixed;inset:0;z-index:9999;background:rgba(7,59,37,.94);
  display:flex;align-items:center;justify-content:center;padding:1rem;
  cursor:zoom-out;animation:lboxin .15s ease-out}
@keyframes lboxin{from{opacity:0}to{opacity:1}}
.lbox figure{margin:0;text-align:center;max-width:100%}
.lbox img{max-width:min(96vw,900px);max-height:86vh;width:auto;height:auto;
  border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.45);background:#fff}
.lbox figcaption{color:#FFF5EB;font-family:'Bebas Neue',Impact,sans-serif;
  font-size:1.5rem;letter-spacing:.04em;margin-top:.6rem}
.lbox .lboxx{position:absolute;top:.6rem;right:.8rem;color:#FFF5EB;
  font-size:2rem;line-height:1;background:none;border:0;cursor:pointer}

/* ---------- 1. the menu is a menu on a phone, not a wall ---------- */
.anavtoggle{display:none}
@media(max-width:700px){
  .anavbar{gap:0}
  .anavtoggle{display:flex;align-items:center;gap:.55rem;width:100%;
    min-height:44px;padding:.3rem .1rem;background:none;border:0;
    color:var(--text);font:inherit;font-size:.76rem;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;cursor:pointer;
    text-align:left}
  .anavtoggle .anavburger{font-size:1.15rem;line-height:1;opacity:.85}
  .anavtoggle .anavwhere{margin-left:auto;font-weight:400;opacity:.7;
    text-transform:none;letter-spacing:0;font-size:.8rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:55%}
  .anavtoggle .anavwarn{color:var(--sand,#EDC04F);font-weight:700}
  /* M695: the state class is anavopen and NOT open. app.py line 5817 has
     carried a generic `.open{position:absolute;left:0;right:0}` for a
     dropdown since long before this, so calling the nav's state "open"
     handed it absolute positioning: on a desktop it left its 1320px
     column, became 1900px wide against the viewport, and hung off both
     edges with the shelf labels cut in half. A state class on a shared
     element has to be named for the thing it belongs to. */
  .anavbar:not(.anavopen)>.anavtabs,
  .anavbar:not(.anavopen)>.anavrow{display:none}
  /* M764: the section pills stay visible with the menu closed. They are
     this page's own tabs, not menu, and hiding them hid "Streaming
     control" on /admin/live from every phone (Hans, 25 Sep). */
  .anavbar>.anavsec{display:flex;flex-wrap:wrap;gap:.3rem}
  .anavbar.anavopen>.anavtabs{padding-top:.35rem;
    border-top:1px solid var(--line);margin-top:.25rem}

  /* ---------- 2. a thumb needs 44px ---------- */
  .anavrow a,a.anavtab,a.anav,.anavsec a{min-height:44px;
    display:inline-flex;align-items:center}
  .btn{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center}
  .ccyrow a,.ccyrow strong{min-height:38px;display:inline-flex;
    align-items:center}
  /* a label that explains a choice must not be cut off mid-sentence.
     Written as .vrow .vwho because that is what app.py sets the ellipsis
     with, and a one-class rule simply lost to it. */
  .vrow .vwho{white-space:normal;overflow:visible;text-overflow:clip}
  /* a settings key, an email or a link is one long word to a browser and
     will hold a table open rather than wrap. break-word, not anywhere:
     ordinary words and figures still break only between them. */
  .twrap table td,.twrap table th{overflow-wrap:break-word}

  /* ---------- 3. a wide table becomes one card per row ---------- */
  /* still a box with a boundary: if one cell is stubbornly wide it
     scrolls inside itself rather than pushing the whole page out */
  .twrap.stacked{overflow-x:auto}
  table.mstack{max-width:100%}
  .twrap.stacked .tscrolltop{display:none}
  .twrap.stacked+.tscrolltop{display:none}
  table.mstack{min-width:0 !important;width:100%;font-size:.92rem;
    border-collapse:separate;border-spacing:0}
  /* the headings are not removed, they move: each one is read out
     beside its own value below, and a screen reader still finds them */
  table.mstack thead{position:absolute;width:1px;height:1px;padding:0;
    margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
    border:0}
  table.mstack tr{display:block;border:1px solid var(--line);
    border-radius:10px;background:var(--surface2);margin:0 0 .55rem;
    padding:.3rem .65rem}
  /* grid, not flex. A flex item will not shrink below the width of its
     longest word, so one long capability list or device string held a
     stacked card 1416px wide and pushed the page out sideways again. A
     grid track set to 1fr shrinks, and with min-width:0 the text inside
     it wraps instead of stretching the row. */
  table.mstack td{display:grid;grid-template-columns:38% 1fr;gap:.55rem .9rem;
    align-items:baseline;text-align:right;border:0;
    border-bottom:1px dashed var(--line);padding:.44rem 0;
    white-space:normal;min-width:0}
  table.mstack td>*{min-width:0}
  table.mstack tr td:last-child{border-bottom:0}
  table.mstack td::before{content:attr(data-l);min-width:0;
    font-size:.67rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);text-align:left;
    line-height:1.35}
  /* Two columns is a key and its value, so the heading "Key" and
     "Value" over the top says nothing a reader needs. The first cell
     becomes the line you read first and the second sits under it. */
  table.mstack.m2col td{display:block;text-align:left;padding:.2rem 0}
  table.mstack.m2col td::before{display:none}
  table.mstack.m2col td:first-child{font-weight:700;border-bottom:0;
    padding-bottom:.1rem}
  table.mstack.m2col td:last-child{color:var(--muted);font-size:.88rem}
  table.mstack td.mnolab::before{display:none}
  table.mstack td.mnolab{grid-template-columns:1fr}
  table.mstack td.mempty{display:none}
  table.mstack td{overflow-wrap:break-word}
  table.mstack td>*{max-width:100%}
  table.mstack td a,table.mstack td button,
  table.mstack td input[type=submit]{min-height:44px;
    display:inline-flex;align-items:center;justify-content:flex-end}
  table.mstack tfoot tr,table.mstack tr.total{
    background:var(--surface);border-color:var(--green2)}
  /* the heading row when the page never opened a thead: it has been read
     onto every cell below, so it has nothing left to say here */
  table.mstack tr.mhead{display:none}
  /* a band row names the section under it, so it stays a band */
  table.mstack tr.mfull{display:flex;flex-wrap:wrap;gap:.2rem .7rem;
    background:transparent;border:0;border-radius:0;margin:.7rem 0 .3rem;
    padding:0 .1rem}
  table.mstack tr.mfull td{display:inline;border:0;padding:.1rem 0;
    text-align:left;font-weight:700;font-size:.82rem;color:var(--text)}
  table.mstack tr.mfull td:first-child{letter-spacing:.05em;
    color:var(--muted)}
  table.mstack tr.mfull td::before{display:none}
}

.dunno{font-size:.78rem;color:var(--muted);border-left:3px solid #EDC04F;
  padding:.05rem 0 .05rem .5rem;margin:.2rem 0 0;line-height:1.35}
.dunno strong{color:var(--text)}

.spdbar{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
  margin:.45rem 0}
.spdbar .spdlab{font-size:.76rem;color:var(--muted);margin-right:.15rem}
.spdbar button{min-height:40px;padding:.3rem .62rem;font-size:.82rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface2);
  color:var(--text);cursor:pointer;font-weight:700;
  font-variant-numeric:tabular-nums;touch-action:manipulation}
.spdbar button.on{background:var(--brand,#1E8F5A);color:#fff;
  border-color:var(--brand,#1E8F5A)}

.pill.gold{background:var(--sand,#EDC04F);color:#073B25}

@media (max-width:640px){
  header{padding:.35rem .7rem}
  .brandbar{margin:0 !important;flex-wrap:nowrap !important;gap:.4rem !important}
  .brand img{width:24px;height:auto}
  .brandname{font-size:.78rem !important;letter-spacing:.08em !important;white-space:nowrap}
  header .v{display:none}
  .adminchip{font-size:.62rem !important;padding:.2rem .45rem !important;order:0 !important;white-space:nowrap;min-height:0 !important}
  .brandbar .brand{min-width:0;overflow:hidden}
  .brandname{overflow:hidden;text-overflow:ellipsis}
  header h1{font-size:1.25rem}
  .topstrip{padding:.25rem .5rem;font-size:.72rem}
  main{padding:.6rem .6rem 4rem}
  body.dark main{padding:.35rem .5rem 5rem}
  .card{padding:.7rem .75rem;margin:0 0 .6rem;border-radius:10px}
  .card h2,.card h3{margin:.1rem 0 .4rem}
  h2{font-size:1.15rem}
  p{margin:.35rem 0}
  .advline{display:none}
  .anavtoggle{min-height:38px !important;padding:.15rem .1rem !important}
  .anavbar{padding:.2rem .6rem !important;margin-bottom:.4rem !important}
  body.dark .btn{min-height:36px;padding:.4rem .8rem;font-size:.74rem}
  body.dark input,body.dark select,body.dark textarea{padding:.35rem .45rem}
  .signup label{margin:.25rem 0}
  #assistant .deskrow{font-size:.86rem;line-height:1.35;padding:.35rem .1rem;flex-wrap:wrap}
  #assistant .deskrow .acts{gap:.25rem;margin-top:.2rem}
  #assistant .deskrow .acts .btn{min-height:30px;padding:.25rem .6rem;font-size:.66rem}
  #assistant .deskrow input{max-width:9rem;font-size:.8rem}
  #assistant .whohead+p.muted{display:none}
  .asbadge{top:auto !important;bottom:5.2rem;right:.6rem}
  .whocard .deskrow{padding:.4rem .5rem;margin:.25rem 0}
  .pill{font-size:.64rem}
  /* the Admin directory: names in two columns, no descriptions */
  .idxgrid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:.3rem !important}
  .idxcard{padding:0 !important;margin:0 !important;border:0 !important;background:none !important}
  .idxcard .idxmain{display:block;padding:.45rem .55rem;border:1px solid var(--line);border-radius:8px;
    font-size:.82rem;line-height:1.2;min-height:0}
  .idxcard .idxmain .muted,.idxcard .idxmain br{display:none}
  .idxcard>:not(.idxmain){display:none}
  .idxhead{margin:.5rem 0 .3rem !important;font-size:.72rem}
  /* a wide table shown as cards: tighter cards */
  table.mstack{font-size:.84rem !important}
  table.mstack tr{padding:.15rem .55rem !important;margin:0 0 .4rem !important}
  table.mstack td{padding:.22rem 0 !important;gap:.3rem .6rem !important}
  table.mstack td:empty{display:none !important}
  table.mstack .btn{min-height:30px;padding:.25rem .65rem;font-size:.66rem}
  /* the calendar bar, two rows */
  .datebar{gap:.3rem;margin:0 0 .35rem}
  .datebar .caldate{flex:1 1 auto !important;justify-content:space-between;gap:.2rem}
  .datebar .callabel{font-size:.92rem;white-space:nowrap}
  body .datebar .btn{min-height:30px;padding:.28rem .6rem;font-size:.66rem;letter-spacing:.04em}
  body .datebar .calarrow{padding:.28rem .6rem}
  .datebar .viewsw{margin:0 .2rem 0 0;font-size:.85rem}
}

/* ---- M996: the public site, phone first ---------------------------------- */
/* brand colours only (green #073B25, #1E8F5A, beige #FFF5EB, sand #EDC04F,
   blue #1D4ACF, gray #464646) and tints of them; the build note lists what
   each other colour became */
body:not(.dark){--surface:#FFF5EB;--surface2:#FFF5EB;--raised:#FFF5EB;--text:#464646;--muted:#464646;
  --muted-dim:rgba(70,70,70,.78);--line:rgba(30,143,90,.2);--line-soft:rgba(30,143,90,.12);color:#464646;
  --sand:#EDC04F;--on-sand:#073B25;--pill-ok-bg:rgba(30,143,90,.12);--pill-ok:#073B25}
body:not(.dark) .fdhero strong{color:#FFF5EB}
body:not(.dark) .pp{--ink:#073B25;--gray:#464646}
body:not(.dark) .ppvid,body:not(.dark) .ppvideo,body:not(.dark) .ppvid video,body:not(.dark) .ppvid .ytwrap,
body:not(.dark) .ppvideo video{background:#073B25!important}
body:not(.dark) .ppvid .vl,body:not(.dark) .pp .ppdark h2.pph{color:#FFF5EB!important}
body:not(.dark) .ppcard .ic{background:rgba(237,192,79,.25)!important}
body:not(.dark) .ppnote{background:rgba(70,70,70,.06)!important}
body:not(.dark) .ppdark .pt .ic{background:rgba(30,143,90,.35)!important;color:#EDC04F!important}
body:not(.dark) .ppcalc{background:#FFF5EB!important;border-color:rgba(30,143,90,.2)!important}
body:not(.dark) .ppcalc select,body:not(.dark) .ppcalc input,body:not(.dark) .pppts button,body:not(.dark) .ppform input,
body:not(.dark) .ppform select,body:not(.dark) .ppform textarea,body:not(.dark) .ppform .chips label{
  border-color:rgba(30,143,90,.35)!important;background:#FFF5EB!important}
body:not(.dark) .pp [style*="#1f2622"]{background:#073B25!important;border-color:#073B25!important;color:#FFF5EB!important}
body:not(.dark) .pp [style*="#d7d7d7"]{color:rgba(255,245,235,.85)!important}
body:not(.dark) .pp [style*="#999"]{color:#464646!important}
body:not(.dark) .langrow strong{color:#FFF5EB}
body:not(.dark) .ppdark{color:#FFF5EB!important;background:#073B25!important}
body:not(.dark) .ppdark .pt p{color:rgba(255,245,235,.8)!important}
body:not(.dark) .ppform{background:#FFF5EB!important;border-color:rgba(30,143,90,.2)!important}
body:not(.dark) .pppts button{color:#073B25!important}
body:not(.dark) header{color:#073B25}
body:not(.dark) .fdeyebrow{color:#EDC04F}
body:not(.dark) .fdhero strong,body:not(.dark) .fdhero b{color:#FFF5EB}
body:not(.dark) input,body:not(.dark) select,body:not(.dark) textarea{background:#FFF5EB;border-color:rgba(30,143,90,.35)}
body:not(.dark) .daypill{color:#073B25}
body:not(.dark) .sesleft{color:#1E8F5A}
body:not(.dark) .pphero{background:#073B25!important;color:#FFF5EB!important}
body:not(.dark) .pp .pphero h1,body:not(.dark) .pp .ppquote h3,body:not(.dark) .ppres{color:#FFF5EB!important}
body:not(.dark) .pphero h1 .ac{color:#EDC04F!important}
body:not(.dark) .pphero p,body:not(.dark) .ppquote p{color:rgba(255,245,235,.85)!important}
body:not(.dark) .ppcard{background:#FFF5EB!important;border-color:rgba(30,143,90,.2)!important}
body:not(.dark) .ppquote{border-color:rgba(30,143,90,.45)!important}
body:not(.dark) .ppres{background:#073B25!important}
body:not(.dark) .ppres .l{border-bottom-color:rgba(255,245,235,.18)!important}
body:not(.dark) .ppres .net{background:rgba(30,143,90,.35)!important}
body:not(.dark) .ppres .neg{color:#EDC04F!important}
body:not(.dark) .ppres .muted{color:rgba(255,245,235,.75)!important}
body:not(.dark) .ppdisc{background:rgba(70,70,70,.06)!important}
body:not(.dark) .pppay{background:rgba(29,74,207,.06)!important;border-color:rgba(29,74,207,.2)!important}
body:not(.dark){font-family:'Open Sans',system-ui,sans-serif}
body:not(.dark) h1,body:not(.dark) h2,body:not(.dark) h3{font-family:'Bebas Neue','Open Sans',sans-serif}
body:not(.dark) main>section.fdsec{margin:64px 0}
body:not(.dark) main section.fdsec>h2,body:not(.dark) .joinc h2{font-size:clamp(28px,7vw,40px);line-height:1.02;letter-spacing:.01em}
@media(min-width:700px){body:not(.dark) main>section.fdsec{margin:96px 0}}
.fdthree .fdpic img{display:block;width:100%;height:100%;object-fit:cover}
.tsshort{display:none}
/* nothing loops: the schedule pill's halo breathed once every few seconds */
body:not(.dark) .navkey{animation:none!important}
/* the floating Book button: hidden until the script says the hero's button
   has left the screen; the room it needs is kept at the bottom of the page */
body:not(.dark) .bookfab{display:none}
body:not(.dark).fabon .bookfab{display:inline-flex}
body:not(.dark) main{padding-bottom:72px}
/* the brand bar over the hero photo: frosted, solid once the page scrolls */
body.m996hero:not(.dark) header{background:rgba(255,245,235,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.m996hero.m996scrolled:not(.dark) header{background:#FFF5EB;backdrop-filter:none;-webkit-backdrop-filter:none}
/* calm motion: lift on hover and press */
@media (prefers-reduced-motion:no-preference){
  body:not(.dark) .card,body:not(.dark) .fdcard,body:not(.dark) .btn{transition:transform .15s ease,box-shadow .15s ease}
  body:not(.dark) .card:hover,body:not(.dark) .fdcard:hover,body:not(.dark) .btn:hover,
  body:not(.dark) .card:active,body:not(.dark) .fdcard:active,body:not(.dark) .btn:active{
    transform:translateY(-2px);box-shadow:0 6px 18px rgba(7,59,37,.14)}
}
@media (prefers-reduced-motion:reduce){
  body:not(.dark) *{animation:none!important;transition:none!important}
}
/* Join the community */
.joinc{background:#073B25;color:#FFF5EB;border-radius:14px;padding:1.2rem 1.1rem}
.joinc h2{color:#FFF5EB;margin:0 0 .3rem}
.joinc p{margin:0 0 .7rem}
.joinc form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.joinc input[type=email],.joinc input[type=text]{flex:1 1 12rem;min-height:44px}
.joinc label.chk{flex:1 0 100%;display:flex;gap:.5rem;align-items:center;color:#FFF5EB;min-height:44px}
.joinc .joinsoc{margin:.6rem 0 0;display:flex;gap:.8rem;flex-wrap:wrap}
.joinc .joinsoc a{color:#EDC04F;min-height:44px;display:inline-flex;align-items:center}
.joinc .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.joinline{margin:.4rem 0}
.joinline a{min-height:44px;display:inline-flex;align-items:center}

@media(max-width:699px){
  html,body{overflow-x:clip!important;max-width:100%!important}
  body:not(.dark){font-size:15px!important}
  body:not(.dark) input,body:not(.dark) select,body:not(.dark) textarea{font-size:16px!important}
  /* the top strip: one line, the WhatsApp icon, Open 8 to 22, the languages */
  body:not(.dark) .topstrip{white-space:nowrap!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:.6rem!important;font-size:14px!important;min-height:44px!important;padding:0 .5rem!important}
  body:not(.dark) .topstrip .tslong,body:not(.dark) .topstrip .tsloc,body:not(.dark) .topstrip .tsicons,
  body:not(.dark) .topstrip .tssep{display:none!important}
  body:not(.dark) .topstrip .tsshort{display:inline!important}
  body:not(.dark) .topstrip a{min-height:44px!important;min-width:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  body:not(.dark) .topstrip .tswa svg{width:20px!important;height:20px!important}
  body:not(.dark) .topstrip .bvalang{display:inline-flex!important;gap:.1rem!important;align-items:center!important}
  body:not(.dark) .topstrip .bvalang b{min-width:36px!important;text-align:center!important}
  /* the brand bar: the name on two short lines, never cut; Schedule; Sign in as an icon */
  body:not(.dark) .brandbar{display:flex!important;align-items:center!important;gap:.5rem!important;flex-wrap:nowrap!important}
  body:not(.dark) .brandbar .v{display:none!important}
  body:not(.dark) .brand{display:flex!important;align-items:center!important;gap:.45rem!important;min-height:44px!important;min-width:0!important;flex:1 1 auto!important}
  body:not(.dark) .brandname{display:flex!important;flex-direction:column!important;line-height:.95!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important;font-family:'Bebas Neue','Open Sans',sans-serif!important;font-size:19px!important}
  body:not(.dark) .brandname span{display:block!important;white-space:nowrap!important}
  body:not(.dark) .topchip{min-height:44px!important;display:inline-flex!important;align-items:center!important;font-size:14px!important;margin-left:auto!important}
  body:not(.dark) .acctchip{min-height:44px!important;min-width:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  body:not(.dark) .acctchip .chiptext{display:none!important}
  /* every tap at least 44 px tall; links inside a sentence excepted */
  body:not(.dark) .btn,body:not(.dark) button,body:not(.dark) summary,body:not(.dark) .pubnav a,
  body:not(.dark) .pubnav summary,body:not(.dark) .pubfoot a,body:not(.dark) footer a,body:not(.dark) .fdsee,
  body:not(.dark) .fdarrow,body:not(.dark) nav a,body:not(.dark) .chip,body:not(.dark) .daypick a,
  body:not(.dark) label.chk{min-height:44px!important;display:inline-flex!important;align-items:center!important}
  body:not(.dark) .btn,body:not(.dark) .pubnav a,body:not(.dark) .pubnav summary{justify-content:center!important}
  body:not(.dark) input[type=checkbox],body:not(.dark) input[type=radio]{min-width:22px!important;min-height:22px!important}
  /* text at least 15 px; 13 px only for fine print */
  body:not(.dark) p,body:not(.dark) li,body:not(.dark) dd,body:not(.dark) dt,body:not(.dark) td,
  body:not(.dark) th,body:not(.dark) label,body:not(.dark) .muted,body:not(.dark) .meta,
  body:not(.dark) .when,body:not(.dark) .fdeyebrow,body:not(.dark) .fdprice,body:not(.dark) .fdfacts,
  body:not(.dark) .fdarrow,body:not(.dark) .fdthree .fdbody p,body:not(.dark) .pill{font-size:max(15px,1em)!important}
  body:not(.dark) small,body:not(.dark) .fine,body:not(.dark) .pubfoot,body:not(.dark) > footer{font-size:13px!important}
  /* the hero fits the screen: it was 5 px wider than it */
  body:not(.dark) .fdhero{margin-left:-.9rem!important;margin-right:-.9rem!important;max-width:calc(100% + 1.8rem)!important}
  body:not(.dark) .fdtext{max-width:100%!important;box-sizing:border-box!important}
  body:not(.dark) img,body:not(.dark) video,body:not(.dark) iframe,body:not(.dark) table{max-width:100%!important}
  body:not(.dark) pre,body:not(.dark) code{white-space:pre-wrap!important;word-break:break-word!important}
  body:not(.dark) .topstrip *{font-size:14px!important}
  body:not(.dark) .btn,body:not(.dark) summary.btn,body:not(.dark) .pubnav a{font-size:14px!important}
  /* links that stand alone on their line are buttons to a thumb */
  body:not(.dark) .wklink,body:not(.dark) .fdsec > p > a:only-child,body:not(.dark) .card > p.muted > a:only-child,
  body:not(.dark) .seslink > a,body:not(.dark) p > a.solo{min-height:44px!important;display:inline-flex!important;align-items:center!important}
  body:not(.dark) .brandname span{font-size:19px!important;line-height:.95!important}
  body:not(.dark) .brand{flex:0 0 auto!important}
  /* hidden stays hidden: the display rules above must never reveal what the
     page hides (the staff chips, the account chips for a signed-out phone) */
  body:not(.dark) [hidden]:not(#m996a):not(#m996b){display:none!important}
  /* the floating Book button last: the 44 px rule above must not show it */
  body:not(.dark) .bookfab{display:none!important}
  body:not(.dark).fabon .bookfab{display:inline-flex!important}
}