/* File: salonsite.css
   A salon's public website. Tokens only — see 12-styling-standard.md.
   The salon palette and the --sa accent come from .site in kapsel-base.css; this file
   only lays the page out. Container queries (cqi) rather than viewport media queries,
   so the page is also right inside the narrow dashboard preview. */

.site{min-height:100dvh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px)}
.site main{flex:1;width:100%;max-width:1040px;margin:0 auto;
  padding:0 16px 48px;display:flex;flex-direction:column;gap:56px}

/* ---------- header ---------- */
.s-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 16px;background:var(--site-bg);border-bottom:1px solid var(--site-line)}
.s-head-name{font-family:var(--f-display);font-size:19px;text-decoration:none;margin-right:auto}
.s-head-nav{display:flex;gap:16px;font-size:13px}
.s-head-nav a{color:var(--site-muted);text-decoration:none}
.s-head-nav a:hover{color:var(--sa)}

/* ---------- hero ---------- */
.s-hero{display:grid;grid-template-columns:1fr;gap:28px;padding-top:40px;align-items:start}
.s-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--site-muted);margin-bottom:10px}
.s-hero-name{font-family:var(--f-display);font-weight:400;line-height:.98;
  font-size:clamp(40px,8.4cqi,84px);letter-spacing:-.01em}
.s-hero-tagline{margin-top:14px;font-size:17px;color:var(--site-muted);max-width:46ch}
.s-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* ---------- the "today" panel ---------- */
.s-today{display:grid;gap:14px;padding:16px;border:1px solid var(--site-line);
  border-radius:var(--r-lg);background:var(--site-soft)}
.s-today-status{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;flex-wrap:wrap}
.s-dot{width:8px;height:8px;border-radius:50%;background:var(--site-muted);flex:none}
.s-today-status.is-open .s-dot{background:var(--ok)}
.s-today-status.is-closed .s-dot{background:var(--warn)}
.s-today-detail{color:var(--site-muted);font-weight:400}
.s-today-team{display:grid;gap:7px}
.s-today-avatars{display:flex}
.s-today-avatars .avatar{margin-right:-8px;box-shadow:0 0 0 2px var(--site-soft)}
.s-today-always{font-family:var(--f-mono);font-size:12.5px;color:var(--sa)}

/* ---------- sections ---------- */
.s-section-name{font-family:var(--f-display);font-weight:400;
  font-size:clamp(28px,4.4cqi,42px);margin-bottom:24px}

/* ---------- services ---------- */
.s-cats{display:grid;grid-template-columns:1fr;gap:32px}
.s-cat-name{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--site-muted);padding-bottom:8px;border-bottom:1px solid var(--site-line);margin-bottom:4px}
.s-list{list-style:none;margin:0;padding:0}
.s-item{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--site-line)}
.s-item-text{display:grid;gap:2px;margin-right:auto;min-width:min(100%,180px)}
.s-item-name{font-size:15px}
.s-item-meta{font-size:12.5px;color:var(--site-muted)}
.s-item-price{font-size:15px;white-space:nowrap}
.s-from{font-family:var(--f-ui);font-size:11.5px;color:var(--site-muted)}

/* ---------- team ---------- */
.s-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.s-team-card{display:grid;gap:8px;justify-items:start}
.s-team-photo{width:100%;max-width:200px;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg)}
.s-team-name{font-family:var(--f-display);font-weight:400;font-size:22px;margin-top:6px}
.s-team-title{font-size:13px;color:var(--site-muted)}
.s-tags{display:flex;gap:6px;flex-wrap:wrap}
.s-tag{font-size:11.5px;padding:2px 9px;border-radius:var(--r-pill);
  border:1px solid var(--site-line);color:var(--site-muted)}
.s-team-days{font-size:12.5px;color:var(--site-muted)}
.s-team-card .s-btn{margin-top:6px}

/* ---------- photos ---------- */
.s-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.s-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);display:block}
.s-swatch{background:color-mix(in srgb,var(--sa) calc(14% + var(--swatch) * 0.18%),var(--site-soft))}

