/* Luxury skin for the member app (/m/) and the public booking page: fairway green, Teton navy and Snake River blue on cool mist,
   a serif for display text at 22px and up only, hairlines instead of shadows, 4px radius, 48px targets. It only uses the shared
   variable names (--bg --panel --ink --muted --line --accent --cta --r --tap ...) that components.css defines, light and dark, and
   adds --river, --river-soft and --leaf. The colours are the club's brand: /s/brand.css (Admin, Brand) loads after this file and wins
   for bg, panel, ink and accent. */

/* ---- palette (Aleksandra, 9 Oct 2026: deep green like golf, navy, a lighter blue like the Snake River; no marble) ---- */
:root{
  --bg:#F0F6F4; --panel:#FBFDFC; --ink:#0D2237; --muted:#4A6075; --line:#D2E0E0;
  --accent:#17694F; --accent-fill:#2E8B67; --cta:#0F4A38; --cta-ink:#F4FBF8;
  --ok:#237A4B; --warn:#94560A; --bad:#A12E2E;
  --river:#1E6F94; --river-soft:#DDEEF5; --leaf:#2E8B67; --navy:#0D2237;
  --sh-sheet:0 -8px 40px rgba(8,30,50,.2);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07151E; --panel:#0D2230; --ink:#E6F1F3; --muted:#92ADBA; --line:#1B3847;
    --accent:#6FD0A2; --accent-fill:#2E8B67; --cta:#52C48F; --cta-ink:#04170F;
    --ok:#7FD6A4; --warn:#E6B566; --bad:#F2A09A;
    --river:#8CCBE2; --river-soft:#10303F; --leaf:#52C48F; --navy:#E6F1F3; --sh-sheet:0 -8px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#07151E; --panel:#0D2230; --ink:#E6F1F3; --muted:#92ADBA; --line:#1B3847;
  --accent:#6FD0A2; --accent-fill:#2E8B67; --cta:#52C48F; --cta-ink:#04170F;
  --ok:#7FD6A4; --warn:#E6B566; --bad:#F2A09A;
  --river:#8CCBE2; --river-soft:#10303F; --leaf:#52C48F; --navy:#E6F1F3; --sh-sheet:0 -8px 40px rgba(0,0,0,.6);
}

:root{
  --gutter:20px;
  --serif:var(--font-serif);
  --qr-bg:#ffffff; --qr-ink:#0a1a26;
  --on-bad:#fff; --on-warn:#fff;      /* text on a --bad / --warn fill: white on the light palette, ink on the dark one */
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--on-bad:#07151E;--on-warn:#07151E}}
:root[data-theme="dark"]{--on-bad:#07151E;--on-warn:#07151E}
.btn.danger,.toast-err{color:var(--on-bad)}
.offlineline{color:var(--on-warn)}
html{scroll-behavior:auto}
body{font-size:1rem;line-height:1.5;text-rendering:optimizeLegibility;overflow-wrap:break-word}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{cursor:pointer}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- type scale: Display 34/38, H1 28/32, H2 22/28, Title 17/24, Body 16/24, Small 14/20, Caption 12/16 ---- */
.display{font:500 clamp(2rem,7vw,2.375rem)/1.12 var(--serif);letter-spacing:.005em}
.h1{font:500 1.75rem/2rem var(--serif);letter-spacing:.005em}
.h2{font:500 1.375rem/1.75rem var(--serif)}
.title{font:600 1.0625rem/1.5rem var(--font-sans)}
.small{font-size:.875rem;line-height:1.25rem}
.caption{font-size:.75rem;line-height:1rem}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.eyebrow{font:600 .75rem/1rem var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:lining-nums tabular-nums}
.hair{border:0;border-top:1px solid var(--line);margin:0}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap1{gap:4px}.gap2{gap:8px}.gap3{gap:12px}.gap4{gap:16px}.gap6{gap:24px}
.grow{flex:1 1 auto;min-width:0}
.right{margin-left:auto}
.tc{text-align:center}

/* ---- buttons, fields ---- */
.btn{letter-spacing:.02em;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center}
.btn.primary:hover{opacity:.92}
.btn.ghost{background:transparent}
.btn.quiet{background:transparent;border-color:transparent;color:var(--accent);padding:0 12px}
.btn.block{display:flex;width:100%}
.btn.busy::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.field label{font-size:.8125rem;color:var(--muted);letter-spacing:.02em}
.field input,.field textarea{background:var(--panel)}
.field input:focus-visible,.field textarea:focus-visible{outline-offset:0;border-color:var(--accent)}
.field .help{font-size:.8125rem;color:var(--muted)}
.field.bad input{border-color:var(--bad)}
.field .err{font-size:.8125rem;color:var(--bad)}
.linkbtn{font-size:inherit}

/* ---- surfaces ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card.flat{padding:0;overflow:hidden}
.card.flat>.pl-row,.card.flat>.fee,.card.flat>.fee.total{padding-left:18px;padding-right:18px}
.card.flat>.pl-row:first-child{padding-top:14px}
.sec{margin-top:32px}
.sec>.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec>.sec-head .linkbtn{min-height:32px}
.phead{padding:24px 0 8px}
.phead .eyebrow{margin-bottom:6px;color:var(--accent)}
.phead .sub{color:var(--muted);margin-top:6px}
.phead .acts{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

/* a list row: icon, title, sub, trailing */
.lrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 4px;background:none;border:0;
  border-bottom:1px solid var(--line);text-align:left;color:inherit;text-decoration:none}
.lrow:last-child{border-bottom:0}
button.lrow:active,a.lrow:active{background:var(--line)}
.lrow .li{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--accent);background:var(--bg)}
.lrow.noicon{grid-template-columns:1fr auto}
.lrow .lt{font-weight:500;line-height:1.35}
.lrow .ls{font-size:.875rem;line-height:1.3rem;color:var(--muted)}
.lrow .lx{display:flex;align-items:center;gap:8px;color:var(--muted)}
.cardlist{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cardlist.in-card{border:0}
.badge{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--cta);color:var(--cta-ink);font-size:.75rem;font-weight:600;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}

