/* The booking page (public/book/meet.js). Plain CSS, no build step; the hosted page and the builder's live preview both load it.
   Everything is under .mt- so it can't touch the app around it, and the accent comes in as --mt-accent, set by the script. */
.mt-root, .mt-root * { box-sizing: border-box; }
.mt-root {
  --mt-bg: #ffffff; --mt-fg: #1d1d1f; --mt-mu: #6e6e73; --mt-bd: #d2d2d7; --mt-soft: #f5f5f7; --mt-err: #c4271c; --mt-ok: #1a7f37;
  --mt-accent: #2f6bf5; --mt-on: #ffffff;
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--mt-fg); display: block;
}
body.mt-page, body.mt-embed { margin: 0; }
body.mt-page { background: #0b0b0d; } /* the hosted page is always dark, like the app; the embed keeps the light default because it sits inside someone else's page */
body.mt-embed { background: transparent; }
.mt-wrap { max-width: 920px; margin: 0 auto; padding: 32px 16px; }
.mt-embed .mt-wrap { padding: 0; max-width: none; }
body.mt-page .mt-root { --mt-bg: #1c1c1e; --mt-fg: #f5f5f7; --mt-mu: #a1a1a6; --mt-bd: #3a3a3c; --mt-soft: #2c2c2e; --mt-err: #ff6b61; --mt-ok: #5fd57f; color-scheme: dark; }
.mt-card { background: var(--mt-bg); border: 1px solid var(--mt-bd); border-radius: 16px; padding: 24px; }
.mt-embed .mt-card { border-radius: 12px; }
.mt-head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.mt-head h1, .mt-title { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; margin: 0; }
.mt-title { margin-bottom: 14px; }
.mt-owner { margin: 2px 0 0; color: var(--mt-mu); font-size: 14px; }
.mt-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--mt-soft); }
.mt-ini { display: inline-flex; align-items: center; justify-content: center; background: var(--mt-accent); color: var(--mt-on); font-weight: 700; font-size: 18px; }
.mt-intro { margin: 0 0 18px; white-space: pre-line; }
.mt-h2 { font-size: 17px; margin: 0 0 10px; }
.mt-meta { color: var(--mt-mu); font-size: 14px; }
.mt-desc { color: var(--mt-mu); font-size: 14px; margin: 4px 0 0; white-space: pre-line; display: block; }
.mt-note { color: var(--mt-mu); margin: 8px 0; }
.mt-warn { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--mt-err) 12%, transparent); color: var(--mt-err); font-size: 14px; }
.mt-confirm { white-space: pre-line; }

.mt-types { display: grid; gap: 10px; }
.mt-type { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--mt-bg); border: 1px solid var(--mt-bd); border-left: 4px solid var(--mt-accent); border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.mt-type:hover { background: var(--mt-soft); }
.mt-type:focus-visible, .mt-day:focus-visible, .mt-slot:focus-visible, .mt-btn:focus-visible, .mt-link:focus-visible, .mt-nav:focus-visible { outline: 2px solid var(--mt-accent); outline-offset: 2px; }
.mt-typebar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.mt-link { background: none; border: 0; padding: 0; margin: 0 0 10px; font: inherit; font-size: 14px; color: var(--mt-accent); cursor: pointer; text-decoration: underline; display: inline-block; }

.mt-pickh { font-size: 18px; margin: 4px 0 12px; }
.mt-picker { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; margin-top: 8px; }
@media (max-width: 720px) { .mt-picker { grid-template-columns: minmax(0, 1fr); } .mt-card { padding: 16px; } }
.mt-calhead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.mt-nav { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--mt-soft); color: var(--mt-fg); font-size: 20px; cursor: pointer; }
.mt-nav[disabled] { opacity: .35; cursor: default; }
.mt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.mt-dow { font-size: 12px; color: var(--mt-mu); padding: 4px 0; }
.mt-day { aspect-ratio: 1; min-height: 40px; border-radius: 50%; border: 0; background: none; color: var(--mt-mu); font: inherit; font-size: 15px; cursor: default; }
.mt-day.has { background: color-mix(in srgb, var(--mt-accent) 14%, transparent); color: var(--mt-accent); font-weight: 600; cursor: pointer; }
.mt-day.has:hover { background: color-mix(in srgb, var(--mt-accent) 26%, transparent); }
.mt-day.on { background: var(--mt-accent); color: var(--mt-on); }
.mt-day.today:not(.on) { box-shadow: inset 0 0 0 1px var(--mt-bd); }
.mt-zl { display: block; margin-top: 12px; font-size: 13px; color: var(--mt-mu); }
.mt-zone { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 14px; color: var(--mt-fg); background: var(--mt-bg); border: 1px solid var(--mt-bd); border-radius: 10px; padding: 8px 10px; }
.mt-dayh { font-size: 16px; margin: 0 0 10px; }
.mt-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; padding: 2px; }
.mt-slot { font: inherit; font-weight: 600; color: var(--mt-accent); background: var(--mt-bg); border: 1px solid var(--mt-accent); border-radius: 10px; padding: 10px 6px; cursor: pointer; }
.mt-slot:hover { background: var(--mt-accent); color: var(--mt-on); }

