/* Pilot booking dialog (shared by the website and the onboarding deck).
   Uses the colour and font tokens from tokens.css only. */
@layer tokens, base, components, sections, utilities;

@layer components{
  .book{width:min(560px,calc(100% - 32px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--text);box-shadow:0 40px 90px -30px var(--shadow-ink);overscroll-behavior:contain;overflow-y:auto}
  .book::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  html.book-open,html.book-open body{overflow:hidden}
  .book [hidden]{display:none!important}
  .book-panel{padding:28px;display:grid;gap:22px}
  .book-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
  .book-tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
  .book h2{font-family:var(--head);font-size:clamp(26px,4vw,32px);font-weight:700;letter-spacing:-0.03em;line-height:1.1;margin:8px 0 0}
  .book-sub{color:var(--muted);font-size:15px;line-height:1.5;margin:8px 0 0}
  .book-x{flex:none;margin-inline-start:auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--control-line);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0;touch-action:manipulation}
  .book-x .ico{width:20px;height:20px}
  .book.is-done .book-head>div{display:none}
  .book form{display:grid;gap:18px;margin:0}
  .book-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .book .f{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;font-size:14px;font-weight:600;min-width:0}
  .book .f.wide{grid-column:1 / -1}
  .book .f small{font-size:13px;font-weight:400;color:var(--muted)}
  .book input,.book select,.book textarea{display:block;width:100%;min-width:0;min-height:48px;margin:0;font-family:var(--body);font-size:16px;font-weight:400;color:var(--text);background:var(--bg);border:1.5px solid var(--control-line);border-radius:12px;padding:12px 14px;-webkit-appearance:none;appearance:none}
  .book select{cursor:pointer;padding-inline-end:40px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
  .book select:dir(rtl){background-position:22px 50%,16px 50%}
  .book textarea{resize:vertical;min-height:88px;line-height:1.45}
  .book input::placeholder,.book textarea::placeholder{color:var(--muted);opacity:1}
  .book input:focus,.book select:focus,.book textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)}
  .book [aria-invalid="true"]{border-color:var(--bad)}
  .f-err{font-size:13px;font-weight:500;line-height:1.4;color:var(--bad-text)}
  .book-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
  .book .btn{font-family:var(--body)}
  .book-send{width:100%;font-size:17px}
  .book-send[disabled]{opacity:.7;cursor:wait}
  .book-fine{font-size:13px;color:var(--muted);text-align:center;margin:-6px 0 0}
  .book-error{font-size:14px;line-height:1.5;color:var(--bad-text);margin:0;padding:12px 14px;border:1px solid var(--bad);border-radius:12px}
  .book-error a{font-weight:700;color:inherit}
  .book-done{display:grid;gap:16px;justify-items:start;outline:none}
  .book-done p{color:var(--muted);font-size:16px;line-height:1.55;margin:0}
  .book-done b{color:var(--text)}
  .book-check{width:54px;height:54px;border-radius:50%;background:var(--good-on-panel);color:var(--ink);display:grid;place-items:center}
  .book-check .ico{width:26px;height:26px;stroke-width:3}
  .book-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%;margin-block-start:4px}
  .book-actions .btn{flex:1 1 200px}
  .book-privacy{font-size:13px;color:var(--muted);text-align:center;margin:-6px 0 0}
  .book-privacy a{display:inline-flex;align-items:center;min-height:44px}

  /* day and time fields open a pop-up picker */
  .book .pick-field{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;margin:0;padding:12px 14px;font-family:var(--body);font-size:16px;font-weight:400;color:var(--text);text-align:start;background:var(--bg);border:1.5px solid var(--control-line);border-radius:12px;cursor:pointer;touch-action:manipulation}
  .book .pick-field:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)}
  .book .pick-field .ico{width:19px;height:19px;color:var(--accent-text)}
  .book .pick-field.is-empty .pick-val{color:var(--muted)}
  .pick-val{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pick{width:min(420px,calc(100% - 32px))}
  .pick h2{font-size:26px}
  .pick .book-panel{gap:18px}
  .cal-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-end:8px}
  .cal-month{margin:0;font-family:var(--head);font-size:18px;font-weight:700}
  .cal-nav{width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:12px;border:1px solid var(--control-line);background:transparent;color:var(--text);cursor:pointer;touch-action:manipulation}
  .cal-nav .ico{width:18px;height:18px}
  .cal-nav:disabled{opacity:.4;cursor:default}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
  .cal-dow{padding:6px 0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .cal-day{height:44px;min-width:0;padding:0;border-radius:12px;border:1.5px solid transparent;background:transparent;color:var(--text);font-family:var(--body);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation}
  .cal-day:disabled{color:var(--muted);font-weight:400;opacity:.5;cursor:default}
  .cal-day[aria-pressed="true"],.slot[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .slot{min-height:46px;padding:0;border-radius:12px;border:1.5px solid var(--control-line);background:var(--bg);color:var(--text);font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation}
  .pick-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-4px 0 12px;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid var(--control-line);background:transparent;color:var(--text);font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer;touch-action:manipulation}
  .pick-back .ico{width:16px;height:16px}
  .cal-day:focus-visible,.slot:focus-visible,.cal-nav:focus-visible,.pick-back:focus-visible,.book-x:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
  @media (hover:hover) and (pointer:fine){
    .book .pick-field:hover,.cal-day:hover:not(:disabled),.slot:hover{border-color:var(--accent)}
  }
  @media (prefers-reduced-motion: no-preference){
    .book[open]{animation:book-in .22s cubic-bezier(.23,1,.32,1)}
    @keyframes book-in{from{opacity:0;transform:translateY(14px)}}
  }

  /* phones: a sheet that slides up from the bottom */
  @media (max-width:640px){
    .book{width:100%;max-width:100%;max-height:92vh;max-height:92dvh;margin:auto 0 0;border-radius:22px 22px 0 0;border-block-end:none}
    .pick{margin:auto 0 0}
    .book-panel{padding:20px max(18px, env(safe-area-inset-left, 0px)) calc(22px + env(safe-area-inset-bottom, 0px));gap:18px}
    .book-grid{gap:12px}
    .book .f{grid-column:1 / -1}
    .book .f.half{grid-column:auto}
    .book .pick-field{padding:12px}
    .slots{grid-template-columns:repeat(3,1fr)}
  }
  /* small phones: the calendar uses the panel's side padding so each day stays at least 44 px wide (7 x 44 + gaps) */
  @media (max-width:380px){.pick .cal-grid{gap:2px;margin-inline:-6px}}
  @media (max-width:340px){.pick .cal-grid{gap:0;margin-inline:-12px}}
  @media (max-width:640px) and (prefers-reduced-motion: no-preference){
    .book[open]{animation-name:book-up}
    @keyframes book-up{from{opacity:.4;transform:translateY(48px)}}
  }
}