/* ═══════════════════════════════════════════════════════════════════════════
   OOOG Saturday Wash — shared status component
   Used by: the member page (index.html) and the Webflow status page embed.
   Everything is scoped under .ws so it can sit inside any host page.
   Artwork: Webflow CDN assets supplied by John (2026-09-12). Type: Gellix + Nacelle.
═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Gellix';src:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/636180a873df097613d34480_Gellix-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Gellix';src:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/636180a845d523bc244da4fd_Gellix-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gellix';src:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/636180a8c42f80dc14a179c4_Gellix-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Gellix';src:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/636180a7da7fb2501047e24f_Gellix-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Nacelle';src:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/636172e361709b32cd2b981f_Nacelle-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nacelle';src:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/636172e361709b81602b981e_Nacelle-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

.ws{
  --ws-paper:#ffffff;
  --ws-ink:#0b0b0c;
  --ws-muted:#5b5b57;          /* 6.26:1 on paper */
  --ws-danger:#b42318;         /* 6.3:1 on paper */
  --ws-focus:#1a6fc4;          /* focus ring on paper */
  --ws-display:'Gellix',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --ws-body:'Nacelle',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --ws-pin-top:0px;            /* host sets this to its sticky header height */
  --ws-scroll:700px;           /* scroll distance the hero animates over */
  --ws-frame:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/6aa56302db3c69b57ef95c87_grid-frame.png');
  --ws-grey:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/6aa56301dd74f803af546033_available-status.png');
  --ws-yellow:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/6aa56301eecd5f7cc31e0def_washing-status.png');
  --ws-green:url('https://cdn.prod.website-files.com/636172e361709b6e4a2b97d4/6aa563018e385df713f9b5b5_green-status.png');
  font-family:var(--ws-body);
  color:var(--ws-ink);
  -webkit-font-smoothing:antialiased;
}
.ws *,.ws *::before,.ws *::after{box-sizing:border-box}
.ws button{font:inherit}
.ws-tr{color:inherit}
.ws :focus-visible{outline:3px solid var(--ws-focus);outline-offset:2px}

