/* ==========================================================================
   Clubhouse — platform back office
   Visual language: a club ledger. Ruled hairlines, mono tee times, brass
   micro-labels, a serif reserved for the club's name and the numbers that
   matter. Nothing here depends on scroll, IntersectionObserver or rAF.
   ========================================================================== */

:root{
  /* ink + paper */
  --ink:#101c16; --ink-2:#38493f; --muted:#6d7c73; --muted-2:#8d998f;
  --bg:#eef1ec; --panel:#ffffff; --panel-2:#f8faf6; --panel-3:#f3f6f1;
  --line:#dde3da; --hair:#e9ede6;

  /* club colours */
  --fairway:#1c5133; --fairway-dk:#123723; --fairway-lt:#2c6b45;
  --pine:#0b2317; --pine-2:#123020;
  --brass:#a8842a; --brass-lt:#d8bd72; --brass-wash:#f7f0dc;

  /* status */
  --ok:#1c5133; --ok-bg:#e7f0e8; --ok-line:#c9dfcd;
  --warn:#87671a; --warn-bg:#faf2dd; --warn-line:#ecdcb2;
  --bad:#8f4a42; --bad-bg:#f8ebe9; --bad-line:#eed4d0;

  --side:266px;
  --r:10px; --r-sm:7px;
  --lift:0 1px 1px rgba(16,28,22,.03), 0 6px 18px rgba(16,28,22,.05);

  --f-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-dis:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--f-ui); background:var(--bg); color:var(--ink);
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.011em; }
p{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--fairway); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; border-radius:3px; }
.hidden{ display:none !important; }
.nums{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--f-mono); font-size:.84em; letter-spacing:-.01em; }
.serif{ font-family:var(--f-dis); font-weight:600; letter-spacing:-.015em; }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* the micro-label that heads every block — brass, tracked, tiny */
.eyebrow{ font-size:.645rem; font-weight:600; letter-spacing:.155em; text-transform:uppercase;
  color:var(--brass); }

/* ============================== CONTROLS ============================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:1px solid transparent; border-radius:var(--r-sm); padding:.55rem 1rem;
  font-size:.855rem; font-weight:500; background:var(--fairway); color:#fff; text-decoration:none;
  transition:background .13s ease, border-color .13s ease, color .13s ease; white-space:nowrap; }
.btn:hover{ background:var(--fairway-dk); }
.btn:active{ transform:translateY(.5px); }
.btn.gold{ background:var(--brass); color:#231a03; }
.btn.gold:hover{ background:#93732280; background:#8f7223; color:#fff; }
.btn.ghost{ background:var(--panel); color:var(--ink-2); border-color:var(--line); }
.btn.ghost:hover{ background:var(--panel-2); border-color:#cbd4c8; color:var(--ink); }
.btn.quiet{ background:transparent; color:var(--muted); border-color:transparent; padding-left:.5rem; padding-right:.5rem; }
.btn.quiet:hover{ background:var(--panel-3); color:var(--ink); }
.btn.danger{ background:var(--panel); color:var(--bad); border-color:var(--bad-line); }
.btn.danger:hover{ background:var(--bad-bg); }
.btn.sm{ padding:.3rem .6rem; font-size:.775rem; border-radius:6px; }
.btn.block{ width:100%; padding:.68rem 1rem; }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn.on-dark{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#eef3ee; }
.btn.on-dark:hover{ background:rgba(255,255,255,.18); color:#fff; }

.field{ width:100%; padding:.55rem .8rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); font-size:.875rem; transition:border-color .13s ease, box-shadow .13s ease; }
.field::placeholder{ color:var(--muted-2); }
.field:focus{ outline:none; border-color:var(--fairway); box-shadow:0 0 0 3px rgba(28,81,51,.1); }
select.field{ appearance:none; padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236d7c73' stroke-width='1.6' d='M1.5 2l4.5 4.5L10.5 2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; }
.search-field{ padding-left:2rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238d998f' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.4-3.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:.65rem center; }

.switch{ position:relative; width:44px; height:25px; flex:0 0 44px; border-radius:999px; border:1px solid transparent;
  padding:0; background:rgba(255,255,255,.22); transition:background .16s ease; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .16s ease; }
.switch.on{ background:var(--brass); }
.switch.on::after{ transform:translateX(19px); }
.switch.light{ background:#c8cfc7; }
.switch.light.on{ background:var(--fairway); }

/* ============================== LOGIN ============================== */
#login-view{ min-height:100dvh; display:grid; place-items:center; padding:1.25rem;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(58,124,82,.55) 0%, rgba(11,35,23,0) 62%),
    linear-gradient(180deg,#12321f 0%,#0b2317 55%,#08190f 100%); }
.login-card{ width:min(392px,100%); background:var(--panel); border-radius:14px; padding:2rem 1.9rem 1.6rem;
  box-shadow:0 30px 70px rgba(0,0,0,.4); border-top:3px solid var(--brass); }
.login-mark{ width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(165deg,#24603c,#102c1c); color:var(--brass-lt); margin-bottom:1rem; }
.login-card h1{ font-family:var(--f-dis); font-size:1.42rem; letter-spacing:-.02em; }
.login-card .sub{ color:var(--muted); font-size:.85rem; margin-top:.25rem; }
.login-form{ margin-top:1.4rem; display:grid; gap:.6rem; }
.login-label{ font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--muted); }
.login-foot{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--hair);
  font-size:.72rem; color:var(--muted-2); text-align:center; letter-spacing:.02em; }
.alert{ display:none; padding:.55rem .75rem; border-radius:var(--r-sm); font-size:.83rem;
  background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-line); }
