:root{
  --green:#5d745c;--green2:#3D6322;--gold:#D9A441;--white:#fff;
  --page:#FAF7EF;--ink:#1A1A1A;--muted:#7A7563;--border:#E0DCC8;
  --stripe:#F3F1E6;--shadow:rgba(0,0,0,.08);--sky:#3D6322;
  --orange:#BF360C;--muni:#5C6BC0;--red:#BE1E2D;--cream:#FAF7EF;

  /* Locked color palette v1.0 — course card v11, scoped to .card so the
     rest of the app (header, modals, type-color bands) is untouched until
     its own redesign pass. */
  --pine:#234C3D;--sage:#5D735B;--tee-red:#BE4938;--sand:#EAE1CB;
  --offwhite:#F7F4EC;--dark-text:#122B22;--card-border:#D9D2C1;--success:#6C8A67;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
html{overscroll-behavior-y:contain}
body{background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;min-height:100vh;line-height:1.5;overscroll-behavior-y:contain}

/* ── HEADER ── */
header{background:var(--cream);border-bottom:1px solid var(--border);padding:0;position:sticky;top:0;z-index:200;box-shadow:0 2px 10px var(--shadow)}
/* Ensure scrolled-to content clears the sticky header on mobile */
@media(max-width:580px){
  html{scroll-padding-top:70px}
}

/* Logo row — light cream like the rest of the header now that the logo has dark text */
.hd-logo-row{display:flex;justify-content:space-between;align-items:center;background:var(--cream);padding:14px 18px 8px;transition:padding .25s ease}
.header-logo{height:77px;width:auto;display:block;transition:height .25s ease,width .25s ease}
.hamburger-btn{background:none;border:none;color:var(--green2);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
.hamburger-btn:hover{opacity:.7}
.hamburger-label{display:none}

/* MOBILE: logo centered on its own row, hamburger drops to a full-width green bar below it — matches the mockup instead of sitting beside the logo desktop-style */
@media(max-width:580px){
  .hd-logo-row{flex-direction:row;justify-content:space-between;align-items:center;padding:10px 14px}
  .header-logo{height:auto;width:min(200px,52vw);margin:0}
  .hamburger-btn{width:auto;background:none;color:var(--pine);padding:4px;margin-top:0;border-radius:0;gap:0;border:none}
  .hamburger-label{display:none}
  .hamburger-btn:hover{opacity:1}
  .hamburger-btn:active{opacity:.7}
}

/* Content area below the logo row — holds search/controls */
.hd-content{padding:6px 18px 10px;transition:padding .25s ease}

/* COLLAPSED STATE — mobile only, triggered on scroll down */
@media(max-width:580px){
  header.collapsed .hd-logo-row{padding:8px 0 0}
  header.collapsed .header-logo{width:min(190px,46vw)}
  header.collapsed .hamburger-btn{padding:8px 0;margin-top:8px}
  header.collapsed .hd-content{padding-top:4px}
  header.collapsed .search-bar,
  header.collapsed .name-bar,
  header.collapsed .date-bar,
  header.collapsed .more-search-toggle,
  header.collapsed .more-search-panel,
  header.collapsed .tf-row{
    max-height:0;opacity:0;margin:0;padding:0;border:none;overflow:hidden;
  }
  .search-bar,.name-bar,.date-bar,.tf-row{
    max-height:300px;opacity:1;overflow:hidden;
    transition:max-height .25s ease,opacity .2s ease,margin .25s ease,padding .25s ease;
  }
}

/* iOS Safari auto-zooms the whole page on focus for any text input/select
   under 16px, then leaves the page zoomed in after the keyboard closes —
   this is the "goofy"/stuck-zoomed behavior after searching on mobile.
   Forcing every field to 16px here removes the trigger at the source,
   so the page never zooms in the first place and stays normal after submit. */
@media(max-width:580px){
  .zip-in,.rad-sel,.name-in,.date-in,.field-input,.field-select,
  .teesheet-day-input,.teesheet-mini-input,.teesheet-mini-notes,
  .fallback-textarea,.modal-field textarea,#teesheet-title{
    font-size:16px!important;
  }
}

/* SEARCH BAR */
.search-bar{background:var(--stripe);border:1px solid var(--border);border-radius:9px;padding:7px 10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.sb-lbl{font-size:.72rem;color:var(--ink);font-weight:600;white-space:nowrap}
.zip-in{background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 8px;font-size:.95rem;font-family:inherit;color:var(--ink);width:82px;font-weight:700;letter-spacing:.04em}
.zip-in:focus{outline:2px solid var(--gold);outline-offset:1px}
.rad-sel{background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 6px;font-size:.78rem;font-family:inherit;color:var(--ink);cursor:pointer}
.go-btn{background:var(--pine);border:none;border-radius:6px;padding:8px 13px;font-size:.8rem;font-weight:800;color:#fff;cursor:pointer;transition:background .15s;white-space:nowrap}
.go-btn:hover{background:var(--sage)}
.go-btn:disabled{background:#ccc;color:#888;cursor:not-allowed}
.loc-btn{background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 9px;font-size:.8rem;cursor:pointer;color:var(--green2);transition:background .15s;white-space:nowrap;font-family:inherit;font-weight:600}
.loc-btn:hover{background:var(--stripe)}
.loc-btn:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:400px){.loc-btn-label{display:none}}
.sb-status{font-size:.85rem;color:var(--muted);font-style:italic;flex:1;min-width:80px}
.sb-err{font-size:.7rem;color:var(--red);font-style:italic;flex:1}

/* NAME SEARCH BAR */
/* MORE SEARCH OPTIONS TOGGLE */
.more-search-toggle{width:100%;background:var(--stripe);border:1.5px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 0;font-size:.78rem;color:var(--green2);font-weight:700;cursor:pointer;font-family:inherit;margin-bottom:8px;transition:all .15s}
.more-search-toggle:hover{background:#EAE6D5;border-color:var(--green2)}
.more-search-icon{font-size:.9rem}
.more-search-toggle:hover{opacity:.75}
.more-search-chevron{font-size:.62rem;transition:transform .2s ease;display:inline-block}
.more-search-panel{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease}
.more-search-panel.open{max-height:400px;opacity:1}

.name-bar{background:var(--stripe);border:1px solid var(--border);border-radius:8px;padding:7px 12px;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.name-in{background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:.9rem;font-family:inherit;color:var(--ink);flex:1;outline:none}
.name-in:focus{outline:2px solid var(--gold);outline-offset:1px}

/* DATE WEATHER BAR */
.date-bar{background:var(--stripe);border:1px solid var(--border);border-radius:8px;padding:7px 12px;display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.date-row{display:flex;align-items:center;gap:8px}
.date-icon{font-size:.95rem;flex-shrink:0}
.date-in{background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:.9rem;font-family:inherit;color:var(--ink);cursor:pointer;flex:1;outline:none}
.date-in:focus{outline:2px solid var(--gold);outline-offset:1px}
.date-clear{background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer;padding:4px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.date-clear:hover{color:var(--ink);background:rgba(0,0,0,.06)}
.date-wx{font-size:.7rem;color:var(--green2);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* WEEK-VIEW DAY CHIPS */
.day-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:1px;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
.day-chips::-webkit-scrollbar{display:none}
.day-chip{background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:5px 9px;display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;flex-shrink:0;font-family:inherit;transition:all .15s;min-width:38px}
.day-chip:hover{background:var(--stripe)}
.day-chip.active{background:var(--pine);border-color:var(--pine)}
.day-chip-label{font-size:.6rem;color:var(--muted);font-weight:700;text-transform:uppercase}
.day-chip.active .day-chip-label{color:rgba(255,255,255,.85)}
.day-chip-num{font-size:.92rem;color:var(--ink);font-weight:700}
.day-chip.active .day-chip-num{color:#fff}

/* CONTROLS */
/* Desktop: sort row and type row share one line, sort anchored left,
   type anchored right, gap flexes to fill the space between them —
   saves vertical real estate. Mobile overrides this to stack + center. */
.sort-bar{background:var(--cream);border-bottom:1px solid var(--border);padding:6px 14px;display:flex;align-items:center}
.wx-toggle-btn{margin-left:auto}
.wx-panel{max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .2s ease;background:var(--cream);border-bottom:1px solid var(--border)}
.wx-panel.open{max-height:120px;opacity:1;padding:8px 14px 10px}
.filter-row-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.hd-ctrl{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ctrl-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.srt-btn{background:#fff;border:1px solid var(--border);color:var(--ink);font-size:.68rem;font-weight:600;padding:4px 8px;border-radius:16px;cursor:pointer;transition:all .14s;font-family:inherit;white-space:nowrap}
@media(max-width:400px){.srt-btn{padding:4px 6px;font-size:.64rem}}
.srt-btn:hover{background:var(--stripe)}
.srt-btn.active{background:var(--green);color:#fff;border-color:var(--green)}
.fav-btn{background:#FFF6E5;border-color:#EFD9A0;color:#9C7A1E}
.fav-btn.active{background:var(--gold);color:#1A1A1A;border-color:var(--gold)}
.ccount{margin-left:auto;font-size:.68rem;color:var(--muted);font-style:italic;white-space:nowrap}

/* TYPE FILTER */
.tf-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.tf-lbl{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.tf-btn{background:#fff;border:1px solid var(--border);color:var(--ink);font-size:.66rem;font-weight:600;padding:3px 10px;border-radius:14px;cursor:pointer;transition:all .14s;font-family:inherit;display:flex;align-items:center;gap:3px}
.tf-btn:hover{background:var(--stripe)}
.tf-btn.active{background:var(--green);color:#fff;border-color:var(--green)}
.tf-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* LOADING / EMPTY */
.loading-wrap{text-align:center;padding:60px 20px}
.spinner{display:inline-block;width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--green2);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-wrap h2{font-family:Georgia,serif;color:var(--green);font-size:1.2rem;margin-bottom:6px}
.loading-wrap p{color:var(--muted);font-size:.85rem;max-width:380px;margin:0 auto;line-height:1.6}
.empty-wrap{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-wrap h2{font-family:Georgia,serif;font-size:1.2rem;color:var(--green);margin-bottom:8px}
.retry-btn{margin-top:16px;background:var(--green);color:#fff;border:none;border-radius:7px;padding:9px 22px;font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.retry-btn:hover{background:var(--green2)}

/* FAV BANNER */
.fav-banner{background:linear-gradient(135deg,var(--green),var(--green2));border-radius:10px;padding:14px 16px 12px;margin:14px 14px 0;max-width:calc(1440px - 28px);margin-left:auto;margin-right:auto}
.fav-banner h2{font-family:Georgia,serif;font-size:.95rem;color:#fff;margin-bottom:8px}
.share-all-btn{background:var(--gold);border:none;border-radius:7px;padding:10px;font-size:.85rem;font-weight:800;color:#1A1A1A;cursor:pointer;font-family:inherit;width:100%;display:block;transition:background .15s}
.share-all-btn:hover{background:#C8923A}
.fav-empty{color:rgba(255,255,255,.7);font-size:.82rem;text-align:center;padding:6px}

/* GRID */
#grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px 14px 100px}

/* ── CARD — v11, locked palette ── */
.card{background:var(--offwhite);border-radius:14px;border:1px solid var(--card-border);box-shadow:0 1px 5px var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;position:relative}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.11);transform:translateY(-2px)}

/* CARD HEADER */
.ch{padding:16px 16px 12px;display:flex;align-items:flex-start;gap:14px}
.c-avatar{flex-shrink:0;width:64px;height:64px;border-radius:50%;border:2px solid var(--pine);background:var(--offwhite);display:flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:1.1rem;color:var(--pine)}
.ch-left{flex:1;min-width:0;display:flex;align-items:center;min-height:64px}
.c-name{font-family:Georgia,'Times New Roman',serif;font-size:1.15rem;font-weight:700;color:var(--pine);line-height:1.25;text-transform:uppercase;letter-spacing:.01em}
.c-name-btn{background:none;border:none;padding:0;display:flex;align-items:flex-start;gap:6px;cursor:pointer;text-align:left;width:100%}
.c-chevron{color:var(--sage);font-size:.75rem;flex-shrink:0;transition:transform .15s;margin-top:3px}
.c-meta{font-size:.74rem;color:var(--sage);margin-top:3px;font-style:italic}
.ch-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.ch-right-icons{display:flex;align-items:center;gap:6px}
.icon-btn{background:var(--offwhite);border:1.5px solid var(--card-border);width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:var(--pine);padding:0}
.icon-btn:hover{border-color:var(--pine)}
.star-btn.on{background:var(--pine);border-color:var(--pine);color:var(--offwhite)}
.share-btn{background:var(--pine);border:1.5px solid var(--pine);color:var(--offwhite)}
.share-btn:hover{background:var(--sage);border-color:var(--sage)}
.type-badge{background:var(--sand);border-radius:5px;padding:4px 10px;font-size:.62rem;font-weight:800;color:var(--dark-text);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}

/* DESCRIPTION EXPAND */
.c-desc{max-height:0;overflow:hidden;opacity:0;background:var(--sand);font-size:.8rem;color:var(--dark-text);line-height:1.55;transition:max-height .25s ease,opacity .2s ease,padding .25s ease}
.c-desc.open{max-height:300px;opacity:1;padding:12px 16px}

/* CARD BODY */
.cb{padding:12px 16px 16px;flex:1;display:flex;flex-direction:column;gap:10px}

/* ADDRESS */
.c-addr{font-size:.85rem;color:var(--dark-text);text-decoration:none;display:block;line-height:1.4;font-weight:500;border-bottom:1px dotted var(--card-border);padding-bottom:8px}
.c-addr:hover{border-bottom-color:var(--pine)}
.c-dist{font-size:.75rem;color:var(--sage);font-style:italic;margin-top:2px}

/* STATS ROW */
.stats{display:flex;background:var(--sand);border-radius:10px;overflow:hidden}
.stat{flex:1;text-align:center;padding:10px 4px;border-right:1px solid rgba(18,43,34,.08)}
.stat:last-child{border-right:none}
.stat-val{display:block;font-size:1.05rem;font-weight:700;color:var(--pine);line-height:1;font-family:Georgia,'Times New Roman',serif}
.stat-lbl{display:block;font-size:.55rem;color:var(--dark-text);opacity:.65;text-transform:uppercase;letter-spacing:.07em;margin-top:3px;font-family:-apple-system,sans-serif}
.stat.rate .stat-val{color:var(--tee-red);font-size:.92rem}

/* WEATHER (shown when date selected) */
.c-wx{background:var(--sand);border:1px solid var(--card-border);border-radius:8px;padding:9px 11px;display:none}
.c-wx.visible{display:block}
.c-wx-hdr{font-size:.6rem;font-weight:700;color:var(--sage);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.c-wx-content{font-size:.85rem;color:var(--dark-text)}
.c-wx-temp{font-size:1.05rem;font-weight:700;color:var(--dark-text)}
.c-wx-desc{font-size:.78rem;color:var(--dark-text);opacity:.8;margin-top:1px}
.c-wx-wind{font-size:.68rem;color:var(--sage);margin-top:2px}
.c-wx-loading{font-size:.72rem;color:var(--sage);font-style:italic}

/* BOOK NOW — full width, no clipping: border-box sizing, wraps instead of
   overflowing, sized off ch/cb padding so it always matches card width */
.book-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--pine);border:none;border-radius:8px;width:100%;box-sizing:border-box;padding:13px 10px;font-size:.85rem;font-weight:800;color:var(--offwhite);cursor:pointer;text-decoration:none;font-family:inherit;transition:background .15s;letter-spacing:.01em;text-align:center;white-space:normal;line-height:1.3}
.book-btn:hover{background:var(--sage)}
.book-btn.no-phone{background:var(--sand);border:1px solid var(--card-border);color:var(--dark-text);font-weight:600}
.book-btn.no-phone:hover{background:#ded3b4}

/* CARD ACTIONS */
.c-actions{display:flex;gap:10px}
/* Weather pill — appears in ch-right above type badge when date is active */
.c-wx-pill{background:var(--sand);border-radius:8px;padding:4px 10px;font-size:.82rem;font-weight:700;color:var(--dark-text);white-space:nowrap;margin-bottom:4px;text-align:center}
/* Desktop inline weather in search bar */
.sb-wx-desktop{display:none}
@media(min-width:581px){
  .sb-wx-desktop{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:4px}
  .sb-wx-divider{color:var(--border);font-size:1.2rem;margin:0 4px}
  .sb-wx-label{font-size:.75rem;font-weight:700;color:var(--sage);white-space:nowrap}
  .day-chips-desktop{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
  .day-chips-desktop::-webkit-scrollbar{display:none}
  .day-chips-desktop .day-chip{min-width:36px;padding:5px 8px}
  .date-clear-desktop{background:none;border:none;color:var(--muted);font-size:.8rem;cursor:pointer;white-space:nowrap;padding:2px 4px}
  .date-clear-desktop:hover{color:var(--ink)}
}
/* Featured course card */
.card-featured{border:2px solid var(--gold);box-shadow:0 4px 18px rgba(217,164,65,.28)}
.featured-badge{position:absolute;top:10px;left:10px;background:var(--gold);color:#3A2A06;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:5px;pointer-events:none}
.featured-disclosure{font-size:.68rem;color:var(--sage);font-style:italic;padding:6px 0 2px;text-align:center}
.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--sand);border:none;border-radius:8px;padding:12px 8px;font-size:.78rem;font-weight:700;color:var(--dark-text);cursor:pointer;text-decoration:none;font-family:inherit;transition:all .15s;box-sizing:border-box;width:100%}
.action-btn:hover{background:#ded3b4}
.teesheet-cta{background:var(--tee-red);color:#fff}
.teesheet-cta:hover{background:#a23d2e}
.teesheet-cta.on{background:var(--success);color:#fff}

/* ── SHARE MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:none;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--offwhite);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.22);width:100%;max-width:420px;max-height:90vh;overflow-y:auto;padding:22px 20px 20px;position:relative;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:14px;left:16px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--sage);line-height:1;padding:2px}
.modal-close:hover{color:var(--pine)}
.modal h2{font-family:Georgia,serif;font-size:1.05rem;font-weight:700;color:var(--pine);text-align:center;margin-bottom:5px}
.modal-sub{font-size:.8rem;color:var(--sage);text-align:center;margin-bottom:16px}
.modal-field{margin-bottom:13px}
.modal-field label{display:block;font-size:.78rem;font-weight:700;color:var(--dark-text);margin-bottom:5px}
.modal-field label .opt{font-weight:400;color:var(--sage);font-size:.72rem}
.field-wrap{display:flex;align-items:center;gap:8px;background:var(--sand);border:1.5px solid var(--card-border);border-radius:8px;padding:8px 12px}
.field-wrap:focus-within{border-color:var(--pine)}
.field-icon{font-size:1rem;flex-shrink:0}
.field-input{background:none;border:none;font-size:.9rem;font-family:inherit;color:var(--dark-text);width:100%;outline:none}
.modal-field textarea{width:100%;background:var(--sand);border:1.5px solid var(--card-border);border-radius:8px;padding:10px 12px;font-size:.88rem;font-family:inherit;color:var(--dark-text);resize:none;outline:none;min-height:90px;line-height:1.5}
.modal-field textarea:focus{border-color:var(--pine)}
.char-count{text-align:right;font-size:.68rem;color:var(--sage);margin-top:3px}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-cancel{flex:1;background:var(--offwhite);border:2px solid var(--pine);border-radius:8px;padding:10px;font-size:.85rem;font-weight:700;color:var(--pine);cursor:pointer;font-family:inherit;transition:all .15s}
.modal-cancel:hover{background:var(--sand)}
.modal-share{flex:1;background:var(--pine);border:none;border-radius:8px;padding:10px;font-size:.85rem;font-weight:700;color:#fff;cursor:pointer;font-family:inherit;transition:background .15s}
.modal-share:hover{background:var(--sage)}

/* TOAST */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:10px 20px;border-radius:8px;font-size:.83rem;z-index:999;box-shadow:0 2px 12px rgba(0,0,0,.3);opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}

/* FLOATING ACTION BAR — solid bottom toolbar, one-handed thumb reach.
   Anchored flush to the bottom edge with its own background so it never
   visually collides with card content scrolling underneath it. */
.floating-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:300;background:#fff;border-top:1px solid var(--border);box-shadow:0 -3px 14px rgba(0,0,0,.12);padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .25s ease}
.floating-bar.shown{transform:translateY(0)}
.float-btn{flex:1;max-width:240px;background:var(--green);color:#fff;border:none;border-radius:10px;padding:12px 16px;font-size:.85rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;opacity:0;transform:scale(.92);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.float-btn.visible{opacity:1;transform:scale(1);pointer-events:auto}
.float-teesheet-btn{background:var(--pine);color:#fff}
/* Reserve space at the bottom of the page so the toolbar never covers the last card's buttons */
/* Bottom padding handled in the main #grid rule above so the floating toolbar never covers the last card */

/* TRIP MODAL LIST */
.teesheet-item{padding:12px 0;border-bottom:1px solid var(--border)}
.teesheet-item:last-child{border-bottom:none}
.teesheet-item-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.teesheet-item-day{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;flex-shrink:0}
.teesheet-day-input{width:42px;background:var(--stripe);border:1.5px solid var(--border);border-radius:6px;padding:5px;font-size:.85rem;text-align:center;font-family:inherit;flex-shrink:0}
.teesheet-item-name{font-size:.88rem;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.teesheet-item-remove{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:4px 8px;flex-shrink:0}
.teesheet-item-remove:hover{color:var(--red)}
.teesheet-field-row{display:flex;gap:8px;margin-bottom:6px}
.teesheet-mini-input{flex:1;background:var(--stripe);border:1.5px solid var(--border);border-radius:6px;padding:7px 8px;font-size:.8rem;font-family:inherit;color:var(--ink);outline:none;min-width:0}
.teesheet-mini-input:focus{border-color:var(--green2)}
.teesheet-mini-notes{width:100%;background:var(--stripe);border:1.5px solid var(--border);border-radius:6px;padding:8px;font-size:.8rem;font-family:inherit;color:var(--ink);outline:none;resize:vertical;min-height:48px}
.teesheet-mini-notes:focus{border-color:var(--green2)}
.cal-add-btn{margin-top:7px;background:#fff;border:1.5px solid var(--border);border-radius:7px;padding:7px 10px;font-size:.76rem;font-weight:700;color:var(--green2);cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;justify-content:center;width:100%;transition:all .14s}
.cal-add-btn:hover{background:var(--stripe);border-color:var(--green2)}

/* INSTALL BANNER */
#install-bar{display:none;background:var(--gold);color:#1A1A1A;padding:9px 16px;text-align:center;font-size:.78rem;font-weight:700;cursor:pointer;align-items:center;justify-content:center;gap:6px}

/* ── HAMBURGER MENU DRAWER ── */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;display:none;justify-content:flex-end}
.menu-overlay.open{display:flex}
.menu-drawer{background:#fff;width:min(300px,82vw);height:100%;box-shadow:-4px 0 24px rgba(0,0,0,.18);display:flex;flex-direction:column;animation:drawerIn .22s ease}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.menu-header{display:flex;align-items:center;justify-content:flex-end;padding:18px 20px;border-bottom:1px solid var(--border)}
.menu-logo-img{display:none}
.menu-close-circle{display:none}
.menu-title{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;font-weight:800;font-size:1.05rem;color:var(--ink)}
.menu-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted);padding:2px}
.menu-item{display:flex;align-items:center;gap:13px;padding:16px 20px;background:none;border:none;border-bottom:1px solid var(--border);font-size:.92rem;color:var(--ink);font-weight:800;cursor:pointer;text-align:left;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;width:100%;transition:background .15s}
.menu-item:hover{background:var(--stripe)}
.menu-item-icon{font-size:1.15rem;width:22px;text-align:center}
.menu-footer{margin-top:auto;padding:16px 20px;font-size:.68rem;color:var(--muted);border-top:1px solid var(--border)}

/* MOBILE: dropdown anchored below logo row by JS, transparent overlay */
@media(max-width:580px){
  .menu-overlay{align-items:flex-start;background:transparent}
  .menu-drawer{
    width:100%;height:auto;max-height:75vh;overflow-y:auto;
    background:var(--offwhite);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    animation:dropIn .18s ease;
  }
  @keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
  .menu-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-bottom:1px solid var(--card-border);
  }
  .menu-logo-img{display:block;height:32px;width:auto}
  .menu-close{display:none}
  .menu-close-circle{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;
    border:2px solid var(--pine);color:var(--pine);
    background:none;font-size:.95rem;font-weight:700;cursor:pointer;
    flex-shrink:0;
  }
  .menu-item{
    font-size:1.25rem;font-weight:800;
    padding:20px 20px;
    color:var(--dark-text);
    border-bottom:1px solid var(--card-border);
    background:var(--offwhite);
  }
  .menu-item:hover{background:var(--sand)}
  .menu-footer{
    font-size:.82rem;color:var(--sage);
    padding:18px 20px;border-top:none;
    background:var(--offwhite);
  }
}

/* ── TUTORIAL WALKTHROUGH ── */
.tutorial-modal{text-align:center}
.tutorial-icon{margin-bottom:12px;display:flex;justify-content:center}
.tutorial-logo{height:56px;width:auto;margin:0 auto 14px;display:block}
.tutorial-modal h2{font-family:Georgia,serif;font-size:1.1rem;color:var(--green);margin-bottom:8px}
.tutorial-text{font-size:.86rem;color:var(--ink);line-height:1.6;padding:0 4px}
.tutorial-dots{display:flex;justify-content:center;gap:6px;margin:16px 0 2px}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:all .2s}
.tdot.active{background:var(--green);width:20px;border-radius:4px}

/* ── CONTACT FORM EXTRAS ── */
.contact-toggle{display:flex;gap:8px}
.ctoggle-btn{flex:1;background:var(--sand);border:1.5px solid var(--card-border);border-radius:8px;padding:10px;font-size:.85rem;font-weight:700;color:var(--dark-text);cursor:pointer;font-family:inherit;transition:all .15s}
.ctoggle-btn.active{background:var(--pine);border-color:var(--pine);color:#fff}
.field-select{width:100%;background:var(--sand);border:1.5px solid var(--card-border);border-radius:8px;padding:10px 12px;font-size:.9rem;font-family:inherit;color:var(--dark-text);outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23122B22' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:11px}
.field-select:focus{border-color:var(--green2)}
.fallback-textarea{width:100%;min-height:220px;background:var(--stripe);border:1.5px solid var(--border);border-radius:8px;padding:12px;font-size:.85rem;font-family:inherit;color:var(--ink);line-height:1.5;resize:vertical}

footer{background:var(--green);color:rgba(255,255,255,.6);text-align:center;padding:14px 18px;font-size:.68rem;line-height:1.8;margin-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
footer strong{color:#fff}

@media(max-width:580px){header{padding:12px 12px 9px}#grid{grid-template-columns:1fr;padding:10px 8px 24px;gap:10px}}
@media(min-width:581px){.c-avatar{width:50px;height:50px;font-size:.95rem}.c-name{font-size:1.05rem}.wx-toggle-btn{display:none}.wx-panel{display:none}}
@media(max-width:580px){
  .filter-row-wrap{flex-direction:column;align-items:stretch;gap:0}
  .hd-ctrl{justify-content:center}
  .tf-row{justify-content:center;margin-top:7px;padding-top:7px;border-top:1px solid var(--border)}
}