/* chips: outlined, ink text; the icon or the words carry the meaning, never colour alone */
.chip{background:transparent;border:1px solid var(--line);padding:5px 10px;letter-spacing:.03em;color:var(--ink);font-size:.75rem;line-height:1rem;white-space:nowrap}
.chip.ok,.chip.warn,.chip.bad{color:var(--ink)}
.chip.ok svg{color:var(--ok)} .chip.warn svg{color:var(--warn)} .chip.bad svg{color:var(--bad)}
.chip.bronze{border-color:var(--accent);color:var(--accent)}
.chip.river{background:var(--river-soft);border-color:transparent;color:var(--river)}
.chip.leaf{border-color:var(--leaf);color:var(--accent)}
.chip.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* inline notices */
.note{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);background:var(--panel);font-size:.9375rem;line-height:1.4}
.note .nt{font-weight:600;display:block;margin-bottom:2px}
.note .na{margin-top:8px}
.note svg{margin-top:2px;color:var(--accent)}
.note.warn{border-left-color:var(--warn)} .note.warn svg{color:var(--warn)}
.note.bad{border-left-color:var(--bad)} .note.bad svg{color:var(--bad)}
.note.ok{border-left-color:var(--ok)} .note.ok svg{color:var(--ok)}
.note.quiet{background:transparent}
.notes{display:flex;flex-direction:column;gap:10px}

/* empty and error */
.empty{padding:40px 12px}
.empty .ei{width:52px;height:52px;margin:0 auto 14px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--accent)}
.empty .h2{margin-bottom:6px;color:var(--ink)}
.empty p{max-width:34ch;margin:0 auto}
.empty .btn{margin-top:18px}
.sk{display:block;background:linear-gradient(90deg,var(--line) 25%,transparent 50%,var(--line) 75%);background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:var(--r)}
.sk-row{height:64px;margin-bottom:10px}
.sk-line{height:14px;margin:8px 0;width:60%}
.sk-title{height:30px;width:55%;margin:24px 0 12px}
.sk-card{height:150px}

