/*
 * Worksmith booking experience. Uses the site's tokens from styles.css (Midnight, Ivory, Slate, Sage,
 * Inter Tight / Inter, 2px radii, the square "period" motif) on the same dark surface as the Ty app.
 * Every class is prefixed wsb- so nothing here can affect the rest of the site.
 */
dialog.wsb {
  --wsb-surface: rgba(248, 247, 244, .045);
  --wsb-surface-2: rgba(248, 247, 244, .08);
  --wsb-line: rgba(248, 247, 244, .14);
  --wsb-line-2: rgba(248, 247, 244, .28);
  --wsb-muted: var(--on-dark-muted, #A9B4BB);
  --wsb-dim: rgba(248, 247, 244, .58);
  --wsb-ok: #A9BBAE;
  --wsb-err: #E3A69F;
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--midnight); color: var(--ivory); overflow: hidden; font-family: var(--body);
}
dialog.wsb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: wsbIn .5s var(--ease); }
dialog.wsb.wsb-closing { animation: wsbOut .32s cubic-bezier(.5, 0, .75, 0) forwards; }
dialog.wsb::backdrop { background: rgba(15, 31, 43, .6); }
@keyframes wsbIn { from { clip-path: inset(48% 48% 48% 48%); } 60% { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wsbOut { from { clip-path: inset(0 0 0 0); opacity: 1; } to { clip-path: inset(48% 48% 48% 48%); opacity: .6; } }
dialog.wsb :focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.wsb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.wsb-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 12px max(18px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--wsb-line);
}
.wsb-brand { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.wsb-brand .wordmark { font-size: 1.375rem; color: var(--ivory); }
.wsb-brand .wsb-sub { font-size: var(--step--1); color: var(--wsb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsb-close { background: none; border: 1px solid rgba(248, 247, 244, .35); color: inherit; min-height: 36px; padding: 0 14px; cursor: pointer; font-size: .875rem; border-radius: 2px; transition: background .2s, color .2s; }
.wsb-close:hover { background: var(--ivory); color: var(--midnight); }

/* Body: summary column + step area */
.wsb-body { min-height: 0; display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.wsb-aside { border-right: 1px solid var(--wsb-line); padding: clamp(24px, 3.4vw, 44px) clamp(20px, 2.6vw, 36px); overflow: auto; display: flex; flex-direction: column; gap: 26px; }
.wsb-eyebrow { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--wsb-muted); }
.wsb-aside h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -.035em; line-height: 1.02; margin: 10px 0 0; }
.wsb-aside h2 .dot { display: inline-block; width: .16em; height: .16em; background: var(--slate); margin-left: .06em; }
.wsb-desc { color: #CBD3D8; font-size: .9375rem; line-height: 1.6; }
.wsb-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wsb-facts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .9375rem; }
.wsb-facts svg { width: 18px; height: 18px; margin-top: 2px; stroke: var(--wsb-muted); fill: none; stroke-width: 1.6; }
.wsb-facts small { display: block; color: var(--wsb-muted); font-size: var(--step--1); }
.wsb-pick { border-top: 1px solid var(--wsb-line); padding-top: 18px; display: grid; gap: 4px; min-height: 64px; }
.wsb-pick .k { font-size: var(--step--1); color: var(--wsb-muted); }
.wsb-pick .v { font-family: var(--display); font-size: 1.1875rem; letter-spacing: -.015em; }
.wsb-pick .v.empty { color: var(--wsb-dim); font-family: var(--body); font-size: .9375rem; letter-spacing: 0; }
.wsb-steps { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.wsb-steps li { display: flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--wsb-dim); transition: color .3s; }
.wsb-steps li i { width: 9px; height: 9px; border: 1px solid currentColor; transition: background .3s, border-color .3s; }
.wsb-steps li[data-state="current"] { color: var(--ivory); }
.wsb-steps li[data-state="current"] i { background: var(--ivory); border-color: var(--ivory); }
.wsb-steps li[data-state="done"] { color: var(--wsb-muted); }
.wsb-steps li[data-state="done"] i { background: var(--sage); border-color: var(--sage); }

.wsb-main { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: clamp(22px, 3.4vw, 44px) clamp(18px, 3.6vw, 56px) 32px; }
.wsb-step { max-width: 920px; }
.wsb-step[hidden] { display: none; }
.wsb-step.wsb-enter { animation: wsbStep .38s var(--ease); }
@keyframes wsbStep { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wsb-h { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.025em; line-height: 1.1; margin: 0; outline: none; }
.wsb-lede { color: var(--wsb-muted); margin-top: 6px; font-size: .9375rem; }

/* Step 1: calendar + times */
.wsb-pickgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr); gap: clamp(20px, 3.4vw, 48px); margin-top: 28px; align-items: start; }
.wsb-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.wsb-month { font-family: var(--display); font-size: 1.1875rem; font-weight: 500; letter-spacing: -.015em; }
.wsb-nav { display: flex; gap: 6px; }
.wsb-iconbtn { width: 38px; height: 38px; display: grid; place-items: center; background: none; border: 1px solid var(--wsb-line-2); color: var(--ivory); border-radius: 2px; cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; }
.wsb-iconbtn:hover:not([disabled]) { background: var(--wsb-surface-2); border-color: var(--ivory); }
.wsb-iconbtn[disabled] { opacity: .3; cursor: default; }
.wsb-iconbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.wsb-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wsb-grid.wsb-slide-next { animation: wsbNext .32s var(--ease); }
.wsb-grid.wsb-slide-prev { animation: wsbPrev .32s var(--ease); }
@keyframes wsbNext { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes wsbPrev { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.wsb-wd { text-align: center; font-size: var(--step--1); color: var(--wsb-muted); padding: 4px 0 8px; }
.wsb-day {
  position: relative; aspect-ratio: 1 / 1; min-height: 40px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 2px;
  background: none; color: var(--wsb-dim); font-variant-numeric: tabular-nums; font-size: .9375rem; cursor: default; transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.wsb-day.out { visibility: hidden; }
.wsb-day.avail { background: var(--wsb-surface-2); color: var(--ivory); cursor: pointer; font-weight: 500; }
.wsb-day.avail:hover { border-color: var(--wsb-line-2); background: rgba(248, 247, 244, .12); }
.wsb-day.avail::after { content: ""; position: absolute; bottom: 18%; width: 4px; height: 4px; background: var(--sage); }
.wsb-day[aria-pressed="true"], .wsb-day.avail[aria-pressed="true"]:hover { background: var(--ivory); color: var(--midnight); border-color: var(--ivory); }
.wsb-day[aria-pressed="true"]::after { background: var(--midnight); }
.wsb-day.today:not(.avail) { color: var(--wsb-muted); }
.wsb-day.today { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--slate); }
.wsb-legend { display: flex; gap: 18px; margin-top: 14px; font-size: var(--step--1); color: var(--wsb-muted); flex-wrap: wrap; }
.wsb-legend span { display: inline-flex; align-items: center; gap: 8px; }
.wsb-legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.wsb-legend .a { background: var(--wsb-surface-2); box-shadow: inset 0 -3px 0 -1px var(--sage); }
.wsb-legend .s { background: var(--ivory); }
.wsb-legend .u { border: 1px solid var(--wsb-line); }

.wsb-times-head { min-height: 38px; margin-bottom: 14px; display: flex; align-items: center; }
.wsb-times-head strong { font-family: var(--display); font-size: 1.1875rem; font-weight: 500; letter-spacing: -.015em; }
.wsb-tz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--step--1); color: var(--wsb-muted); margin-bottom: 14px; }
.wsb-tz svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.wsb-linkbtn { background: none; border: 0; padding: 2px 0; color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--slate); cursor: pointer; font-size: inherit; }
.wsb-tzsel { width: 100%; margin-bottom: 14px; background: var(--wsb-surface); border: 1px solid var(--wsb-line-2); color: var(--ivory); min-height: 42px; padding: 0 10px; border-radius: 2px; }
.wsb-tzsel option, .wsb-tzsel optgroup { background: var(--midnight); color: var(--ivory); }
.wsb-times { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 8px; max-height: min(52vh, 440px); overflow: auto; scrollbar-width: thin; }
.wsb-times li { animation: wsbStep .3s var(--ease) both; }
.wsb-time {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--wsb-surface); border: 1px solid var(--wsb-line);
  color: var(--ivory); font-size: .9875rem; font-variant-numeric: tabular-nums; border-radius: 2px; cursor: pointer; transition: background .18s, border-color .18s, color .18s;
}
.wsb-time:hover { border-color: var(--wsb-line-2); background: var(--wsb-surface-2); }
.wsb-time[aria-pressed="true"] { border-color: var(--ivory); background: rgba(248, 247, 244, .1); box-shadow: inset 3px 0 0 var(--ivory); }
.wsb-empty { padding: 22px 18px; border: 1px dashed var(--wsb-line-2); color: var(--wsb-muted); font-size: .9375rem; line-height: 1.55; border-radius: 2px; }
.wsb-note { margin-top: 18px; padding: 12px 14px; border-left: 2px solid var(--slate); background: var(--wsb-surface); color: #CBD3D8; font-size: .875rem; line-height: 1.5; }
.wsb-skel { height: 48px; background: linear-gradient(90deg, var(--wsb-surface) 0%, var(--wsb-surface-2) 50%, var(--wsb-surface) 100%); background-size: 200% 100%; animation: wsbShimmer 1.2s linear infinite; border-radius: 2px; }
@keyframes wsbShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Step 2: details */
.wsb-form { margin-top: 26px; display: grid; gap: 18px; max-width: 720px; }
.wsb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wsb-field { display: grid; gap: 8px; align-content: start; }
.wsb-field label { font-size: .875rem; font-weight: 500; color: #CBD3D8; }
.wsb-field .opt { font-weight: 400; font-size: .75rem; color: var(--wsb-muted); border: 1px solid var(--wsb-line-2); padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
.wsb-field .req { color: var(--wsb-muted); font-weight: 400; margin-left: 4px; }
.wsb-field input, .wsb-field select, .wsb-field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; background: rgba(248, 247, 244, .06); border: 1px solid rgba(248, 247, 244, .25); color: var(--ivory);
  border-radius: 2px; font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.wsb-field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.wsb-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ivory) 50%), linear-gradient(135deg, var(--ivory) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.wsb-field select option { background: var(--midnight); }
.wsb-field input::placeholder, .wsb-field textarea::placeholder { color: rgba(169, 180, 187, .75); }
.wsb-field input:focus, .wsb-field select:focus, .wsb-field textarea:focus { outline: none; border-color: var(--ivory); box-shadow: 0 0 0 3px rgba(248, 247, 244, .14); }
.wsb-field [aria-invalid="true"] { border-color: var(--wsb-err); }
.wsb-err { color: var(--wsb-err); font-size: .8125rem; }
.wsb-err:empty { display: none; }
.wsb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.wsb-fine { font-size: var(--step--1); color: var(--wsb-muted); line-height: 1.5; }
.wsb-alert { padding: 14px 16px; border: 1px solid var(--wsb-err); background: rgba(227, 166, 159, .08); color: #F3D4D0; font-size: .9375rem; line-height: 1.5; border-radius: 2px; }
.wsb-alert[hidden] { display: none; }
.wsb-alert .wsb-linkbtn { color: #fff; margin-left: 4px; }

/* Step 3: review */
.wsb-review { margin-top: 26px; border: 1px solid var(--wsb-line); background: var(--wsb-surface); max-width: 720px; }
.wsb-review dl { margin: 0; display: grid; }
.wsb-review dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--wsb-line); align-items: baseline; }
.wsb-review dl > div:first-child { border-top: 0; }
.wsb-review dt { color: var(--wsb-muted); font-size: .875rem; }
.wsb-review dd { margin: 0; overflow-wrap: anywhere; }
.wsb-review dd small { display: block; color: var(--wsb-muted); font-size: .8125rem; }
.wsb-review .big { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.015em; }
.wsb-review .edit { font-size: .8125rem; }

/* Step 4: confirmation */
.wsb-done { max-width: 760px; }
.wsb-done-mark { width: 54px; height: 54px; border: 1px solid var(--wsb-line-2); display: grid; place-items: center; margin-bottom: 22px; }
.wsb-done-mark i { width: 14px; height: 14px; background: var(--sage); animation: wsbPop .6s .15s var(--ease) both; }
.wsb-done-mark.cancel i { background: var(--slate); }
@keyframes wsbPop { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.wsb-done .wsb-h { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); letter-spacing: -.04em; line-height: 1; }
.wsb-done .wsb-h .dot { display: inline-block; width: .14em; height: .14em; background: var(--sage); margin-left: .05em; }
.wsb-done .wsb-review { animation: wsbStep .5s .2s var(--ease) both; }
.wsb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.wsb-actions .btn { min-height: 42px; }
.wsb-cal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: .875rem; }
.wsb-cal-links a, .wsb-cal-links button { color: var(--ivory); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--slate); background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }

