/* Open Squash — the schedule grid, styles. ONE file, loaded by BOTH portals.
   ==================================================================================================
   The other half of os-grid.js. Extracted for the same reason and kept beside it: a component
   whose drawing is shared and whose appearance is not is still two components — the coaches
   portal loaded the shared script, drew the right elements, and rendered a column of unstyled
   text, because every rule below was still sitting inline in the desk's page.
   test-shared-files.js fails if these two copies stop matching.
   ============================================================================================== */
/* ---- The day grid -------------------------------------------------------------------------
   Seth's redesign, 4 Aug. The load-bearing idea is that time is a distance: a block is as tall
   as it is long, so an overlap looks like an overlap. Every earlier grid on this page put one
   row per distinct start time, which drew 4:45 and 5:00 as neighbours in sequence when they in
   fact share half an hour of court. */
.gwrap{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.gscroll{overflow:auto;max-height:calc(100vh - 250px);min-height:380px;position:relative;z-index:0}
.gmx{position:relative;display:grid;min-width:640px}
.ghead{display:grid;position:sticky;top:0;z-index:6;background:#f6f8fc;border-bottom:1px solid var(--line)}
.gch{padding:8px 6px 7px;text-align:center;border-left:1px solid var(--line)}
.gch:first-child{border-left:0}
.gch b{font-family:'Kanit',sans-serif;font-weight:800;font-size:12px;color:var(--navy);display:block;line-height:1.2;white-space:nowrap}
.gch .gtag{font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#5b6b8c;background:#e8effc;border-radius:4px;padding:0 4px;margin-left:3px}
.gch i{font-style:normal;display:block;font-size:10px;color:var(--muted);margin-top:2px}
.gbody{position:relative}
.glanes{position:absolute;inset:0;display:grid}
.glanes>div{border-left:1px solid var(--line)}
.glanes>div:first-child{border-left:0}
.gln{position:absolute;right:0;border-top:1px solid #eef0f4}
.gln.hr{border-top:1px solid #dfe3ea}
.gtl{position:absolute;text-align:right;font-size:10.5px;color:var(--muted);font-weight:600;width:52px}
.gnow{position:absolute;right:0;height:0;border-top:2px solid var(--red);z-index:5;pointer-events:none}
.gnow:after{content:'now';position:absolute;right:5px;top:-13px;font-size:9px;font-weight:800;color:var(--red)}
.gb{position:absolute;border-radius:8px;padding:4px 6px;overflow:hidden;cursor:pointer;
    font-size:11px;line-height:1.24;z-index:3;border:1px solid rgba(15,28,58,.08);text-align:left;font-family:inherit}
.gb:hover{box-shadow:0 3px 10px rgba(15,28,58,.16);z-index:4}
.gb b{display:block;font-weight:700;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
.gb .gt{display:block;font-size:9.5px;opacity:.72;margin-top:1px;white-space:nowrap}
.gb.member{background:#eef1f7;color:#42506b;border-left:3px solid #9aa8c4}
.gb.program{background:#e6f6ec;color:#14513a;border-left:3px solid #4caf7d}
.gb.lesson{background:#e8effc;color:#12336e;border-left:3px solid var(--navy)}
.gb.other{background:#f4f0fb;color:#4b3b73;border-left:3px solid #8d76c9}
.gb.hold{background:#FFF9EC;color:#7a5a12;border:1px dashed #d9a93a;border-left:3px solid #d9a93a}
.gb.tobook{background:#fff;border:1px dashed #b9c2d2;border-left:3px solid var(--navy);color:#33415c}
.gav{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
     color:#fff;font-size:8px;font-weight:800;letter-spacing:.2px;float:right;margin-left:4px}
.gbadge{display:inline-block;font-size:8px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
        border-radius:4px;padding:0 4px;margin-top:2px;margin-right:3px}
.gbadge.ok{background:#dff0e6;color:#14683f}
.gbadge.todo{background:#e8effc;color:#12336e}
.gbadge.q{background:#FFF9EC;color:#8a6412}
.gbadge.ns{background:#fdecea;color:#b23a26}
.gbadge.in{background:#eaf6ef;color:#1c7a4a}
.gbadge.run{background:#f1edfb;color:#5b4a8c}
.gbadge.idle{background:#eceef2;color:#6b6f78}
/* Places taken on a camp or clinic, off the programme session the name came from.
   Amber the moment it is full, because a full class is a waitlist question, not a booking one. */
.gbadge.fill{background:#eef3fb;color:#2b4a80}
.gbadge.fill.full{background:#fdf1de;color:#8a5a12}
/* ---- toolbar, tiles, chips ---- */
/* Seth's header, 4 Aug. The cream is the brand's, not a neutral — this screen is looked at for
   hours at a time and the blue-grey read as cold next to it. */
#view .gcrumb{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 2px 6px}
#view .gcrumb .gseason{background:var(--cream);color:#8a5a2b;border-radius:5px;padding:1px 7px;margin-left:8px;letter-spacing:.04em}
.gpills{display:inline-flex;gap:5px}
.gdense{background:#FFF9EC;border:1px solid #f2dfae;border-radius:9px;padding:8px 12px;
        font-size:12.5px;color:#8a6412;margin-bottom:10px}
.gdense b{color:#6b4d0c}
.gpill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 15px;
       font:inherit;font-size:12.5px;font-weight:700;color:#5b6b8c;cursor:pointer}
.gpill.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gnowbtn{border:0;background:var(--red);color:#fff;border-radius:999px;padding:7px 16px;
         font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.gnowbtn:hover{filter:brightness(1.07)}
.reload.rnd{border-radius:50%;width:30px;padding:0}
.gch.day{cursor:pointer}
.gch.day:hover{background:#eef3ff}
.gch.day b{color:var(--navy)}
.gnow.col{border-top-width:2px}
.gnow.col:after{right:2px}
.gtop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.gdate{font-family:'Kanit',sans-serif;font-weight:800;font-size:22px;color:var(--navy);line-height:1.1;margin-right:4px}
.gseg{display:inline-flex;background:#eef1f7;border-radius:999px;padding:2px}
.gseg button{border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:#5b6b8c;
             padding:5px 12px;border-radius:999px;cursor:pointer}
.gseg button.on{background:var(--navy);color:#fff}
.gtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px;margin-bottom:12px}
.gtile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px 9px;box-shadow:var(--shadow-sm)}
.gtile .k{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.gtile .v{font-family:'Kanit',sans-serif;font-weight:800;font-size:22px;color:var(--navy);line-height:1.15;margin-top:2px}
.gtile .v small{font-family:'Georama',sans-serif;font-size:11.5px;font-weight:600;color:var(--muted);margin-left:4px}
.gtile .bar{height:3px;border-radius:2px;background:#eef1f7;margin-top:7px;overflow:hidden}
.gtile .bar i{display:block;height:100%;background:var(--navy)}
.gtile.warn .v{color:#b8791b} .gtile.warn .bar i{background:#d9a93a}
.gtile.bad .v{color:var(--red)} .gtile.bad .bar i{background:var(--red)}
.gtile.good .v{color:#1c7a4a} .gtile.good .bar i{background:#1c7a4a}
.gchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:11px}
.gchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;
       border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;color:#5b6b8c}
.gchip .dot{width:8px;height:8px;border-radius:50%}
.gchip .n{font-weight:800;color:var(--navy)}
.gchip.off{opacity:.42}
.gchip:hover{border-color:var(--navy)}
/* ---- right rail ---- */
.glayout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:14px;align-items:start}
/* A grid item defaults to min-width:auto, which means it grows to fit its content instead of
   scrolling it. That is why a thirteen-hour day pushed the whole page sideways rather than
   scrolling inside its own box. Both halves of this — minmax(0,1fr) above and min-width:0
   here — are needed; either alone still overflows in one browser or the other. */
.glayout>*{min-width:0}
.gwrap{min-width:0;max-width:100%}
.grail{display:flex;flex-direction:column;gap:12px}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 14px;box-shadow:var(--shadow-sm)}
.gcard h4{font-family:'Kanit',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
          color:var(--navy);margin:0 0 9px;display:flex;align-items:center;gap:7px}
.gcard h4 span{background:var(--navy);color:#fff;border-radius:999px;font-size:10px;padding:1px 7px;font-family:'Georama',sans-serif}
.gitem{display:flex;gap:8px;padding:7px 0;border-top:1px solid #f1f2f5;cursor:pointer}
.gcard .gitem:first-of-type{border-top:0}
.gitem .d{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:0 0 8px}
.gitem b{display:block;font-size:12.5px;font-weight:700;color:var(--ink)}
.gitem i{font-style:normal;display:block;font-size:11px;color:var(--muted);margin-top:1px}
.gitem:hover b{color:var(--navy)}
.gcoach{display:flex;align-items:center;gap:9px;padding:6px 0}
.gcoach .gav{float:none;margin:0;width:22px;height:22px;font-size:9px}
.gcoach .nm{flex:1;font-size:12.5px;font-weight:600}
.gcoach .hr2{width:74px;height:5px;border-radius:3px;background:#eef1f7;overflow:hidden}
.gcoach .hr2 i{display:block;height:100%}
.gcoach .hh{font-size:11.5px;font-weight:800;color:var(--navy);width:34px;text-align:right}
.gempty{padding:26px 10px;text-align:center;color:var(--muted);font-size:13px}
/* ---- phone: a grid of eight courts is 40px a column, which is unreadable. The day becomes a
   list in time order instead — same blocks, same colours, same click. ---- */
.glist{display:none}
.gli{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:start;background:#fff;
      border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:6px;cursor:pointer}
.gli .lt{font-family:'Kanit',sans-serif;font-weight:700;font-size:11.5px;color:var(--navy);line-height:1.25}
.gli b{display:block;font-size:13px}
.gli i{font-style:normal;font-size:11.5px;color:var(--muted)}
.gli.hold{border-left:3px solid #d9a93a;background:#FFF9EC}
.gli.lesson{border-left:3px solid var(--navy)}
.gli.program{border-left:3px solid #4caf7d}
.gli.member{border-left:3px solid #9aa8c4}
.gli.tobook{border-left:3px solid var(--navy);border-style:dashed}
@media(max-width:900px){ .glayout{grid-template-columns:1fr} }
@media(max-width:700px){
  .gscroll{display:none}
  .glist{display:block}
  .gtiles{grid-template-columns:repeat(2,1fr)}
  .gdate{font-size:18px}
}

/* Roster panel inside the block modal. */
.grost{margin-top:10px}
.grost-h{font-size:12px;font-weight:800;color:#3c4966;margin:2px 0 6px}
.grost-l{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px}
.grost-l li{font-size:13px;color:#25303f}
.grost-s{margin-left:8px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
  color:#4c5f85;background:#eef1f6;border-radius:5px;padding:1px 5px}

/* ══ HORIZONTAL DAY GRID ═══════════════════════════════════════════════════════════════════
   13 Aug 2026. Time across the top, courts down the side — the shape of every club sheet and of
   PlayByPoint. The week and recurring views keep the vertical drawing above; only the day view
   uses what follows. Block colours, badges and avatars are shared, deliberately: the colour
   language the desk has learned this month does not move. */
.gwrap.h .gscroll{overflow:auto;max-height:calc(100vh - 230px)}
.ghz{position:relative;min-width:100%}
.hhrow{position:sticky;top:0;z-index:8;height:38px;background:#f6f8fc;border-bottom:1px solid var(--line)}
.hcnr{position:sticky;left:0;top:0;z-index:9;width:132px;height:38px;background:#f6f8fc;
  border-right:1px solid var(--line);display:inline-block}
.hhh{position:absolute;top:0;height:38px;padding:10px 0 0 8px;border-left:1px solid var(--line);
  font-family:'Kanit',sans-serif;font-size:11.5px;color:#5a6172;white-space:nowrap}
.hhh.hot .lbl{background:#fdecef;color:var(--red);border-radius:20px;padding:2px 9px;font-weight:700}
.hrow{position:relative;display:flex;border-bottom:1px solid var(--line)}
.ghz,.hhrow,.hcnr,.hhh,.hrow,.hrh,.hlane,.gb.hb{box-sizing:border-box}
.hrh{position:sticky;left:0;z-index:5;flex:0 0 132px;width:132px;background:var(--card);
  border-right:1px solid var(--line);padding:9px 11px;display:flex;flex-direction:column;justify-content:center}
.hrh b{font-family:'Kanit',sans-serif;font-weight:800;font-size:12px;color:var(--navy);line-height:1.2}
.hrh i{font-style:normal;font-size:10px;color:var(--muted);margin-top:2px}
.hrh.sp b{color:var(--muted);font-style:italic}
.hlane{position:relative;flex:0 0 auto;background:#f7f9fd;cursor:crosshair}
.hvg{position:absolute;top:0;bottom:0;width:1px;background:transparent}
.hvg.lat{background:#dde7f5}
.hvg.hr{background:#e3e7ee}
.gb.hb{border-radius:5px;padding:5px 7px;display:block;text-align:left;border-left-width:3px;border-left-style:solid}
.gb.hb .hb1{display:flex;align-items:center;gap:5px;min-width:0}
.gb.hb b{font-size:11px}
.gb.hb .hbb{display:block;margin-top:3px}
.hnow{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--red);z-index:6;pointer-events:none}
.hnow:after{content:'now';position:absolute;top:2px;left:3px;font-size:9px;font-weight:800;color:var(--red)}
.hsel{position:absolute;top:2px;bottom:2px;background:rgba(143,218,175,.55);
  border:1.5px solid #16403e;border-radius:4px;pointer-events:none;z-index:3}
.hchip{position:absolute;top:50%;transform:translateY(-50%);background:#16403e;color:#fff;border-radius:6px;
  padding:5px 10px;font-family:'Kanit',sans-serif;font-size:11.5px;white-space:nowrap;pointer-events:none;
  z-index:9;box-shadow:0 3px 12px rgba(0,0,0,.22)}
.hchip i{font-style:normal;opacity:.8;font-weight:400}
.gb.hb .hmk{position:absolute;top:3px;right:5px;font-size:10px;opacity:.8;line-height:1}
.gb.hb{position:absolute}
.gb.hb.narrow{padding:4px 5px}
.gb.hb.narrow b{font-size:10.5px;white-space:normal;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gb.hb.narrow .gt{font-size:9px}
/* Junior Academy, by squad. Tints not fills — the rest of this grid speaks quietly and one
   shouting block would pull the eye away from the thing that actually needs attention. */
.gb.program.ja-green{background:#e6f6ec;color:#14513a;border-left-color:#4caf7d}
.gb.program.ja-blue{background:#e5f4ff;color:#00456b;border-left-color:#00aaff}
.gb.program.ja-red{background:#fdeaef;color:#8d0f34;border-left-color:#ed1856}

/* ── bare mode: one thin line of controls, then the grid ──────────────────────────────────── */
.gbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 10px}
.gtog{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:6px 13px;font-family:'Kanit',sans-serif;font-weight:600;font-size:12.5px;
  color:var(--navy);cursor:pointer;min-height:32px}
.gtog b{font-weight:800}
.gtog.off{color:#9aa1af;background:#f6f7fa}
.gtog.off .sw{opacity:.3}
.gtog:hover{border-color:#c3cbd9}
.gbar .sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.gsel{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-family:'Kanit',sans-serif;
  font-size:12.5px;color:var(--navy);background:#fff;min-height:32px;cursor:pointer}
.gsep{flex:0 0 1px;height:22px;background:var(--line);margin:0 3px}
.glegend{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:11.5px;color:var(--muted)}
.glegend span{display:inline-flex;align-items:center;gap:5px}
.glegend .gmut{color:#aab1bd}
/* Bare mode always draws the grid full width — there is no rail column beside it. */
.gwrap.bare{border-radius:0;border-left:0;border-right:0}
/* The week strip in the toolbar, straight off the prototype. */
.gdays{display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto}
.gdays button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 10px;cursor:pointer;
  font-family:'Kanit',sans-serif;font-size:12px;color:#5a6172;line-height:1.2;text-align:center;
  min-height:38px;flex:0 0 auto}
.gdays button i{display:block;font-style:normal;font-size:10px;opacity:.72}
.gdays button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gdays button.today b{color:var(--red)}
.gdays button.on.today b{color:#fff}

/* ══ PBP SKIN ═══════════════════════════════════════════════════════════════════════════════
   13 Aug 2026. Seth: "the background should feel like play by point… it needs to mirror play by
   point" — "you had it spot on in your mock ups."

   So this is not a new interpretation. Every value below is lifted from grid-pbp-shape.html, the
   prototype he signed off: white page, hairline borders, small flat controls, one sticky toolbar,
   quiet type. The cream, the 22px bold date and the chunky red and navy buttons are the current
   app's voice, and they are what was still shouting over the grid.

   Scoped to body.os-pbp so it is one class on and one class off. */

/* The page. White — not fawn. Floor fawn is a brand colour for member-facing pages; behind a
   working grid it reads as a tint over everything and nothing sits flat on it. */
body.os-pbp{ background:#fff !important; }
body.os-pbp #app{ background:#fff; }
body.os-pbp main{ background:#fff; }

/* One sticky toolbar, hairline under it, and nothing above it. */
body.os-pbp.os-gridfull .gcrumb{
  padding:9px 20px 0; margin:0; font-size:10.5px; letter-spacing:.13em; color:#9aa1af; font-weight:600;
}
body.os-pbp .gcrumb .gseason{ background:none; color:#c08b12; padding:0 0 0 8px; font-weight:700 }
body.os-pbp.os-gridfull .gtop{
  background:#fff; border-bottom:1px solid var(--line); padding:11px 20px; margin:0;
  gap:9px; position:sticky; top:0; z-index:30;
}
/* The date stops being a headline. In the prototype it is a control you press, the same size as
   everything beside it — a 22px bold navy string is the app talking about itself. */
body.os-pbp .gdate{ font-size:15px; font-weight:700; color:var(--ink); margin-right:2px }

/* Controls: 22px pills, white, hairline, Kanit 13.5. No filled shouting except the one thing
   that is actually selected. */
body.os-pbp .gtop .reload,
body.os-pbp .gtop .btn,
body.os-pbp .gtop .gnowbtn{
  border-radius:22px; padding:8px 16px; font-size:13px; font-weight:600; font-family:'Kanit',sans-serif;
  border:1px solid var(--line); background:#fff; color:var(--ink); min-height:34px; box-shadow:none;
}
body.os-pbp .gtop .reload.rnd{ padding:8px 13px }
body.os-pbp .gtop .btn{ background:var(--navy); border-color:var(--navy); color:#fff }
body.os-pbp .gtop .gnowbtn{ color:var(--red); border-color:#f6c9d6 }
body.os-pbp .gtop .gnowbtn:hover{ background:#fff4f7 }
body.os-pbp .gtop .field.sm{ border-radius:8px; border-width:1px; font-size:13px; padding:8px 10px; min-height:34px }
body.os-pbp .gpill{ border-radius:22px; padding:7px 15px; font-size:12.5px }
body.os-pbp .gseg{ background:#f4f6fa; border:1px solid var(--line); border-radius:22px; padding:3px }
body.os-pbp .gseg button{ border-radius:22px; padding:6px 13px; font-size:12.5px; color:var(--muted) }
body.os-pbp .gseg button.on{ background:var(--navy); color:#fff }
body.os-pbp .gdays button{ border-radius:8px; padding:6px 10px; font-size:12px; min-height:36px }

/* The filter line: quieter still. It sits under the toolbar, not in a band of its own. */
body.os-pbp.os-gridfull .gbar{ padding:9px 20px; border-bottom:1px solid var(--line); background:#fff }
body.os-pbp .gtog{ border-radius:22px; padding:5px 12px; font-size:12px; min-height:28px }
body.os-pbp .glegend{ font-size:11.5px }

/* The grid itself. White header like the prototype, not the pale blue panel; court labels in
   quiet body type rather than bold navy Kanit — the courts are the axis, not the content. */
body.os-pbp .hhrow, body.os-pbp .hcnr{ background:#fff }
body.os-pbp .hhh{ font-size:12.5px; color:#5a6172 }
body.os-pbp .hhh.hot .lbl{ background:var(--red); color:#fff }
body.os-pbp .hrh b{ font-family:'Georama',system-ui,sans-serif; font-weight:600; font-size:12.5px; color:#3d4658 }
body.os-pbp .hrh i{ font-size:10.5px; color:#9aa1af }
body.os-pbp .hlane{ background:#f4f7fb }
body.os-pbp .gwrap.h{ border-left:0; border-right:0; border-radius:0; box-shadow:none }
body.os-pbp.os-gridfull .gwrap.h{ border-top:0 }
/* Tighter toolbar so it holds one line on a normal desk screen. */
body.os-pbp.os-gridfull .gtop{ gap:7px }
body.os-pbp .gtop .field.sm{ width:132px }
body.os-pbp .gtop .btn{ padding:8px 15px }
body.os-pbp #gZen{ margin-left:0 }
body.os-pbp .gcrumb .gcdate{ color:var(--ink); font-weight:700; letter-spacing:.06em; padding-left:9px }
body.os-pbp .gdate{ display:none }

/* The confirm card after a drag — PlayByPoint's shape, our blue. See gDragConfirm(). */
.gdcf{position:fixed;z-index:80;width:330px;background:#fff;border-radius:10px;
  box-shadow:0 10px 34px rgba(10,25,60,.24);overflow:hidden;font-family:'Georama',system-ui,sans-serif}
.gdcf-tabs{display:flex;align-items:center;gap:14px;padding:0 10px 0 16px;border-bottom:1px solid #E9ECF2;background:#F7F8FB}
.gdcf-tabs .on{font-family:'Kanit',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:#1b2a5b;padding:13px 0 11px;border-bottom:2px solid #002D78}
.gdcf-x{margin-left:auto;border:0;background:transparent;color:#9aa1ad;font-size:19px;line-height:1;
  cursor:pointer;padding:6px}
.gdcf-x:hover{color:#2f3237}
.gdcf-b{padding:15px 16px 16px}
.gdcf-g{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.gdcf-g label,.gdcf-d label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#9aa0aa;font-weight:700;margin:0 0 3px}
.gdcf-g b,.gdcf-d b{display:block;font-size:14.5px;font-weight:600;color:#2f3237;line-height:1.35}
.gdcf-d{margin-top:14px}
.gdcf-d i{font-style:normal;color:#9aa0aa}
.gdcf-go{width:100%;margin-top:16px;border:0;border-radius:7px;background:#002D78;color:#fff;
  padding:13px 10px;font-family:'Kanit',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer}
.gdcf-go:hover{background:#00215c}
/* The little pointer, so the card is visibly attached to the box it describes. */
.gdcf::after{content:'';position:absolute;left:50%;margin-left:-8px;border:8px solid transparent;
  border-top-color:#fff;bottom:-16px}
.gdcf.below::after{bottom:auto;top:-16px;border-top-color:transparent;border-bottom-color:#F7F8FB}

/* ══ Phone pass · 26 Aug ══════════════════════════════════════════════════
   os-phone-pass. Seth: "the slot book page is much better.. but it also so
   wide on a phone screen."

   It was two day-columns side by side inside 390px, which left each day about
   165px - narrow enough that "FiDi · Court 3" truncated to "FiDi · ct C..."
   on the one line that says where to turn up. One day per row instead: the
   page gets longer, but nothing has to be guessed at.                       */
@media(max-width:560px){
  .gtiles{grid-template-columns:1fr!important;gap:8px}
  .gtile{min-height:0}
  /* the week arrows already move the week; the date field was a second way to
     do the same thing, taking a full row above the content */
  .gdatefield,.gseason .gdate-input{display:none}
  .glegend{font-size:13px;line-height:1.5}
  .glegend .gl-help{display:none}          /* the six-line paragraph */
}