/* ---- segmented control, stepper, switch ---- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:2px;gap:2px;max-width:100%}
.seg button{min-height:44px;min-width:56px;padding:0 16px;border:0;border-radius:2px;background:transparent;color:var(--ink);font-weight:500;letter-spacing:.02em}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{background:var(--cta);color:var(--cta-ink)}
.seg button{white-space:nowrap}
.seg.full{display:flex;width:100%}
.seg.full button{padding:0 8px}
.seg.full button{flex:1}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.stepper button{width:48px;height:48px;border:0;background:transparent;display:grid;place-items:center;color:var(--ink)}
.stepper button:disabled{color:var(--muted);opacity:.45;cursor:default}
.stepper output{min-width:44px;text-align:center;font:500 1.375rem/1 var(--serif);font-variant-numeric:lining-nums}
.switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--ink)}
.switch .track{width:40px;height:24px;border-radius:12px;border:1.5px solid var(--muted);position:relative;transition:background var(--dur-2),border-color var(--dur-2)}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:transform var(--dur-2) var(--ease),background var(--dur-2)}
.switch[aria-checked="true"] .track{background:var(--cta);border-color:var(--cta)}
.switch[aria-checked="true"] .track::after{transform:translateX(16px);background:var(--cta-ink)}

/* ---- avatar ---- */
.avatar{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;font:600 .8125rem/1 var(--font-sans);letter-spacing:.06em;color:var(--accent);flex:none}
.avatar.big{width:64px;height:64px;font-size:1.125rem}

/* ---- date strip with heat bar ---- */
.dstrip-wrap{margin:0 calc(-1 * var(--gutter))}
.dstrip{position:relative;display:flex;gap:8px;overflow-x:auto;padding:4px var(--gutter) 10px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.dstrip::-webkit-scrollbar{display:none}
.dday{flex:0 0 58px;min-height:88px;padding:8px 0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:2px;color:var(--ink);scroll-snap-align:center;position:relative}
.dday .dow{font-size:.75rem;line-height:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dday .dn{font:500 1.5rem/1.1 var(--serif);font-variant-numeric:lining-nums}
.dday .heat{position:relative;width:30px;height:4px;border-radius:2px;overflow:hidden}
.dday .heat::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.18}
.dday .heat i{position:absolute;left:0;top:0;bottom:0;width:var(--fill,0%);background:currentColor;opacity:.85}
.dday .today{position:absolute;top:4px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.dday[aria-pressed="true"]{background:var(--cta);border-color:var(--cta);color:var(--cta-ink)}
.dday[aria-pressed="true"] .dow{color:var(--cta-ink);opacity:.8}
.dday[aria-pressed="true"] .today{background:var(--cta-ink)}
.dday.locked{background:transparent;border-style:dashed;color:var(--muted)}
.dday.locked .dn{opacity:.75}
.dday.locked[aria-pressed="true"]{background:var(--panel);color:var(--ink);border:1px solid var(--ink)}
.dday.locked[aria-pressed="true"] .dow{color:var(--muted);opacity:1}
.dmonth{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}

/* ---- tee time rows ---- */
.tgroup{margin-top:24px}
.tgroup>.eyebrow{display:flex;align-items:center;gap:12px;padding-bottom:8px}
.tgroup>.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.trow{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:8px;width:100%;min-height:68px;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:inherit;position:relative}
button.trow{cursor:pointer}
button.trow:active{background:var(--line)}
.trow:last-child{border-bottom:0}
.tm{display:inline-flex;align-items:baseline;white-space:nowrap}
.tm .tt{font:500 1.75rem/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.005em}
.tm .ap{font:600 .6875rem/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;margin-left:5px;color:var(--muted)}
.tmid{display:flex;flex-direction:column;gap:5px;min-width:0}
.tnote{font-size:.875rem;line-height:1.25rem;color:var(--muted)}
.tact{display:flex;align-items:center;gap:6px;color:var(--muted)}
.trow.is-full .tm .tt,.trow.is-locked .tm .tt{color:var(--muted)}
.trow.is-blocked{background:repeating-linear-gradient(135deg,transparent 0 7px,var(--line) 7px 8px);padding-left:8px;padding-right:8px;margin:0 -8px;width:calc(100% + 16px)}
.trow.is-blocked .tm .tt{color:var(--muted)}
.trow.is-blocked .tnote{color:var(--ink)}
.trow.is-short .tm .tt{color:var(--muted)}
.trow.is-mine{box-shadow:inset 2px 0 0 var(--accent);padding-left:12px;margin-left:-12px;width:calc(100% + 12px)}
.trow .btn{min-height:var(--tap);padding:0 14px;font-size:.9375rem}
.seats{display:inline-flex;gap:7px;align-items:center}
.seat{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--muted);position:relative;flex:none}
.seat.taken{background:var(--ink);border-color:var(--ink)}
.seat.held{border-style:dashed;border-color:var(--ink)}
.seat.mine{background:var(--accent);border-color:var(--accent)}
.seat.mine::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6.5px;border:solid var(--panel);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8125rem;color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:7px}