/* Footer */
.wsb-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--wsb-line);
  padding: 12px max(18px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  background: var(--midnight);
}
.wsb-foot[hidden] { display: none; }
.wsb-foot .wsb-back { background: none; border: 0; color: var(--ivory); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; padding: 0 6px; font-size: .9375rem; }
.wsb-foot .wsb-back[hidden] { visibility: hidden; display: inline-flex; }
.wsb-foot .wsb-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.wsb-foot .wsb-foot-info { font-size: var(--step--1); color: var(--wsb-muted); text-align: center; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsb-next { min-width: 140px; }
.wsb-next .spin { width: 14px; height: 14px; border: 2px solid rgba(15, 31, 43, .25); border-top-color: var(--midnight); border-radius: 50%; animation: wsbSpin .8s linear infinite; }
@keyframes wsbSpin { to { transform: rotate(360deg); } }

.wsb-banner { margin-bottom: 18px; padding: 10px 14px; border: 1px solid var(--wsb-line-2); font-size: .875rem; color: #CBD3D8; display: flex; gap: 10px; align-items: center; }
.wsb-banner[hidden] { display: none; }
.wsb-banner i { width: 8px; height: 8px; background: var(--sage); flex: none; }
.wsb-preview { background: #3A2F18; color: #F1E8D8; font-size: .8125rem; padding: 6px 14px; text-align: center; }

/* Tablet and mobile */
@media (max-width: 1080px) {
  .wsb-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: auto; }
  .wsb-aside { border-right: 0; border-bottom: 1px solid var(--wsb-line); padding: 18px; gap: 14px; overflow: visible; }
  .wsb-aside h2, .wsb-desc, .wsb-steps { display: none; }
  .wsb-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; }
  .wsb-pick { display: none; }
  .wsb-main { overflow: visible; padding-top: 22px; }
}
@media (max-width: 720px) {
  .wsb-brand .wsb-sub { display: none; }
  .wsb-pickgrid { grid-template-columns: minmax(0, 1fr); }
  .wsb-times { max-height: none; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .wsb-row { grid-template-columns: minmax(0, 1fr); }
  .wsb-review dl > div { grid-template-columns: minmax(0, 1fr) auto; }
  .wsb-review dt { grid-column: 1 / -1; }
  .wsb-foot .wsb-foot-info { display: none; }
  .wsb-day { min-height: 0; font-size: .875rem; }
  .wsb-grid { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.wsb[open], dialog.wsb.wsb-closing, .wsb-step.wsb-enter, .wsb-grid.wsb-slide-next, .wsb-grid.wsb-slide-prev,
  .wsb-times li, .wsb-done-mark i, .wsb-done .wsb-review, .wsb-skel { animation: none !important; }
  .wsb-day, .wsb-time, .wsb-steps li, .wsb-steps li i { transition: none; }
}