/* Hallmark · shape: app screen (public invitee page) · genre: modern-minimal · theme: Cobalt (by request, warmed) · redesign: full
 * nav: edge-aligned logo only · footer: none (a one-line page, the host is the point) · imagery: none · signature: the month grid, enabled days tinted so they read as buttons
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · states: loading, empty, error, full · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the sidebar and the main pane are two fills of one paper family on purpose */
@import url("../tokens.css");
@import url("../base.css");
@import url("../components.css");

body:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* Field edges reach 3:1 on these pages (the shared fields use a lighter rule). */
input:not([type]), input[type="text"], input[type="email"], select, textarea { border-color: var(--color-muted); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--color-ink-2); }

/* Page frame: a slim header, then one card. */
.page { min-height: 100dvh; }
.page-header { max-width: 960px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-md); }
.logo { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--color-ink); text-decoration: none; letter-spacing: var(--tracking-display); }
.logo span { color: inherit; }
.logo img, .logo-mark { display: inline-block; width: 28px; height: 28px; margin-right: var(--space-xs); border-radius: var(--radius-control); }

.booking-container { max-width: 960px; margin: 0 auto var(--space-2xl); padding: 0 var(--space-md); }
.hidden { display: none !important; }
.text-muted, .muted { color: var(--color-muted); }
strong, b { font-weight: 600; }

/* Loading and error */
div.state-loading, div.state-error { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-3xl) var(--space-md); text-align: center; background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-modal); }
.state-loading p, div.state-error p { color: var(--color-ink-2); }
div.state-error { color: var(--color-ink); }
.error-icon { color: var(--color-error); }
div.state-error h2 { font-size: var(--text-xl); }
div.state-error a.error-home { color: var(--color-accent); font-weight: 600; }