.alert.on{ display:block; }
.alert.info{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }

/* ============================== SHELL ============================== */
#app{ display:none; min-height:100dvh; }
#app.on{ display:block; }

#sidebar{ position:fixed; inset:0 auto 0 0; width:var(--side); display:flex; flex-direction:column; z-index:60;
  background:linear-gradient(180deg,var(--pine-2) 0%,var(--pine) 60%,#081a10 100%); color:#dfe8e1; }
#sidebar::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(180deg,rgba(216,189,114,.4),rgba(216,189,114,.06) 40%,rgba(0,0,0,.3)); }
.side-head{ padding:1.15rem 1.1rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.brand{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.brand-mark{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex:0 0 32px;
  background:linear-gradient(160deg,var(--brass-lt),var(--brass)); color:#231a03; }
.brand-txt{ min-width:0; }
.brand-txt strong{ display:block; font-family:var(--f-dis); font-size:1.02rem; font-weight:600; color:#fff; letter-spacing:-.01em; }
.brand-txt span{ display:block; font-size:.6rem; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(223,232,225,.45); margin-top:1px; }
.side-search{ padding:.85rem 1.1rem .5rem; }
.side-search input{ width:100%; padding:.46rem .7rem .46rem 1.95rem; font-size:.83rem; border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%237e9186' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.4-3.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:.6rem center; }
.side-search input::placeholder{ color:rgba(223,232,225,.38); }
.side-search input:focus{ outline:none; border-color:rgba(216,189,114,.55); background-color:rgba(255,255,255,.09); }
.side-label{ padding:.65rem 1.1rem .3rem; font-size:.6rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(223,232,225,.4); display:flex; justify-content:space-between; gap:.5rem; }
.club-list{ flex:1; overflow-y:auto; padding:0 .55rem 1rem; }
.club-item{ display:block; width:100%; text-align:left; background:transparent; border:0; color:inherit;
  border-radius:var(--r-sm); padding:.55rem .65rem; position:relative;
  transition:background .12s ease; }
.club-item:hover{ background:rgba(255,255,255,.055); }
.club-item.sel{ background:rgba(255,255,255,.085); }
.club-item.sel::before{ content:""; position:absolute; left:0; top:.42rem; bottom:.42rem; width:2px;
  border-radius:2px; background:var(--brass-lt); }
.club-top{ display:flex; align-items:center; gap:.42rem; min-width:0; }
.club-name{ font-size:.875rem; font-weight:500; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dot{ width:6px; height:6px; border-radius:50%; flex:0 0 6px; background:#5b6a61; }
.dot.live{ background:#5fca8b; }
.club-meta{ font-size:.715rem; color:rgba(223,232,225,.5); margin-top:.1rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.club-counts{ font-size:.665rem; color:rgba(216,189,114,.8); margin-top:.22rem; letter-spacing:.03em;
  font-variant-numeric:tabular-nums; }
.side-foot{ padding:.8rem 1.1rem 1rem; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.side-foot .who{ font-size:.7rem; color:rgba(223,232,225,.45); }
.side-empty{ padding:.9rem 1.1rem; font-size:.8rem; color:rgba(223,232,225,.5); line-height:1.5; }

#main{ margin-left:var(--side); min-height:100dvh; display:flex; flex-direction:column; min-width:0; }
.topbar{ background:var(--panel); border-bottom:1px solid var(--line); padding:.95rem 1.6rem 0;
  position:sticky; top:0; z-index:30; }
.top-row{ display:flex; align-items:flex-start; gap:.9rem; flex-wrap:wrap; }
.top-title{ min-width:0; }
.top-title h1{ font-family:var(--f-dis); font-size:1.34rem; letter-spacing:-.02em; line-height:1.2; }
.top-sub{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; margin-top:.3rem; }
.top-actions{ margin-left:auto; display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; }
.burger{ display:none; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  width:36px; height:36px; align-items:center; justify-content:center; flex:0 0 36px; }
.burger span{ display:block; width:15px; height:1.6px; background:var(--ink-2);
  box-shadow:0 5px 0 var(--ink-2),0 -5px 0 var(--ink-2); }

.chip{ display:inline-flex; align-items:center; gap:.3rem; padding:.1rem .48rem; border-radius:4px;
  background:var(--panel-2); border:1px solid var(--hair); font-size:.715rem; color:var(--muted); }
.chip.live{ background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); font-weight:500; }
.chip.off{ background:var(--panel-3); border-color:var(--line); color:var(--muted); font-weight:500; }

.tabs{ display:flex; gap:.1rem; margin-top:.75rem; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ background:none; border:0; border-bottom:2px solid transparent; padding:.5rem .8rem .55rem;
  font-size:.87rem; font-weight:500; color:var(--muted); white-space:nowrap;
  transition:color .13s ease, border-color .13s ease; }
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--fairway); font-weight:600; border-bottom-color:var(--brass); }
.tab .cnt{ display:inline-block; margin-left:.3rem; font-size:.66rem; background:var(--panel-3); color:var(--muted);
  border-radius:999px; padding:.02rem .34rem; font-weight:600; font-variant-numeric:tabular-nums; }
.tab.on .cnt{ background:var(--brass-wash); color:var(--warn); }

.content{ padding:1.35rem 1.6rem 3.5rem; flex:1; max-width:1480px; width:100%; min-width:0; }

/* ============================== HERO BRIEFING ============================== */
.hero{ position:relative; overflow:hidden; border-radius:12px; padding:1.3rem 1.5rem 1.25rem;
  background:linear-gradient(135deg,#153c26 0%,var(--pine) 62%,#081a10 100%); color:#e6ede8;
  margin-bottom:1.15rem; }
.hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,var(--brass) 0%,var(--brass-lt) 30%,rgba(216,189,114,0) 75%); }
.hero-grid{ display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap; }
.hero-main{ flex:1 1 340px; min-width:0; }
.hero-date{ font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color:var(--brass-lt); font-weight:600; }
.hero-line{ font-family:var(--f-dis); font-size:1.5rem; line-height:1.28; letter-spacing:-.02em;
  margin-top:.45rem; color:#fff; font-weight:400; }
.hero-line b{ font-weight:600; color:var(--brass-lt); }
.hero-note{ margin-top:.6rem; font-size:.845rem; color:rgba(230,237,232,.7); line-height:1.5; }
.hero-note .flag{ color:var(--brass-lt); font-weight:500; }
.hero-side{ flex:0 1 300px; min-width:0; display:grid; gap:.75rem; grid-template-columns:minmax(0,1fr);
  padding-left:1.5rem; border-left:1px solid rgba(255,255,255,.12); }
.hero-lbl{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(230,237,232,.45); font-weight:600; }
.hero-url{ display:flex; align-items:center; gap:.4rem; margin-top:.35rem; min-width:0; }
.hero-url code{ flex:1 1 auto; font-family:var(--f-mono); font-size:.755rem; color:#dfe8e1; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11); border-radius:6px; padding:.3rem .5rem; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-toggle{ display:flex; align-items:center; gap:.7rem; }
.hero-toggle .txt{ flex:1; min-width:0; }
.hero-toggle .txt b{ display:block; font-size:.82rem; font-weight:600; color:#fff; }
.hero-toggle .txt small{ display:block; font-size:.715rem; color:rgba(230,237,232,.55); line-height:1.4; margin-top:.1rem; }

/* ============================== KPI TILES ============================== */
.kpis{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.7rem; margin-bottom:1.15rem; }
.kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:.85rem .95rem .8rem;
  display:flex; flex-direction:column; min-width:0; text-align:left; position:relative;
  transition:border-color .13s ease, background .13s ease; }
button.kpi{ cursor:pointer; }
button.kpi:hover{ border-color:#c6d2c5; background:var(--panel-2); }
.kpi .k{ font-size:.635rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
.kpi .v{ font-family:var(--f-dis); font-weight:600; font-size:2.05rem; line-height:1.08; margin-top:.35rem;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; color:var(--ink); }
.kpi .v small{ font-family:var(--f-ui); font-size:.8rem; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:.15rem; }
.kpi .d{ font-size:.735rem; color:var(--muted); margin-top:.25rem; line-height:1.35; }
.kpi .foot{ margin-top:auto; padding-top:.5rem; display:flex; align-items:flex-end; gap:.5rem; justify-content:space-between; }
.kpi.attn{ border-color:var(--warn-line); background:linear-gradient(180deg,#fefbf2,#fff 55%); }
.kpi.attn .v{ color:var(--warn); }
.delta{ display:inline-flex; align-items:center; gap:.2rem; font-size:.715rem; font-weight:600;
  padding:.06rem .35rem; border-radius:4px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.delta.up{ background:var(--ok-bg); color:var(--ok); }
.delta.down{ background:var(--bad-bg); color:var(--bad); }
.delta.flat{ background:var(--panel-3); color:var(--muted); }

/* ============================== CARDS ============================== */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); min-width:0; }
.card-h{ padding:.8rem 1rem; border-bottom:1px solid var(--hair); display:flex; align-items:center;
  justify-content:space-between; gap:.7rem; flex-wrap:wrap; }
.card-h h3{ font-size:.925rem; font-weight:600; }
.card-h .hint{ font-size:.735rem; color:var(--muted); font-weight:400; }
.card-b{ padding:1rem; min-width:0; }
.card-b.flush{ padding:0; }
.card-f{ padding:.6rem 1rem; border-top:1px solid var(--hair); background:var(--panel-2);
  border-radius:0 0 var(--r) var(--r); display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; }

.grid-2{ display:grid; grid-template-columns:1.4fr 1fr; gap:.9rem; align-items:start; }
.grid-2.even{ grid-template-columns:1fr 1fr; }
.stack{ display:grid; gap:.9rem; }
.chart-wrap{ width:100%; min-width:0; }
.chart-wrap svg{ display:block; width:100%; height:auto; }

/* ============================== TEE SHEET ============================== */
.daybar{ display:flex; align-items:stretch; gap:.5rem; margin-bottom:.9rem; flex-wrap:wrap; }
.daynav{ display:flex; align-items:center; gap:.3rem; }
.daynav button{ width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--panel); color:var(--ink-2); display:grid; place-items:center; font-size:.85rem;
  transition:background .12s ease, border-color .12s ease; }
.daynav button:hover{ background:var(--panel-2); border-color:#c6d2c5; }
.daystrip{ flex:1 1 380px; display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; min-width:0; }
.dayb{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:.4rem .25rem .35rem;
  text-align:center; min-width:0; transition:border-color .12s ease, background .12s ease; }
.dayb:hover{ border-color:#c1cfc1; background:var(--panel-2); }
.dayb .wd{ font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.dayb .dn{ font-family:var(--f-dis); font-size:1.06rem; font-weight:600; line-height:1.2; margin-top:.05rem;
  font-variant-numeric:tabular-nums; }
.dayb .ld{ height:3px; border-radius:2px; background:var(--hair); margin-top:.3rem; overflow:hidden; }
.dayb .ld i{ display:block; height:100%; background:var(--fairway); border-radius:2px; }
.dayb.sel{ border-color:var(--fairway); background:var(--panel); box-shadow:inset 0 0 0 1px var(--fairway); }
.dayb.sel .wd{ color:var(--fairway); }
.dayb.today .dn{ color:var(--brass); }
.dayb.today .dn::after{ content:"·"; }
.dayb.past{ opacity:.6; }

.sheet-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.9rem 1rem; border-bottom:1px solid var(--hair); }
.sheet-head .dt{ font-family:var(--f-dis); font-size:1.16rem; font-weight:600; letter-spacing:-.02em; }
.sheet-head .sub{ font-size:.775rem; color:var(--muted); margin-top:.15rem; }
.sheet-stats{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.sheet-stat{ min-width:0; }
.sheet-stat .k{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.sheet-stat .v{ font-family:var(--f-dis); font-size:1.16rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.25; }

.sheet{ display:block; }
.slot{ display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:0;
  border-bottom:1px solid var(--hair); position:relative; }
.slot:last-child{ border-bottom:0; }
.slot .t{ font-family:var(--f-mono); font-size:.79rem; font-weight:500; color:var(--ink-2); text-align:right;
  padding:.5rem .8rem; border-right:1px solid var(--hair); align-self:stretch; display:flex;
  align-items:center; justify-content:flex-end; white-space:nowrap; }
.slot .body{ padding:.5rem .9rem; min-width:0; }
.slot .act{ padding:.4rem .7rem .4rem 0; display:flex; gap:.25rem; justify-content:flex-end; flex-wrap:wrap; }
.slot.free{ background:var(--panel-2); }
.slot.free .t{ color:var(--muted-2); font-weight:400; }
.slot.free .body{ font-size:.775rem; color:var(--muted-2); letter-spacing:.02em; }
.slot.taken{ background:var(--panel); }
.slot.taken::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--fairway); }
.slot.taken.s-pending::before{ background:var(--brass); }
.slot.taken.s-cancelled::before{ background:#c3b3b0; }
.slot.taken:hover{ background:var(--panel-2); }
.slot.past .t, .slot.past .body{ opacity:.72; }
.slot.now{ box-shadow:inset 0 1px 0 var(--brass), inset 0 -1px 0 var(--brass); }
.party{ display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; min-width:0; }
.party b{ font-size:.885rem; font-weight:600; }
.party .meta{ font-size:.755rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.party + .party{ margin-top:.35rem; padding-top:.35rem; border-top:1px dashed var(--hair); }
.slot-note{ font-size:.745rem; color:var(--muted); margin-top:.15rem; font-style:italic;
  overflow:hidden; text-overflow:ellipsis; }
.nowline{ display:flex; align-items:center; gap:.55rem; padding:.3rem .9rem; background:var(--brass-wash);
  border-bottom:1px solid var(--hair); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--warn); font-weight:600; }
.nowline i{ flex:1; height:1px; background:var(--brass-lt); }

/* four pips = the four places on a tee time */
.pips{ display:inline-flex; gap:2.5px; vertical-align:middle; }
.pip{ width:7px; height:7px; border-radius:50%; border:1px solid #c2cdc4; background:transparent; }
.pip.on{ background:var(--fairway); border-color:var(--fairway); }
.pip.pending{ background:var(--brass); border-color:var(--brass); }
.pip.over{ background:var(--bad); border-color:var(--bad); }

/* ============================== TABLES ============================== */
.toolbar{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.85rem; }
.toolbar .grow{ flex:1 1 230px; min-width:150px; }
.toolbar .spacer{ flex:1 1 auto; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
table{ width:100%; border-collapse:collapse; font-size:.855rem; background:var(--panel); min-width:720px; }
th,td{ text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--hair); vertical-align:middle; }
th{ background:var(--panel-2); font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); white-space:nowrap; position:sticky; top:0; z-index:2; }
th:first-child, td:first-child{ padding-left:1rem; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr{ transition:background .1s ease; }
tbody tr:hover{ background:var(--panel-2); }
tbody tr.picked{ background:var(--brass-wash); }
tbody tr.picked:hover{ background:#f3ead2; }
td .sub{ font-size:.745rem; color:var(--muted); }
td.actions{ white-space:nowrap; text-align:right; padding-right:1rem; }
td.actions .btn{ margin-left:.22rem; }
td.pick, th.pick{ width:34px; padding-right:0; }
input[type=checkbox]{ width:15px; height:15px; accent-color:var(--fairway); cursor:pointer; margin:0; vertical-align:middle; }

.badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.08rem .42rem; border-radius:4px;
  font-size:.665rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border:1px solid transparent;
  white-space:nowrap; }
.b-pending{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.b-confirmed{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
.b-cancelled{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line); }
.b-member{ background:#eaf0f8; color:#2b4c7e; border-color:#d5e0ef; }
.b-guest{ background:var(--panel-3); color:var(--muted); border-color:var(--line); }
.b-demo{ background:#f4eef8; color:#6a4590; border-color:#e3d6ef; }
.b-tier{ background:var(--brass-wash); color:var(--warn); border-color:var(--warn-line); }

/* the selection bar that appears when rows are ticked */
.bulkbar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.55rem .8rem .55rem 1rem;
  background:var(--brass-wash); border-bottom:1px solid var(--warn-line); font-size:.82rem; color:var(--warn);
  font-weight:500; }
.bulkbar .spacer{ flex:1 1 auto; }

/* ============================== SMALL LISTS ============================== */
.qlist{ display:block; }
.qrow{ display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem; border-bottom:1px solid var(--hair); min-width:0; }
.qrow:last-child{ border-bottom:0; }
.qrow:hover{ background:var(--panel-2); }
.qrow .when{ flex:0 0 74px; text-align:right; }
.qrow .when b{ display:block; font-family:var(--f-mono); font-size:.775rem; font-weight:500; }
.qrow .when span{ display:block; font-size:.68rem; color:var(--muted); letter-spacing:.03em; }
.qrow .who{ flex:1 1 auto; min-width:0; }
.qrow .who b{ font-size:.865rem; font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qrow .who .sub{ font-size:.735rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qrow .qact{ display:flex; gap:.25rem; flex:0 0 auto; }

.mixlist{ display:grid; gap:.7rem; }
.mixrow{ display:grid; grid-template-columns:1fr auto; gap:.3rem .6rem; align-items:baseline; }
.mixrow .nm{ font-size:.82rem; color:var(--ink-2); }
.mixrow .vl{ font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; }
.mixrow .bar{ grid-column:1/-1; height:4px; border-radius:2px; background:var(--hair); overflow:hidden; }
.mixrow .bar i{ display:block; height:100%; border-radius:2px; background:var(--fairway); }

.legend{ display:grid; gap:.4rem; margin-top:.85rem; }
.legend-row{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; }
.legend-row .sw{ width:9px; height:9px; border-radius:2px; flex:0 0 9px; }
.legend-row .nm{ color:var(--ink-2); }
.legend-row .vl{ margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; }
.legend-row .pc{ color:var(--muted); font-size:.755rem; width:40px; text-align:right; font-variant-numeric:tabular-nums; }
.stackbar{ display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--hair); }
.stackbar i{ display:block; height:100%; }

/* ============================== MESSAGES ============================== */
.msg-list{ display:grid; gap:.7rem; }
.msg{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem; }
.msg-h{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.msg-h b{ font-size:.9rem; }
.msg-h .em{ font-size:.78rem; color:var(--muted); }
.msg-h .when{ margin-left:auto; font-size:.72rem; color:var(--muted-2); white-space:nowrap; }
.msg-body{ margin-top:.5rem; font-size:.875rem; color:var(--ink-2); white-space:pre-wrap; word-break:break-word;
  padding-left:.75rem; border-left:2px solid var(--hair); }
.msg-f{ margin-top:.75rem; padding-top:.65rem; border-top:1px solid var(--hair); display:flex; gap:.4rem; flex-wrap:wrap; }

/* ============================== STATES ============================== */
.empty{ text-align:center; padding:2.6rem 1.25rem; color:var(--muted); }
.empty .ico{ font-size:1.5rem; opacity:.45; }
.empty h4{ margin-top:.5rem; font-size:.95rem; color:var(--ink); }
.empty p{ font-size:.83rem; margin-top:.25rem; max-width:44ch; margin-left:auto; margin-right:auto; line-height:1.5; }
.empty .btn{ margin-top:1rem; }
.loading{ display:grid; gap:.55rem; }
.sk{ border-radius:var(--r-sm); background:linear-gradient(90deg,#e8ebe5 25%,#f4f6f1 50%,#e8ebe5 75%);
  background-size:200% 100%; animation:sh 1.2s ease-in-out infinite; height:14px; }
.sk.row{ height:42px; }
.sk.tile{ height:104px; border-radius:var(--r); }
.sk.block{ height:250px; border-radius:var(--r); }
@keyframes sh{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .sk{ animation:none; } *{ transition:none !important; } }

/* ============================== MODAL / TOAST ============================== */
.overlay{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:1.25rem;
  background:rgba(8,25,15,.55); }
.overlay.on{ display:flex; }
.modal-card{ background:var(--panel); border-radius:12px; width:min(420px,100%); padding:1.35rem;
  box-shadow:0 24px 60px rgba(0,0,0,.35); border-top:3px solid var(--brass); }
.modal-card h3{ font-size:1.02rem; }
.modal-card p{ font-size:.86rem; color:var(--muted); margin-top:.45rem; line-height:1.55; word-break:break-word; }
.modal-actions{ display:flex; gap:.45rem; justify-content:flex-end; margin-top:1.25rem; }
.keys-card{ width:min(460px,100%); }
.keys-list{ display:grid; gap:.4rem; margin-top:.9rem; }
.keys-row{ display:flex; align-items:center; gap:.7rem; font-size:.84rem; color:var(--ink-2); }
.keys-row kbd{ font-family:var(--f-mono); font-size:.72rem; background:var(--panel-3); border:1px solid var(--line);
  border-bottom-width:2px; border-radius:5px; padding:.1rem .38rem; min-width:22px; text-align:center; color:var(--ink); }
.keys-row .sp{ flex:1; border-bottom:1px dotted var(--line); }

#toasts{ position:fixed; right:1rem; bottom:1rem; z-index:110; display:grid; gap:.45rem;
  max-width:min(340px,calc(100vw - 2rem)); }
.toast{ background:var(--pine); color:#e6ede8; border-radius:8px; padding:.6rem .85rem; font-size:.83rem;
  box-shadow:0 12px 30px rgba(0,0,0,.3); border-left:3px solid var(--brass); }
.toast.ok{ border-left-color:#5fca8b; }
.toast.bad{ border-left-color:#e08a7c; }

#scrim{ position:fixed; inset:0; background:rgba(8,25,15,.5); z-index:55; display:none; }
#scrim.on{ display:block; }

/* ============================== RESPONSIVE ============================== */
@media (max-width:1300px){ .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1180px){
  .grid-2, .grid-2.even{ grid-template-columns:1fr; }
  .hero-side{ padding-left:0; border-left:0; padding-top:1rem; border-top:1px solid rgba(255,255,255,.12);
    flex:1 1 100%; }
}
@media (max-width:900px){
  #sidebar{ transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.35); }
  #sidebar.open{ transform:none; }
  #main{ margin-left:0; }
  .burger{ display:flex; }
  .topbar{ padding:.8rem 1rem 0; }
  .content{ padding:1rem 1rem 3.5rem; }
  .top-actions{ margin-left:auto; }
}
@media (max-width:620px){
  body{ font-size:14px; }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
  .kpi .v{ font-size:1.6rem; }
  .kpi .d{ font-size:.7rem; }
  .hero{ padding:1.05rem 1.05rem 1rem; }
  .hero-line{ font-size:1.24rem; }
  .top-title h1{ font-size:1.12rem; }
  .top-actions{ width:100%; margin-left:0; margin-top:.5rem; }
  .top-actions .btn{ flex:1 1 auto; }
  .daystrip{ gap:.2rem; }
  .dayb{ padding:.35rem .1rem .3rem; }
  .dayb .dn{ font-size:.95rem; }
  .slot{ grid-template-columns:66px 1fr; }
  .slot .t{ padding:.45rem .55rem; font-size:.735rem; }
  .slot .act{ grid-column:2; padding:0 .9rem .55rem; justify-content:flex-start; }
  .slot .body{ padding:.45rem .9rem .35rem; }
  .sheet-stats{ gap:.9rem; }
  .qrow{ padding:.55rem .8rem; gap:.55rem; }
  .qrow .when{ flex:0 0 62px; }
  .qrow.wrapact{ flex-wrap:wrap; }
  .qrow .qact{ margin-left:auto; }
  .msg-h .when{ margin-left:0; width:100%; }
}

/* ============================== PRINT ==============================
   The morning tee sheet, on paper. Chrome's own print stylesheet drops
   backgrounds, so status is carried by rules and weight, not fills. */
@media print{
  @page{ margin:14mm; }
  body{ background:#fff; font-size:11pt; }
  #sidebar, #scrim, .topbar .top-actions, .burger, .tabs, .daybar, #toasts,
  .overlay, .card-f.no-print, .slot .act, .kpi .foot{ display:none !important; }
  #main{ margin-left:0; }
  .topbar{ position:static; border-bottom:1px solid #999; padding:0 0 6pt; }
  .content{ padding:10pt 0 0; max-width:none; }
  .card, .sheet-card{ border:1px solid #999; border-radius:0; break-inside:auto; }
  .slot{ break-inside:avoid; border-bottom:1px solid #ccc; grid-template-columns:80pt 1fr; }
  .slot.free .body{ color:#777; }
  .slot.taken::before{ display:none; }
  .slot.free{ background:#fff; }
  .nowline{ background:#fff; border-bottom:1px solid #000; }
  .badge{ border:1px solid #999; }
  .hero, .empty .btn{ display:none !important; }
}