/* ---- hold bar ---- */
.holdbar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;padding-bottom:10px}
.holdbar .bar{grid-column:1/-1;height:3px;background:var(--line);position:relative;overflow:hidden;border-radius:2px;order:2}
.holdbar .bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left center;transform:scaleX(var(--left,1))}
.holdbar .lbl{font-size:.8125rem;color:var(--muted);letter-spacing:.02em}
.holdbar .clk{font:600 .9375rem/1 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.holdbar.low .bar i{background:var(--bad)}
.holdbar.low .clk{color:var(--bad)}

/* ---- the scene: a Teton ridge, the fairway and the Snake River (Home hero, member card, confirmation seal) ----
   Always dark, so it sets its own light-on-dark colours for everything inside it. */
.scene{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r);border:1px solid rgba(255,255,255,.12);background:#0B2740;color:#F3FAF8;
  --ink:#F3FAF8;--muted:#C6DCE3;--line:rgba(255,255,255,.3);--accent:#A8DCEE;--panel:rgba(6,28,46,.5);--bg:rgba(6,28,46,.4)}
.scene::before{content:"";position:absolute;inset:0;z-index:-2;background:#0A2442 url(/m/scene.svg) 50% 100%/100% auto no-repeat}
@media (min-width:560px){.scene::before{background-size:cover;background-position:70% 100%}}
.scene::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 55% at 88% 0%,rgba(63,141,182,.38),rgba(63,141,182,0) 62%),linear-gradient(180deg,rgba(4,18,32,.28),rgba(4,18,32,0) 55%)}
.scene .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38);color:#fff}
.scene .chip.ok svg{color:#7FD6A4}
.scene .seal circle{fill:rgba(168,220,238,.14);stroke:#A8DCEE}
.scene .seal path{stroke:#fff}

/* ---- QR ---- */
.qrbox{background:var(--qr-bg);color:var(--qr-ink);padding:16px;border:1px solid var(--line);border-radius:var(--r);display:inline-block;line-height:0}
.qrbox svg{display:block;width:min(64vw,264px);height:auto}
.qrbox.sm svg{width:min(56vw,208px)}

/* ---- lists of facts ---- */
.kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
dl.kvs{margin:0}
.fee{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-variant-numeric:tabular-nums}
.fee.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:600}
.fee.total .amt{font:500 1.375rem/1.3 var(--serif)}

/* ---- sheets get the serif title and calmer chrome ---- */
.sheet-head h2{font:500 1.375rem/1.75rem var(--serif)}
.sheet-head{padding-top:10px}
.sheet-body{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.sheet .btnrow{margin-top:20px}
.sheet .btnrow .btn{min-width:40%}
.scrim{background:rgba(5,22,36,.55)}

/* ---- seal (confirmation) ---- */
.seal{width:84px;height:84px;display:block;margin:0 auto}
.seal circle{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:252;stroke-dashoffset:0}
.seal path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:0}
.seal.draw circle{animation:sealc .9s var(--ease) both}
.seal.draw path{animation:sealp .5s .55s var(--ease) both}
@keyframes sealc{from{stroke-dashoffset:252}to{stroke-dashoffset:0}}
@keyframes sealp{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rise{animation:rise var(--dur-3) var(--ease) both}

/* nested sheets: each scrim dims the sheet beneath it, each sheet sits above its own scrim */
.sheet~.scrim{z-index:62}.sheet~.scrim~.sheet{z-index:63}
.sheet~.scrim~.sheet~.scrim{z-index:64}.sheet~.scrim~.sheet~.scrim~.sheet{z-index:65}
[tabindex="-1"]:focus{outline:0}

.udot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* member and public targets are 48px */
.linkbtn,.iconbtn,.selectbtn,.seg button,.switch,.pbtn,.btn.quiet{min-height:var(--tap)}
.iconbtn{min-width:var(--tap)}
.dd-item{min-height:var(--tap)}
.seg button{min-width:56px}