/* ---------- about, hours, find us ---------- */
.s-about{display:grid;grid-template-columns:1fr;gap:40px}
.s-about-col .s-section-name{font-size:clamp(24px,3.2cqi,30px);margin-bottom:16px}
.s-about-text{display:grid;gap:12px;color:var(--site-muted);max-width:52ch}
.s-hours{display:grid;gap:2px;max-width:320px}
.s-hours-row{display:flex;justify-content:space-between;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--site-line);font-size:14px}
.s-hours-row.is-today{font-weight:600;color:var(--sa)}
.s-closed{margin-top:16px}
.s-closed ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px}
.s-find{display:grid;gap:10px;font-size:14px}
.s-find-address{color:var(--site-muted);line-height:1.7}
.s-find-link{color:var(--sa);text-decoration:none}
.s-find-link:hover{text-decoration:underline}

/* ---------- paused notice ---------- */
.s-paused{margin-top:24px;border-left:3px solid var(--warn)}

/* ---------- footer ---------- */
.s-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--site-line);font-size:12.5px;color:var(--site-muted)}
.s-foot a{color:var(--sa)}

/* ---------- the sticky bar, phones only ---------- */
.s-sticky{display:none}

/* ---------- salon not found ---------- */
.site-missing{align-items:center;justify-content:center;text-align:center;padding:24px}
.site-missing-inner{display:grid;gap:12px;max-width:40ch;margin:auto}
.site-missing h1{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,6cqi,46px)}
.site-missing p{color:var(--site-muted)}
.site-missing-foot{font-size:12.5px;margin-top:16px}
.site-missing-foot a{color:var(--sa)}

/* ---------- wider than a phone ---------- */
@container site (min-width:720px){
  .s-hero{grid-template-columns:1fr 280px;gap:48px;padding-top:56px}
  .s-cats{grid-template-columns:1fr 1fr;gap:32px 48px}
  .s-about{grid-template-columns:1.2fr 1fr 1fr;gap:48px}
}

/* ---------- phones ---------- */
@media (max-width:720px){
  .s-head-nav{display:none}
  /* Room for the sticky bar, so the footer is never under it. */
  .site main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .s-sticky{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--site-bg);border-top:1px solid var(--site-line)}
  .s-sticky .s-btn{flex:1;min-height:44px}
  .s-photos{grid-template-columns:repeat(2,1fr)}
  .s-item{gap:10px}
  .s-item-price{margin-left:auto}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE BOOKING SHEET AND MANAGE BOOKING  (02-product-spec.md 1.3 and 1.4)
   The sheet itself, .pick, .date, .slot and .times come from kapsel-base.css.
   Everything here is the booking flow's own additions.
   ══════════════════════════════════════════════════════════════════════════ */

.s-book-overlay{background:var(--site-bg)}
.s-sheet-title{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.1}
.s-sheet-err{margin-top:-6px}
.s-step{font-size:11.5px;color:var(--site-muted);margin-left:auto}
.s-sheet-close{margin-left:auto;font-size:26px;line-height:1;text-decoration:none;
  color:var(--site-muted);padding:0 4px}
.s-sheet-actions{display:flex;gap:10px;margin-left:auto}
.s-total{font-size:12.5px}

/* ---------- step 1: services ---------- */
.s-pick-group{display:grid;gap:2px}
.s-pick-cat{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--site-muted);margin-bottom:8px}
.s-svc-text{display:grid;gap:2px}
.s-svc-name{font-size:14.5px}
.s-svc-meta{font-size:12px;color:var(--site-muted)}
.s-svc-price{font-size:14px;white-space:nowrap}

/* The hair lengths, shown only once a service is ticked. Indented so they read as
   belonging to the service above rather than as more services. */
.s-lens{display:grid;gap:4px;margin:-2px 0 10px 28px;padding-left:12px;
  border-left:2px solid var(--sa-soft)}
