/* 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}
/* ---- 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:1fr 292px;gap:14px;align-items:start}
.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}
}