/* Personal scheduling. Scoped separately from the site's intro-call dialog. */
.meet-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
/* Keep the language toggle legible when dark controls scroll under the frosted nav. */
.meet-page .language { color: var(--ink); }
.meet-main {
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  padding-block: 120px 0;
  flex: 1;
}
.meet-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 20px 80px rgba(23, 22, 19, 0.04);
  min-height: 480px;
}
.meet-host {
  padding: 32px;
  border-inline-end: 1px solid var(--line);
  background: linear-gradient(
    155deg,
    rgba(213, 205, 255, 0.17),
    rgba(255, 223, 181, 0.09) 65%,
    transparent
  );
}
.meet-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.meet-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.meet-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.6);
  transform-origin: center top;
}
.meet-person p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}
.meet-person span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}
.meet-durations {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.meet-durations legend,
.meet-zone-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}
.meet-duration-options {
  display: flex;
  gap: 4px;
  background: rgba(23, 22, 19, 0.045);
  border-radius: 12px;
  padding: 4px;
}
.meet-duration-options button {
  flex: 1;
  padding: 9px 2px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.meet-duration-options button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}
.meet-zone {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  font: inherit;
  font-size: 12px;
  background: var(--bg);
  color: var(--ink);
}
.meet-mode {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
}
.meet-mode svg {
  width: 17px;
  height: 17px;
}
.meet-picker {
  padding: 32px;
  min-width: 0;
  position: relative;
}
.meet-selection {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 160px;
  gap: 28px;
}
.meet-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 8px;
}
.meet-calendar-head h2,
.meet-times h2 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.4;
}
.meet-arrows {
  display: flex;
  gap: 6px;
}
.meet-arrows button {
  height: 32px;
  width: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.meet-arrows button:disabled {
  opacity: 0.35;
  cursor: default;
}
.meet-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.meet-calendar .weekday {
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  padding-bottom: 10px;
}
.meet-calendar button {
  width: 100%;
  padding: 0;
  max-width: 42px;
  justify-self: center;
  aspect-ratio: 1;
  border: 0;
  background: var(--card);
  color: var(--ink);
  border-radius: 50%;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.meet-calendar button:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}
.meet-calendar button:disabled {
  background: transparent;
  color: var(--muted);
  cursor: default;
  box-shadow: none;
  opacity: 0.6;
}
.meet-calendar button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}
.meet-calendar button[aria-current="date"]:not([aria-pressed="true"]) {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.meet-calendar-note {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.meet-times h2 {
  margin: 6px 0 20px;
}
.meet-time-list {
  display: grid;
  gap: 8px;
  max-height: 332px;
  overflow-y: auto;
  padding: 3px;
  scrollbar-width: thin;
}
.meet-time {
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.meet-time:hover {
  border-color: var(--ink);
  background: var(--card);
}
.meet-state {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 440px;
}
.meet-state h2 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: 16px 0;
}
.meet-state p {
  font-size: 15px;
  color: var(--muted);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.meet-state a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.meet-form {
  max-width: 420px;
  margin-inline: auto;
  scroll-margin-top: 96px;
}
.meet-form h2 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  margin: 18px 0 12px;
  letter-spacing: -0.035em;
}
.meet-summary {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px;
}
.meet-back {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.meet-form label {
  display: block;
  font-size: 13px;
  margin-bottom: 16px;
}
.meet-form input,
.meet-form textarea {
  display: block;
  margin-top: 6px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  /* iOS zooms focused fields below 16px, including inherited label text. */
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
}
.meet-form textarea {
  resize: vertical;
  min-height: 72px;
}
.meet-form .button {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.meet-page button.button {
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 550;
  cursor: pointer;
}
.meet-error {
  font-size: 14px;
  line-height: 1.5;
}
.meet-honey {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.meet-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: meet-spin 1s linear infinite;
}
@keyframes meet-spin {
  to {
    transform: rotate(360deg);
  }
}
.meet-page :is(input, textarea, select):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
html[dir="rtl"] .meet-form h2 {
  letter-spacing: 0;
}
@media (max-width: 960px) {
  .meet-card {
    grid-template-columns: 240px 1fr;
  }
  .meet-host,
  .meet-picker {
    padding: 24px;
  }
  .meet-selection {
    grid-template-columns: minmax(200px, 1fr) 120px;
    gap: 20px;
  }
}
@media (max-width: 760px) {
  .meet-main {
    width: calc(100% - 32px);
    padding-block: 104px 0;
  }
  .meet-card {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }
  .meet-host {
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
    padding: 22px;
  }
  .meet-person {
    margin-bottom: 18px;
  }
  .meet-mode {
    display: none;
  }
  .meet-durations {
    margin-bottom: 16px;
  }
  .meet-zone {
    max-width: 100%;
    font-size: 14px;
  }
  .meet-duration-options button,
  .meet-time,
  .meet-back {
    min-height: 44px;
    font-size: 14px;
  }
  .meet-arrows button {
    width: 44px;
    height: 44px;
  }
  .meet-selection {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .meet-picker {
    padding: 22px;
  }
  .meet-calendar {
    gap: 7px;
  }
  .meet-calendar button {
    max-height: 46px;
  }
  .meet-time-list {
    grid-template-columns: repeat(3, 1fr);
    max-height: none;
    overflow: visible;
  }
  .meet-time {
    scroll-margin-top: 96px;
  }
  .meet-times h2 {
    margin: 0 0 12px;
  }
  .meet-state {
    min-height: 220px;
  }
}
@media (max-width: 380px) {
  .meet-host,
  .meet-picker {
    padding: 18px 16px;
  }
  .meet-calendar {
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .meet-spinner {
    animation: none;
  }
}
/* City search, shared visually by the guest and owner timezone pickers. */
.meet-zone,
.zone-trigger {
  display: grid;
  gap: 4px;
  text-align: start;
  cursor: pointer;
  min-height: 52px;
}
.meet-zone small,
.zone-trigger small { color: var(--muted); font-size: 12px; }
.zone-dialog,
.meet-details-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: min(620px, calc(100svh - 32px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(23, 22, 19, .15);
  overflow: hidden;
}
.zone-dialog[open] { display: flex; flex-direction: column; gap: 16px; }
:is(.zone-dialog, .meet-details-dialog)::backdrop { background: rgba(23, 22, 19, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.zone-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0; }
.zone-heading h2 { font: inherit; font-size: 21px; font-weight: 500; margin: 0; }
:is(.zone-dialog, .meet-details-dialog) button.zone-close { width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font: inherit; font-size: 24px; cursor: pointer; }
.zone-dialog input.zone-search { width: 100%; min-height: 48px; flex-shrink: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.zone-count { margin: 0; color: var(--muted); font-size: 12px; flex-shrink: 0; }
.zone-results { overflow-y: auto; min-height: 0; overscroll-behavior: contain; padding: 4px; }
.zone-dialog button.zone-choice { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 64px; border: 0; border-radius: 12px; padding: 12px; text-align: start; color: var(--ink); background: transparent; font: inherit; font-size: 14px; cursor: pointer; }
.zone-choice > span { min-width: 0; overflow-wrap: anywhere; }
.zone-choice small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.zone-choice > small { white-space: nowrap; }
.zone-dialog button.zone-choice:hover,
.zone-dialog button.zone-choice[aria-pressed="true"] { background: var(--card); }
:is(.zone-dialog, .meet-details-dialog) :is(button, input):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 480px) { .zone-dialog, .meet-details-dialog { padding: 18px; border-radius: 20px; } .zone-heading h2 { font-size: 19px; } }

/* The details step shares the time-zone dialog's frame and backdrop. */
html:has(.meet-details-dialog[open]) { overflow: hidden; }
.meet-details-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.meet-details-dialog .meet-form { max-width: none; margin: 0; }
.meet-details-dialog .zone-heading { margin-bottom: 16px; }
.meet-details-dialog .zone-heading h2 { font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: 0; margin: 0; }
.meet-details-dialog .meet-back { display: block; margin: 16px auto 0; min-height: 44px; }
.meet-details-dialog .meet-summary { line-height: 1.5; }
.meet-details-dialog .meet-honey { left: 0; top: 0; clip-path: inset(50%); }
.meet-details-dialog button.zone-close { width: 44px; height: 44px; }
.meet-details-dialog button:disabled { cursor: wait; opacity: .6; }
/* Color (founder pick from five mocks, 2026-09-20): the homepage orbs behind a frosted card,
   faded peach on days you can pick, faded lavender on times you can take. The chosen day and
   the duration stay ink. The orbs are body backgrounds, not positioned elements, so nothing
   overflows the viewport on phones. */
body.meet-page {
  background:
    radial-gradient(circle 240px at calc(100% - 60px) 30px, rgba(255, 223, 181, .62), rgba(255, 223, 181, 0) 100%),
    radial-gradient(circle 260px at 60px 700px, rgba(213, 205, 255, .6), rgba(213, 205, 255, 0) 100%),
    var(--bg);
}
html[dir="rtl"] body.meet-page {
  background:
    radial-gradient(circle 240px at 60px 30px, rgba(255, 223, 181, .62), rgba(255, 223, 181, 0) 100%),
    radial-gradient(circle 260px at calc(100% - 60px) 700px, rgba(213, 205, 255, .6), rgba(213, 205, 255, 0) 100%),
    var(--bg);
}
.meet-card { background: rgba(253, 252, 250, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 80px rgba(23, 22, 19, .06); }
.meet-host { background: transparent; }
.meet-calendar button { background: rgba(255, 223, 181, .26); }
.meet-calendar button:hover { background: rgba(255, 223, 181, .55); box-shadow: none; }
.meet-calendar button:disabled { background: transparent; }
.meet-calendar button[aria-pressed="true"] { background: var(--ink); }
.meet-time { background: rgba(213, 205, 255, .2); border-color: transparent; }
.meet-time:hover { background: rgba(213, 205, 255, .45); border-color: transparent; }

@media (max-height: 480px) {
  .zone-dialog { padding: 16px; }
  .zone-dialog[open] { gap: 10px; }
}

.meet-personal-title {
  max-width: 23ch;
  margin: 0 0 32px;
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
[lang="he"] .meet-personal-title { letter-spacing: 0; line-height: 1.3; }

/* Completed bookings replace the entire picker, including its editable options. */
.meet-main.meet-complete {
  width: min(440px, calc(100% - 40px));
  padding-block: 112px 32px;
}
.meet-confirmation {
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(253, 252, 250, .92);
  box-shadow: 0 12px 40px rgba(23, 22, 19, .025);
}
.meet-success-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 19px;
  border-radius: 50%;
  background: var(--card);
  font-size: 22px;
}
.meet-confirmation h1 {
  margin: 0;
  font-size: 29px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -1px;
}
/* This static heading receives success focus; interactive links keep their rings. */
.meet-confirmation h1:focus { outline: none; }
.meet-confirmed-host { margin: 10px 0 26px; font-size: 14px; color: var(--muted); }
.meet-confirmed-details { padding-block: 23px; border-block: 1px solid var(--line); }
.meet-confirmed-date { margin: 0 0 9px; font-size: 19px; line-height: 1.4; font-weight: 550; letter-spacing: -.35px; }
.meet-confirmed-time { margin: 0 0 5px; font-size: 22px; line-height: 1.35; font-weight: 550; letter-spacing: -.4px; }
.meet-confirmed-time span { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.meet-confirmed-zone { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.meet-confirmed-delivery { margin: 22px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.meet-confirmed-email { display: block; margin-top: 5px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.meet-home { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-height: 44px; margin: 24px auto 0; font-size: 14px; color: var(--muted); }
.meet-home::before { content: "←"; }
[dir="rtl"] .meet-home::before { content: "→"; }
.meet-home:hover { color: var(--ink); }
[lang="he"] .meet-confirmation h1 { letter-spacing: 0; line-height: 1.3; }
[lang="he"] .meet-confirmed-date { letter-spacing: 0; }
[dir="rtl"] .meet-confirmed-email { text-align: right; }
body.meet-page.meet-confirmed {
  background:
    radial-gradient(ellipse at 100% 4%, rgba(255, 232, 196, .22), transparent 50%),
    radial-gradient(ellipse at 0% 75%, rgba(213, 205, 255, .25), transparent 58%),
    var(--bg);
}
html[dir="rtl"] body.meet-page.meet-confirmed {
  background:
    radial-gradient(ellipse at 0% 4%, rgba(255, 232, 196, .22), transparent 50%),
    radial-gradient(ellipse at 100% 75%, rgba(213, 205, 255, .25), transparent 58%),
    var(--bg);
}
@media (min-width: 761px) {
  .meet-main.meet-complete { padding-top: 144px; }
  .meet-confirmation { padding: 36px; }
}
@media (max-width: 360px) {
  .meet-main.meet-complete { width: calc(100% - 28px); padding-top: 98px; }
  .meet-confirmation { padding: 25px 20px; }
  .meet-confirmation h1 { font-size: 27px; }
  .meet-confirmed-date { font-size: 18px; }
}

/* A personalized booking page becomes interactive only after a saved-link lookup. */
.meet-page .meet-card:not(.invitation-ready):not(.meet-confirmed) { grid-template-columns: 1fr; }
.meet-page .meet-card:not(.invitation-ready) > .meet-host { display: none; }
.meet-duration-options > [hidden] { display: none; }