/* ── White sheet + drawn frame ─────────────────────────────────────────── */
.ws-sheet{background:var(--ws-paper);padding:2px 0 6px;margin:0 12px}
.ws-frame{margin:6px 8px 0;border:20px solid transparent;border-image:var(--ws-frame) 90 stretch;padding:2px 4px 8px}
.ws-rule{height:3px;background:var(--ws-ink);filter:url(#ws-rough);margin:0 -2px}

/* ── Hero scene ────────────────────────────────────────────────────────────
   Default: the hero sits in normal flow and animates over the first --ws-scroll
   px of scrolling, so the slot table is visible right under it on first paint.
   Add .ws-pinned (mount option pin:true) to pin the hero and add a scroll runway. */
.ws-scene{position:relative}
.ws-pin{position:static;background:var(--ws-paper);z-index:2}
.ws.ws-pinned .ws-scene{height:calc(var(--ws-hero-h,520px) + var(--ws-scroll))}
.ws.ws-pinned .ws-pin{position:sticky;top:var(--ws-pin-top)}
/* The hero panel: the wash photo fills the top box (object-fit: cover) under a white
   translucent veil so the ink copy stays readable. Eyebrow → SAT WASH + chip → the four
   stat rows sit on top, visible from first paint (they fade in on load via .ws-in and
   the numbers count up). Scrolling gives the photo a gentle parallax, nothing else. */
.ws-hero{position:relative;padding:30px 0 14px;overflow:hidden}
.ws-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;will-change:transform;pointer-events:none}
.ws-veil{position:absolute;inset:0;background:rgba(255,255,255,.74);pointer-events:none}
.ws-eyebrow{position:absolute;left:8px;top:8px;right:8px;display:flex;justify-content:space-between;font-family:var(--ws-display);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ws-muted)}
.ws-copy{position:relative;padding:10px 8px 8px}
.ws-title{font-family:var(--ws-display);font-weight:700;font-size:62px;line-height:.84;letter-spacing:-.035em;text-transform:uppercase;color:var(--ws-ink);opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.ws-chip{display:inline-block;margin-top:12px;font-family:var(--ws-display);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ws-ink);padding:6px 10px 5px;border-radius:4px;filter:url(#ws-rough);opacity:0;transform:translateY(10px);transition:opacity .5s ease .15s,transform .5s ease .15s}
.ws-stats{margin-top:14px}
.ws-stat{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.ws-stat:nth-child(1){transition-delay:.3s}
.ws-stat:nth-child(2){transition-delay:.38s}
.ws-stat:nth-child(3){transition-delay:.46s}
.ws-stat:nth-child(4){transition-delay:.54s}
.ws.ws-in .ws-title,.ws.ws-in .ws-chip,.ws.ws-in .ws-stat{opacity:1;transform:none}
.ws-stat .k{font-family:var(--ws-display);font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.ws-stat .v{font-family:var(--ws-display);font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ws-stat .v.t{font-size:17px}
.ws-stat.small .k{font-size:13px;color:var(--ws-muted)}
.ws-stat.small .v{font-size:15px;color:var(--ws-muted)}
.ws-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Static hero: reduced motion, or a host that opts out of the scroll scene */
.ws.ws-static .ws-scene{height:auto}
.ws.ws-static .ws-pin{position:static}
.ws.ws-static .ws-title,.ws.ws-static .ws-chip,.ws.ws-static .ws-stat{opacity:1;transform:none;transition:none}
.ws.ws-static .ws-photo{transform:none}

/* ── Slot table ────────────────────────────────────────────────────────── */
.ws-table{padding:8px 4px 0}
.ws-th{display:grid;grid-template-columns:96px 1fr 104px;align-items:end;padding:10px 0 8px;font-family:var(--ws-display);font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.ws-th span:last-child{text-align:center}
.ws-tr{display:grid;grid-template-columns:96px 1fr 104px;align-items:center;min-height:62px;padding:8px 0;position:relative;width:100%;background:none;border:0;text-align:left}
.ws-tr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ws-ink);filter:url(#ws-rough)}
.ws-tr.tap{cursor:pointer}
.ws-tr.tap:active{background:#f3f2ee}
.ws-tr.mine{background:#f6f5f2}
.ws-num{font-family:var(--ws-display);font-size:28px;font-weight:700;letter-spacing:-.02em;padding-left:22px;font-variant-numeric:tabular-nums}
.ws-time{font-family:var(--ws-body);font-size:14px}
.ws-time small{display:block;font-size:11px;color:var(--ws-muted);margin-top:2px}
.ws-time .you{display:block;font-family:var(--ws-display);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.ws-tr.dim .ws-num,.ws-tr.dim .ws-time{color:var(--ws-muted)}
.ws-cancel{display:inline-block;position:relative;margin-top:6px;min-height:32px;padding:6px 10px;background:none;border:0;color:var(--ws-danger);font-family:var(--ws-display);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.ws-cancel::before{content:'';position:absolute;inset:0;border:1.5px solid currentColor;border-radius:3px;filter:url(#ws-rough);pointer-events:none}
.ws-pending{display:block;margin-top:4px;font-size:11px;color:var(--ws-muted)}

/* Painted status swatches */
.ws-paint{justify-self:center;width:96px;height:36px;display:flex;align-items:center;justify-content:center;font-family:var(--ws-display);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ws-ink);background-size:100% 100%;background-repeat:no-repeat;transform:rotate(-1.2deg)}
.ws-paint.grey{background-image:var(--ws-grey)}
.ws-paint.yellow{background-image:var(--ws-yellow);transform:rotate(1deg)}
.ws-paint.green{background-image:var(--ws-green)}

/* Sheet footer (member disclaimer / embed note) */
.ws-foot{padding:18px 10px 14px;font-size:12px;line-height:1.6;color:var(--ws-muted)}
.ws-foot b{display:block;font-family:var(--ws-display);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ws-ink);margin-bottom:6px}

/* Queue-not-open sheet */
.ws-closed{padding:26px 10px 18px}
.ws-closed .e{font-family:var(--ws-display);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ws-muted)}
.ws-closed .t{font-family:var(--ws-display);font-size:44px;font-weight:700;line-height:.9;letter-spacing:-.03em;text-transform:uppercase;margin:10px 0 16px}
.ws-closed p{font-size:14px;line-height:1.6;color:var(--ws-muted);margin:14px 0 0}

/* ── Buttons, fields, key/value rows (shared by sheet + manage view) ──── */
/* Text styling lives on the button itself (not a child span) so a script that sets
   button.textContent — e.g. "Booking…" — keeps the white-on-paint look. */
.ws-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:6px;position:relative;isolation:isolate;cursor:pointer;border:0;background:none;padding:0 12px;font-family:var(--ws-display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.ws-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--ws-grey) no-repeat;background-size:100% 100%;filter:brightness(0)}
.ws-btn:disabled{opacity:.4;cursor:default}
.ws-btn.danger::before{filter:none;background-image:none;background-color:var(--ws-danger);border-radius:4px}
.ws-btn-text{display:block;width:100%;text-align:center;margin-top:12px;min-height:40px;font-family:var(--ws-display);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-muted);background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* Drawn edge lives on a pseudo border so the label itself isn't displaced by the filter */
.ws-outline{display:inline-block;position:relative;min-height:40px;font-family:var(--ws-display);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-ink);background:none;border:0;padding:9px 12px 8px;cursor:pointer}
.ws-outline::before{content:'';position:absolute;inset:0;border:1.5px solid currentColor;border-radius:3px;filter:url(#ws-rough);pointer-events:none}

.ws-field{margin-bottom:14px}
.ws-field label{display:block;font-family:var(--ws-display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ws-ink);margin-bottom:4px}
.ws-field label i,.ws-field label .req{font-style:normal;color:var(--ws-muted);font-weight:400;letter-spacing:0;text-transform:none}
.ws-field input,.ws-field textarea{width:100%;background:transparent;border:0;border-bottom:2px solid var(--ws-ink);border-radius:0;color:var(--ws-ink);font-family:var(--ws-body);font-size:16px;padding:9px 2px;outline:none;-webkit-appearance:none;resize:none}
.ws-field input::placeholder,.ws-field textarea::placeholder{color:#6f6e6a}
.ws-field input:focus,.ws-field textarea:focus{border-bottom-color:var(--ws-focus)}
.ws-field input.err{border-bottom-color:var(--ws-danger)}
.ws-field textarea{min-height:64px}
.ws-note{font-size:12px;color:var(--ws-muted);line-height:1.5;margin-top:6px}
.ws-note.err{color:var(--ws-danger)}

.ws-kv{margin:16px 0 14px}
.ws-kv .r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 2px;position:relative}
.ws-kv .r::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ws-ink);filter:url(#ws-rough)}
.ws-kv .k{font-family:var(--ws-display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ws-muted);flex:none}
.ws-kv .v{font-family:var(--ws-display);font-size:17px;font-weight:700;letter-spacing:-.01em;text-align:right;word-break:break-word}

.ws-sheet-title{font-family:var(--ws-display);font-size:26px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.ws-stamp{position:absolute;right:10px;top:-6px;width:118px;height:46px;background:var(--ws-green) no-repeat;background-size:100% 100%;display:flex;align-items:center;justify-content:center;font-family:var(--ws-display);font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-5deg)}
.ws-banner{margin:14px 0 18px;padding:8px 0 8px 12px;border-left:3px solid var(--ws-ink);font-family:var(--ws-display)}
.ws-banner .e{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ws-muted)}
.ws-banner .s{font-size:20px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;margin-top:2px}

/* ── Webflow host (dark site ground) ───────────────────────────────────── */
.ws-webflow{max-width:520px;margin:0 auto;padding:8px 0 32px}
.ws-webflow .ws-host-eyebrow{display:flex;justify-content:space-between;padding:18px 18px 10px;font-family:var(--ws-display);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#a3a3a3}
.ws-webflow .ws-host-eyebrow b{color:#fefcfb;font-weight:600}

@media (prefers-reduced-motion:reduce){
  .ws .ws-scene{height:auto}
  .ws .ws-pin{position:static}
  .ws .ws-title,.ws .ws-chip,.ws .ws-stat{opacity:1;transform:none;transition:none}
  .ws .ws-photo{transform:none}
}