.mt-when { display: grid; gap: 2px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--mt-soft); }
.mt-when a { color: var(--mt-accent); }
.mt-form { max-width: 520px; }
.mt-f { margin: 0 0 14px; }
.mt-f label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 5px; }
.mt-req { color: var(--mt-err); }
.mt-f input, .mt-f textarea, .mt-f select { display: block; width: 100%; font: inherit; font-size: 16px; color: var(--mt-fg); background: var(--mt-bg); border: 1px solid var(--mt-bd); border-radius: 10px; padding: 10px 12px; margin: 0; }
.mt-f textarea { min-height: 100px; resize: vertical; }
.mt-f input:focus, .mt-f textarea:focus, .mt-f select:focus { outline: 2px solid var(--mt-accent); outline-offset: 1px; }
.mt-f [aria-invalid="true"] { border-color: var(--mt-err); }
.mt-err { color: var(--mt-err); font-size: 13px; margin: 4px 0 0; }
.mt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mt-btn { display: inline-block; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; color: var(--mt-on); background: var(--mt-accent); border: 0; border-radius: 10px; padding: 11px 22px; text-decoration: none; }
.mt-btn[disabled] { opacity: .6; cursor: default; }
.mt-btn.alt { background: var(--mt-soft); color: var(--mt-fg); }
.mt-btn.danger { background: var(--mt-err); color: #fff; }
.mt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 0; }
.mt-acts .mt-link { margin: 0; }
.mt-check { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mt-ok); color: #fff; font-size: 24px; margin: 0 0 10px; }

/* The hosted booking page on a computer: laid out and sized like the scheduling pages people already know. A card with a left pane (who, what, how long)
   and a right pane (pick a date, then the times appear beside the calendar). Everything is in em from one root size that follows the width of the
   window, so the card takes the same share of the screen whatever the browser zoom (a page left at 67% zoom is not a tiny page). The builder's
   live preview and the embed (iframe) keep the compact size, and phones are untouched. */
