/* Huddle booking page layout. Composes the Design System tokens + component CSS
   (loaded first via /assets/ds/styles.css) into the guest scheduling flow. The DS
   owns colors, type, radii, controls; this file owns the page/flow layout only. */

.hb-app {
  min-height: 100vh;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
}
.hb-boot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

@keyframes hb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes hb-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes hb-ring { 0% { transform: scale(.8); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hb-anim, .hb-check, .hb-ring, .hb-skel, .hb-slotskel { animation: none !important; }
}

/* ---- brand header ---- */
.hb-header { display: flex; align-items: center; gap: 8px; padding: 18px 24px; }
.hb-header img { display: block; }
.hb-header .hb-wordmark { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }

/* ---- page + card ---- */
.hb-wrap { max-width: 1120px; margin: 0 auto; padding: 8px 20px 40px; }
.hb-card {
  display: grid;
  grid-template-columns: 330px 1fr;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.hb-card--centered { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }

/* ---- detail panel ---- */
.hb-detail { padding: 26px 24px; border-right: 1px solid var(--border-subtle); background: var(--bg-card); }
.hb-detail__host { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.hb-avatar {
  width: 48px; height: 48px; border-radius: var(--radius-pill); flex: 0 0 auto;
  background: var(--primary-tint); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--text-md); overflow: hidden;
}
.hb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hb-detail__hostname { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; margin-top: 4px; }
.hb-detail__title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; line-height: var(--leading-xl); margin-top: 2px; }
.hb-detail__desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-sm); margin: 18px 0 0; text-wrap: pretty; }
.hb-welcome {
  display: flex; gap: 8px; margin-top: 16px; padding: 12px 14px;
  background: var(--primary-tint); border-radius: 10px;
}
.hb-meta { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.hb-meta__row { display: flex; align-items: center; gap: 10px; }
.hb-meta__row span.hb-ico { color: var(--text-muted); display: inline-flex; }
.hb-meta__row span.hb-txt { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; }
.hb-summary { margin-top: 20px; padding: 14px; background: var(--primary-tint); border-radius: 10px; }
.hb-summary__time { display: flex; align-items: center; gap: 8px; color: var(--primary); }
.hb-summary__time span { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.hb-summary__date { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 4px; }
.hb-summary__extra {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--indigo-100); font-size: var(--text-xs); font-weight: 600; color: var(--primary);
}

/* ---- main panel ---- */
.hb-main { padding: 26px 26px 28px; min-width: 0; }
.hb-anim { animation: hb-fade .2s ease both; }

/* progress */
.hb-prog__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.hb-eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.hb-prog__pct { font-size: var(--text-xs); font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.hb-prog__bar { height: 6px; width: 100%; background: var(--bg-surface); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 18px; }
.hb-prog__fill { height: 100%; background: var(--primary); border-radius: var(--radius-pill); transition: width .2s ease; }
.hb-prog__dots { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hb-step { display: flex; align-items: center; gap: 8px; }
.hb-step__dot {
  width: 22px; height: 22px; border-radius: var(--radius-pill); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border-subtle);
}
.hb-step--active .hb-step__dot { background: var(--bg-surface); color: var(--primary); border-color: var(--primary); }
.hb-step--done .hb-step__dot { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.hb-step__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.hb-step--active .hb-step__label { color: var(--text-primary); font-weight: 600; }
.hb-step--done .hb-step__label { color: var(--text-secondary); }

/* headings */
.hb-h { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.hb-sub { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 18px; text-wrap: pretty; }
.hb-form { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.hb-inputwrap { position: relative; display: block; }
.hb-inputwrap__ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: inline-flex; }
.hds-input.hb-input--hasicon { padding-left: 38px; }

/* pick step */
.hb-pick { display: grid; grid-template-columns: 1fr 190px; gap: 28px; max-width: 600px; }
.hb-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hb-cal__month { font-size: var(--text-md); font-weight: 600; }
.hb-cal__nav { display: flex; gap: 4px; }
.hb-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.hb-dow span { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 4px 0; }
.hb-weeks { display: flex; flex-direction: column; gap: 4px; }
.hb-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hb-day {
  aspect-ratio: 1 / 1; border: none; border-radius: var(--radius-pill); background: transparent;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--text-primary);
  cursor: pointer; transition: background-color .12s ease, color .12s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.hb-day:hover:not(:disabled) { background: var(--bg-hover); }
.hb-day--muted { color: var(--text-disabled); }
.hb-day:disabled { color: var(--text-disabled); cursor: default; }
.hb-day--avail { color: var(--primary); font-weight: 600; background: var(--primary-tint); }
.hb-day--avail:hover { background: var(--primary-tint-2); }
.hb-day--sel { background: var(--primary); color: var(--on-primary); }
.hb-day--sel:hover { background: var(--primary-hover); }
.hb-day--today { box-shadow: inset 0 0 0 1px var(--border-default); }
.hb-skel { border-radius: 10px; aspect-ratio: 1/1; background: linear-gradient(90deg, var(--bg-surface), var(--bg-hover), var(--bg-surface)); background-size: 200% 100%; animation: hb-shimmer 1.2s ease-in-out infinite; }
.hb-nextavail { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 12px; background: var(--bg-surface); border-radius: 10px; }
.hb-nextavail span { font-size: var(--text-sm); color: var(--text-secondary); }
.hb-nextavail button { background: none; border: none; padding: 0; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--text-link); cursor: pointer; }
.hb-nextavail button:hover { text-decoration: underline; }

/* time list */
.hb-times__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.hb-times__day { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-fmt { display: inline-flex; flex: 0 0 auto; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 2px; }
.hb-fmt button { border: none; background: transparent; font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer; }
.hb-fmt button.on { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.hb-slots { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.hb-slots::-webkit-scrollbar { width: 8px; }
.hb-slots::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }
.hb-slot {
  height: 44px; flex-shrink: 0; border: 1px solid var(--border-default); border-radius: 8px;
  background: var(--bg-card); box-shadow: var(--shadow-xs); font: inherit; font-size: var(--text-sm);
  font-weight: 600; color: var(--text-primary); cursor: pointer; transition: border-color .12s, color .12s, background-color .12s;
}
.hb-slot:hover { border-color: var(--primary); color: var(--primary); }
.hb-slot--sel { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.hb-slotskel { height: 44px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(90deg, var(--bg-surface), var(--bg-hover), var(--bg-surface)); background-size: 200% 100%; animation: hb-shimmer 1.2s ease-in-out infinite; }
.hb-nodate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 300px; color: var(--text-muted); text-align: center; border: 1px solid var(--border-subtle); border-radius: 12px; }
.hb-nodate span { font-size: var(--text-sm); max-width: 180px; text-wrap: pretty; }

/* time zone + actions */
.hb-tzrow { display: flex; align-items: flex-end; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.hb-tzrow .hb-tzfield { flex: 1; min-width: 220px; }
.hb-tzrow .hb-tzfield .hds-select { height: 44px; }
.hb-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.hb-actions .hb-grow { flex: 1; min-width: 180px; }

/* two/three column form rows */
.hb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* option rows (recurrence / location) */
.hb-optrow {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px;
  background: var(--bg-card); box-shadow: var(--shadow-xs); cursor: pointer; font: inherit;
  transition: border-color .12s ease, background-color .12s ease;
}
.hb-optrow:hover { border-color: var(--border-strong); }
.hb-optrow--sel { border-color: var(--primary); background: var(--primary-tint); }
.hb-optrow__badge { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--bg-surface); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.hb-optrow--sel .hb-optrow__badge { background: var(--bg-card); color: var(--primary); }
.hb-optrow__title { display: block; font-size: var(--text-md); font-weight: 600; color: var(--text-primary); }
.hb-optrow__detail { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }

/* review + confirmed cards */
.hb-panel { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow-xs); overflow: hidden; }
.hb-review__row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.hb-review__row:last-child { border-bottom: none; }
.hb-review__label { flex: 0 0 120px; font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; }
.hb-review__val { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-primary); text-wrap: pretty; }

.hb-confirmed { max-width: 460px; margin: 0 auto; text-align: center; padding: 8px 0; }
.hb-badge { position: relative; width: 64px; height: 64px; margin: 4px auto 18px; }
.hb-badge__ring { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--success-surface); animation: hb-ring 1.1s ease-out .1s both; }
.hb-badge__core { position: relative; width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--success); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px color-mix(in srgb, var(--success) 30%, transparent); animation: hb-pop .4s cubic-bezier(.16,.84,.44,1) both; }
.hb-confirmed__title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; }
.hb-confirmed__sub { font-size: var(--text-sm); color: var(--text-secondary); margin: 8px 0 22px; text-wrap: pretty; }
.hb-detailcard { text-align: left; }
.hb-detailcard__head { padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.hb-detailcard__title { font-size: var(--text-md); font-weight: 600; }
.hb-detailcard__host { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.hb-detailcard__body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.hb-drow { display: flex; align-items: flex-start; gap: 10px; }
.hb-drow span.hb-ico { color: var(--text-muted); display: inline-flex; margin-top: 1px; }
.hb-drow .hb-drow__main { font-size: var(--text-sm); }
.hb-drow__strike { color: var(--text-muted); text-decoration: line-through; }
.hb-join { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 8px; background: var(--primary); color: #fff; font-size: var(--text-md); font-weight: 600; margin-top: 16px; }
.hb-join:hover { background: var(--primary-hover); text-decoration: none; }
.hb-calgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hb-calbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-card); box-shadow: var(--shadow-xs); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.hb-calbtn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.hb-change { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--text-sm); color: var(--text-muted); }
.hb-change button { background: none; border: none; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--text-link); cursor: pointer; }

/* file upload dropzone */
.hb-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; cursor: pointer; position: relative;
  border: 1px dashed var(--border-default); border-radius: 12px; padding: 28px 20px;
  background: var(--bg-card); transition: border-color .12s ease, background-color .12s ease;
}
.hb-dropzone:hover, .hb-dropzone--drag { border-color: var(--primary); background: var(--primary-tint); }

/* info / danger banners inline */
.hb-info { display: flex; gap: 10px; align-items: flex-start; background: var(--info-surface); border: 1px solid var(--info-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.hb-info span.hb-ico { color: var(--info); display: inline-flex; margin-top: 1px; }
.hb-consent { padding: 4px 0; }
.hb-fielderror { font-size: var(--text-xs); color: var(--danger); margin-top: 6px; }

.hb-footer { text-align: center; padding: 0 0 24px; font-size: var(--text-xs); color: var(--text-muted); }
.hb-footer span { font-weight: 600; color: var(--text-secondary); }

.hb-notfound { max-width: 460px; margin: 60px auto; text-align: center; color: var(--text-secondary); }
.hb-notfound h1 { font-size: var(--text-xl); font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }

/* ---- responsive: stack under 720px ---- */
@media (max-width: 720px) {
  .hb-card { grid-template-columns: 1fr; }
  .hb-detail { border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .hb-pick { grid-template-columns: 1fr; }
  .hb-pick.hb-pick--nodate .hb-times { display: none; }
}