/* The card: host and event on the left, the steps on the right. */
.booking-card { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-modal); box-shadow: var(--shadow-card); overflow: hidden; }
.event-sidebar { padding: var(--space-lg); background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.event-host { margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.event-title { font-size: var(--text-2xl); line-height: 1.15; margin-bottom: var(--space-md); }
.event-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.meta-item { display: inline-flex; align-items: center; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
.event-desc { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; max-width: 40ch; }

.booking-main { padding: var(--space-lg); min-width: 0; }
.step-title { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.step-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.step-header .step-title { margin-bottom: 0; }
.btn-text { min-height: var(--control-h-sm); font-size: var(--text-sm); font-weight: 500; cursor: pointer; }

/* Month grid: enabled days are tinted chips, the rest sit flat. */
.calendar { max-width: 360px; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
#cal-month-year { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.cal-nav { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h); border: 1px solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-xl); line-height: 1; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.cal-nav:hover:not(:disabled) { background: var(--color-paper-2); border-color: var(--color-muted); }
.cal-nav:active:not(:disabled) { background: var(--color-paper-3); }
.cal-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2xs); }
.cal-dow { padding: var(--space-xs) 0; text-align: center; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.cal-day { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 0; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--color-accent-wash); color: var(--color-accent-deep); font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.cal-day:hover:not(:disabled) { background: var(--color-accent-line); border-color: var(--color-accent); }
.cal-day:active:not(:disabled) { transform: translateY(1px); }
.cal-day.today { border-color: var(--color-accent); }
.cal-day.selected, .cal-day[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.cal-day--empty, .cal-day--empty:hover { background: transparent; border-color: transparent; cursor: default; }
.cal-day--disabled, .cal-day:disabled { background: transparent; color: var(--color-muted); font-weight: 400; opacity: 0.6; cursor: not-allowed; }

/* Time step */
.selected-date, .selected-datetime { margin-bottom: var(--space-md); font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.tz-banner { margin-bottom: var(--space-md); padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.45; }
.tz-control { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); font-size: var(--text-sm); }
.tz-control__label { color: var(--color-ink-2); }
.tz-control__select { flex: 1 1 auto; min-width: 0; max-width: 100%; min-height: var(--control-h-sm); padding-block: var(--space-2xs); font-size: var(--text-sm); }
.time-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); max-height: 340px; overflow-y: auto; padding: var(--space-3xs) var(--space-2xs) var(--space-3xs) var(--space-3xs); }
.time-slots > p { grid-column: 1 / -1; }
.time-slot { min-height: var(--hit); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-accent-line); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-accent-deep); font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.time-slot:hover:not(.selected) { background: var(--color-accent-wash); border-color: var(--color-accent); }
.time-slot:active { transform: translateY(1px); }
.time-slot.selected { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.no-slots { grid-column: 1 / -1; padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-control); color: var(--color-ink-2); text-align: center; }

/* Form */
.booking-form { display: flex; flex-direction: column; gap: var(--space-md); max-width: 440px; }
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.form-group label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.form-group .optional { font-weight: 400; color: var(--color-muted); }
.req { color: var(--color-accent-deep); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.btn-submit { margin-top: var(--space-xs); min-height: var(--control-h-lg); }
.form-error { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-error-line); border-radius: var(--radius-control); background: var(--color-error-wash); color: var(--color-error-deep); font-size: var(--text-sm); font-weight: 500; }
.form-error a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Confirmation */
.confirm-panel { max-width: 440px; padding: var(--space-md) 0; }
.confirm-icon { display: inline-flex; width: 48px; height: 48px; margin-bottom: var(--space-md); color: var(--color-success); }
.confirm-title { font-size: var(--text-2xl); margin-bottom: var(--space-xs); }
.confirm-subtitle { margin-bottom: var(--space-lg); color: var(--color-ink-2); }
.confirm-details { margin-bottom: var(--space-md); padding: var(--space-xs) var(--space-md); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.confirm-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.confirm-row:last-child { border-bottom: 0; }
.confirm-label { flex-shrink: 0; font-size: var(--text-sm); color: var(--color-muted); }
.confirm-value { font-size: var(--text-md); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.confirm-cancel-row { font-size: var(--text-sm); color: var(--color-ink-2); }
.confirm-cancel-row a { color: var(--color-accent-deep); font-weight: 500; text-underline-offset: 0.2em; }
/* Booking-page gift (lib/gift.mjs): a short note after the booking is done. */
.confirm-gift { margin-top: var(--space-xl); padding: var(--space-lg); text-align: left; background: var(--color-accent-wash); border: var(--rule-hair) solid var(--color-accent-line); border-radius: var(--radius-modal); }
.confirm-gift-title { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); }
.confirm-gift-body, .confirm-gift-offer { margin: 0 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
.confirm-gift-offer strong { color: var(--color-ink); }
.confirm-gift-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit); padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.confirm-gift-btn:hover { background: var(--color-accent-deep); }
.confirm-gift-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.confirm-gift-alt, .confirm-gift-note { margin: var(--space-sm) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.confirm-gift-alt a { color: var(--color-ink-2); }
.confirm-gift-sign:empty { display: none; }
.confirm-gift-sign { margin: var(--space-sm) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.btn-home { width: 100%; }

/* Cancel page */
.cancel-card { max-width: 480px; margin: var(--space-xl) auto var(--space-2xl); padding: var(--space-xl) var(--space-lg); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-modal); }
.cancel-card h1 { font-size: var(--text-2xl); margin-bottom: var(--space-xs); }
.cancel-card > p { margin-bottom: var(--space-md); color: var(--color-ink-2); }
.cancel-detail { margin: 0 0 var(--space-xs); padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-control); }
.cancel-detail .label { font-size: var(--text-sm); color: var(--color-muted); }
.cancel-detail .value { margin-top: var(--space-3xs); font-weight: 500; overflow-wrap: anywhere; }
.cancel-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.cancel-card .state-error { color: var(--color-error-deep); }
.cancel-card .state-success { color: var(--color-success); }
.cancel-card .btn { margin-top: var(--space-xs); }
.cancel-actions .btn { margin-top: 0; }

/* Phone layout (body.is-phone, set by book.js under 640px): days across the
   top, the day's times in a grid below. The month grid and "Change day" go. */
.day-strip { display: none; }
.is-phone #back-to-date { display: none; }
.is-phone .day-strip { position: relative; display: flex; gap: var(--space-xs); margin: 0 calc(-1 * var(--space-lg)) var(--space-sm); padding: var(--space-2xs) var(--space-lg) var(--space-xs); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--space-lg); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.is-phone .day-strip::-webkit-scrollbar { display: none; }
.day-chip { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3xs); min-width: 60px; min-height: 64px; padding: var(--space-xs) var(--space-sm); border: 1px solid transparent; border-radius: var(--radius-control); background: var(--color-accent-wash); color: var(--color-accent-deep); font-family: var(--font-body); cursor: pointer; scroll-snap-align: start; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.day-chip__dow { font-size: var(--text-xs); font-weight: 500; }
.day-chip__num { font-size: var(--text-lg); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.day-chip:hover:not([aria-pressed="true"]) { border-color: var(--color-accent); }
.day-chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.is-phone .time-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; overflow: visible; padding: 0; }
.is-phone .time-slot { padding-inline: var(--space-2xs); font-size: var(--text-sm); }

.time-slots::-webkit-scrollbar { width: 6px; }
.time-slots::-webkit-scrollbar-thumb { background: var(--color-rule-2); border-radius: var(--radius-pill); }

@media (min-width: 768px) {
  .booking-card { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
  .event-sidebar { padding: var(--space-xl) var(--space-lg); border-bottom: 0; border-right: var(--rule-hair) solid var(--color-rule); }
  .booking-main { padding: var(--space-xl); }
  .time-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 400px; }
}
@media (max-width: 30rem) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .cancel-card { padding: var(--space-lg) var(--space-md); }
}

/* Host home (public/book/home): the host's name and one card per booking page. */
.host-home { max-width: 640px; }
.host-name { font-size: var(--text-2xl); line-height: 1.15; margin: var(--space-lg) 0 var(--space-xs); }
.host-lead { color: var(--color-ink-2); margin: 0 0 var(--space-lg); }
.event-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.event-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name go" "meta go"; align-items: center; gap: var(--space-3xs) var(--space-md); padding: var(--space-md) var(--space-lg); min-height: var(--hit); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-modal); box-shadow: var(--shadow-card); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.event-card:hover { border-color: var(--color-accent); background: var(--color-accent-wash); }
.event-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.event-card-name { grid-area: name; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.event-card-meta { grid-area: meta; color: var(--color-ink-2); font-size: var(--text-sm); }
.event-card-go { grid-area: go; color: var(--color-accent-deep); font-size: var(--text-xl); }