@media (min-width: 900px) {
  body.mt-page .mt-root { font-size: clamp(15px, 1.067vw, 34px); }
  body.mt-page .mt-wrap { max-width: none; padding: 4.5em 1em 3em; }
  body.mt-page .mt-card { width: 44em; max-width: calc(100vw - 2em); margin: 0 auto; padding: 2.5em; border-radius: .75em; box-shadow: 0 .2em 1.5em rgba(0, 0, 0, .45); }
  body.mt-page .mt-head { gap: 1em; margin-bottom: 1em; }
  body.mt-page .mt-head h1, body.mt-page .mt-title { font-size: 1.6em; }
  body.mt-page .mt-owner { font-size: 1em; }
  body.mt-page .mt-av { width: 3.6em; height: 3.6em; } body.mt-page .mt-ini { font-size: 1.4em; }
  body.mt-page .mt-intro { font-size: 1em; }
  body.mt-page .mt-h2 { font-size: 1.25em; }
  body.mt-page .mt-meta, body.mt-page .mt-desc, body.mt-page .mt-link, body.mt-page .mt-note, body.mt-page .mt-warn { font-size: 1em; }
  body.mt-page .mt-type { padding: 1.1em 1.3em; border-radius: .85em; } body.mt-page .mt-type b { font-size: 1.1em; }
  body.mt-page .mt-form { max-width: 36em; }
  body.mt-page .mt-f label { font-size: .95em; } body.mt-page .mt-f input, body.mt-page .mt-f textarea, body.mt-page .mt-f select { font-size: 1em; padding: .8em .9em; }
  body.mt-page .mt-btn { font-size: 1em; padding: .85em 1.5em; border-radius: .75em; }
  body.mt-page .mt-when { padding: 1em 1.1em; }

  /* the pick-a-time step: a left pane and a right pane in one card */
  body.mt-page .mt-card.pick { display: grid; grid-template-columns: 17.5em auto; width: max-content; padding: 0; min-height: 38em; align-content: start; }
  body.mt-page .mt-card.pick > * { grid-column: 1; margin-inline: 0; padding-inline: 2em; }
  body.mt-page .mt-card.pick > :first-child { padding-top: 2em; }
  body.mt-page .mt-card.pick > .mt-box { grid-column: 2; grid-row: 1 / span 20; padding: 2em; border-left: 1px solid var(--mt-bd); }
  body.mt-page .mt-card.pick .mt-av { width: 3em; height: 3em; } body.mt-page .mt-card.pick .mt-ini { font-size: 1.15em; }
  body.mt-page .mt-card.pick .mt-head { flex-direction: column; align-items: flex-start; gap: .6em; }
  body.mt-page .mt-card.pick .mt-head h1 { font-size: 1.15em; font-weight: 600; color: var(--mt-mu); } body.mt-page .mt-card.pick .mt-owner { display: none; }
  body.mt-page .mt-card.pick .mt-typebar { display: block; margin: 0 0 .7em; } body.mt-page .mt-card.pick .mt-typebar b { display: block; font-size: 1.85em; line-height: 1.15; letter-spacing: -.02em; margin-bottom: .45em; }
  body.mt-page .mt-card.pick .mt-dur { display: flex; align-items: center; gap: .5em; font-weight: 600; font-size: 1em; margin: 0 0 .35em; }
  body.mt-page .mt-card.pick .mt-dur::before { content: ""; width: 1.05em; height: 1.05em; flex: none; border-radius: 50%; border: .14em solid currentColor; background: linear-gradient(currentColor, currentColor) 50% 18% / .14em 38% no-repeat, linear-gradient(currentColor, currentColor) 50% 52% / 32% .14em no-repeat; } /* a clock drawn in plain CSS, because this stylesheet may not load any outside resource */
  body.mt-page .mt-card.pick .mt-loc { display: block; margin: 0 0 1em; }
  body.mt-page .mt-card.pick .mt-desc { color: var(--mt-fg); font-size: 1em; line-height: 1.5; margin: .9em 0 0; }
  body.mt-page .mt-pickh { font-size: 1.3em; margin: 0 0 1.3em; }
  body.mt-page .mt-card.pick .mt-picker { grid-template-columns: 24em auto; gap: 0; margin-top: 0; }
  body.mt-page .mt-calhead { margin-bottom: 1em; justify-content: flex-start; gap: .2em; } body.mt-page .mt-calhead b { order: -1; margin-right: auto; font-size: 1.05em; font-weight: 500; }
  body.mt-page .mt-nav { width: 2.4em; height: 2.4em; font-size: 1.3em; background: none; color: var(--mt-accent); }
  body.mt-page .mt-grid { gap: .35em .15em; }
  body.mt-page .mt-dow { font-size: .75em; padding: .6em 0; text-transform: uppercase; letter-spacing: .06em; }
  body.mt-page .mt-day { min-height: 3.2em; font-size: 1em; }
  body.mt-page .mt-zl { font-size: 1em; margin-top: 1.4em; font-weight: 700; color: var(--mt-fg); } body.mt-page .mt-zone { font-size: .95em; padding: .6em .7em; font-weight: 400; border: 0; padding-left: 0; }
  body.mt-page .mt-card.pick .mt-times { margin-left: 2.5em; width: 15em; } body.mt-page .mt-card.pick .mt-times.idle { display: none; }
  body.mt-page .mt-dayh { font-size: 1.05em; margin: 0 0 1em; }
  body.mt-page .mt-card.pick .mt-slots { grid-template-columns: 1fr; gap: .6em; max-height: 29em; padding-right: .3em; }
  body.mt-page .mt-slot { padding: .95em .5em; font-size: 1em; border-radius: .5em; }
}