.s-len{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:7px 2px;cursor:pointer}
.s-len input{accent-color:var(--sa);width:17px;height:17px;flex:none}
.s-len-extra{font-size:12px;color:var(--site-muted)}

/* ---------- step 2: stylists ---------- */
.s-sty{grid-template-columns:auto auto 1fr auto}
.s-sty-text{display:grid;gap:2px}
.s-sty-name{font-size:14.5px}
.s-sty-meta{font-size:12px;color:var(--site-muted)}
.s-sty-price{font-size:14px;white-space:nowrap}
/* "Anyone available" has no avatar, so it needs the same column count as the rest. */
.s-sty:not(:has(.avatar)){grid-template-columns:auto 1fr auto}

/* ---------- step 3: dates and times ---------- */
.s-dates{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.s-dates .date{scroll-snap-align:start;cursor:pointer}
.s-dates .date:disabled{opacity:.4;cursor:not-allowed}
.date.is-empty{border-style:dashed}
.s-date-wd{font-size:11px;color:var(--site-muted);text-transform:uppercase;letter-spacing:.06em}
.s-date-num{font-family:var(--f-display);font-size:20px;line-height:1.1}
.s-date-note{font-size:10.5px;color:var(--site-muted);white-space:nowrap}
.date[aria-pressed="true"] .s-date-wd,
.date[aria-pressed="true"] .s-date-note{color:var(--sa-ink);opacity:.85}
.s-time-group{display:grid;gap:8px}
.slot{cursor:pointer;display:grid;gap:3px;justify-items:center}
.s-slot-dots{display:flex;gap:2px}
.s-slot-dot{width:3px;height:3px;border-radius:50%;background:var(--site-muted)}
.slot[aria-pressed="true"] .s-slot-dot{background:var(--sa-ink)}

/* ---------- step 4: details ---------- */
.s-optional{font-weight:400;color:var(--site-muted)}
.s-pay{border-left:3px solid var(--sa)}
.s-policy{font-size:12.5px}
.s-summary{display:grid;gap:4px}
.s-code{font-family:var(--f-mono);font-size:24px;letter-spacing:.4em;text-align:center}

/* ---------- confirmation ---------- */
.s-conf-wrap{align-items:flex-start;justify-content:center;padding:24px 16px 48px}
.s-conf{width:100%;max-width:520px;margin:0 auto;display:grid;gap:10px}
.s-conf-head{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,7cqi,44px);line-height:1.05}
.s-conf-ref{font-size:30px;letter-spacing:.14em;color:var(--sa);margin-top:6px}
.s-conf-card{display:grid;gap:18px;margin-top:14px;padding:18px;
  border:1px solid var(--site-line);border-radius:var(--r-lg);background:var(--site-soft)}
.s-conf-block{display:grid;gap:5px}
.s-conf-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--site-muted)}
.s-conf-row{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.s-conf-total{padding-top:7px;margin-top:3px;border-top:1px solid var(--site-line);font-weight:600}
.s-conf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ---------- manage booking ---------- */
.s-ref{font-size:19px;letter-spacing:.1em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.s-ref-input{font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.s-manage-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.s-manage-actions form{display:contents}
.s-manage-notice,.s-manage-cutoff,.s-cancel-warn{display:grid;gap:8px}
.s-cancel-warn{border-left:3px solid var(--bad)}
.s-danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--site-line))}
.s-keep{display:grid;gap:4px;margin-bottom:6px}
/* A plain-text button, for "Show every service" inside a sentence. */
.s-link{background:none;border:0;padding:0;color:var(--sa);font:inherit;
  text-decoration:underline;cursor:pointer}

/* ---------- phones ---------- */
@media (max-width:600px){
  .s-sheet-actions{width:100%;margin-left:0}
  .s-sheet-actions .s-btn{flex:1;min-height:44px}
  .sheet-f{flex-direction:column;align-items:stretch;gap:10px}
  .s-total{text-align:center}
  .s-manage-actions .s-btn{flex:1;min-height:44px}
  .s-conf-ref{font-size:26px}
}