:root { --ink:#202536; --muted:#747b8b; --paper:#f7f8fc; --surface:#fff; --hover:rgba(65,105,225,.07); --accent:#4169e1; --error:#a42b26; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; } body { margin:0; } [hidden] { display:none!important; }
main { display:grid; grid-template-columns:280px minmax(0,1fr); max-width:1080px; margin:clamp(24px,8vh,96px) auto; background:var(--surface); border-radius:20px; box-shadow:0 12px 64px rgba(38,62,140,.04); overflow:hidden; }
header { padding:40px 32px; background:#fafbff; } .workspace { padding:36px; min-width:0; }
.wordmark { font-size:13px; font-weight:600; letter-spacing:.08em; text-decoration:none; color:var(--accent); }
#eyebrow { margin-top:48px; font-size:12px; color:var(--muted); }
h1 { font-size:30px; line-height:1.15; letter-spacing:-.04em; font-weight:550; margin:16px 0 28px; overflow-wrap:anywhere; }
h2 { font-size:21px; font-weight:550; letter-spacing:-.025em; margin:0 0 28px; } h3 { font-size:13px; font-weight:500; margin:0 0 16px; }
p { line-height:1.65; } .meta { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); } .meta svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
.description { font-size:14px; color:var(--muted); margin-top:32px; } #error { color:var(--error); font-size:13px; } #error:empty,#status:empty { display:none; } #status,#meeting-state { font-size:13px; color:var(--muted); }
button,input,select { font:inherit; } button,a.primary { border:0; background:var(--hover); color:var(--ink); border-radius:9px; padding:12px 16px; font-size:13px; cursor:pointer; text-decoration:none; transition:background 140ms,color 140ms; } button:hover { background:rgba(65,105,225,.13); } button:disabled { opacity:.35; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.primary,a.primary,button[aria-pressed=true] { background:var(--accent); color:white; } .primary:hover { background:#3558c8; }
.calendar-layout { display:grid; grid-template-columns:minmax(0,1fr) 145px; gap:28px; } .toolbar { display:flex; align-items:center; justify-content:space-between; margin:0 0 24px; } #range { font-size:14px; font-weight:500; } .toolbar button { background:transparent; font-size:24px; padding:2px 12px; }
.weekdays,.dates { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; text-align:center; } .weekdays { font-size:10px; color:var(--muted); margin-bottom:12px; } .dates button { aspect-ratio:1; padding:0; border-radius:50%; background:var(--hover); color:var(--accent); font-weight:550; } .dates button:disabled { background:transparent; color:var(--muted); opacity:.5; } .dates button[aria-pressed=true] { background:var(--accent); color:white; } .dates button[aria-current=date] { text-decoration:underline; text-underline-offset:4px; }
.time-panel { padding-top:8px; } .times { display:grid; gap:8px; max-height:338px; overflow:auto; padding:3px; } .times button { padding:12px 8px; } .timezone { margin-top:28px; } label { display:grid; gap:8px; font-size:12px; color:var(--muted); } input,select { min-width:0; width:100%; border:0; background:var(--paper); padding:12px; color:var(--ink); border-radius:8px; font-size:13px; }
form { max-width:440px; display:grid; gap:20px; } form h2 { margin-bottom:0; } #chosen { font-size:14px; margin:0 0 8px; color:var(--accent); } .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; } #join { display:inline-block; margin-top:16px; } #cancel-check { font-size:13px; } #cancel-check button { margin:6px; }
@media(max-width:900px) { main { margin:24px; grid-template-columns:220px minmax(0,1fr); } header,.workspace { padding:28px 24px; } .calendar-layout { grid-template-columns:minmax(0,1fr); } .times { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:210px; } }
@media(max-width:600px) { main { margin:12px; grid-template-columns:1fr; border-radius:14px; } header { padding:24px; } #eyebrow { margin-top:24px; } h1 { font-size:26px; margin-bottom:16px; } .description { margin:16px 0 0; } .meta { display:inline-flex; margin:0 16px 0 0; } .workspace { padding:28px 20px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }

.time-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.time-heading h3 { margin:0; }
#time-format { padding:6px 8px; font-size:11px; color:var(--accent); }
.times { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:390px; }
.times h4 { grid-column:1/-1; font-size:11px; font-weight:500; color:var(--muted); margin:12px 0 4px; }
.times button { padding:11px 4px; font-size:12px; }
.calendar-layout { grid-template-columns:minmax(0,1fr) 190px; }
.note-section summary { cursor:pointer; color:var(--accent); font-size:13px; padding:8px 0; }
.note-section summary span { color:var(--muted); margin-left:8px; font-size:11px; }
.note-section label { margin:12px 0 8px; }
.note-section textarea { width:100%; resize:vertical; border:0; border-radius:8px; padding:12px; font:inherit; font-size:13px; line-height:1.6; color:var(--ink); background:var(--paper); }
.note-section textarea:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:900px) { .calendar-layout { grid-template-columns:minmax(0,1fr); } .times { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:270px; } }

/* Feedback follows real interactions; nothing delays a selection. */
button,a.primary { transition:background 140ms,color 140ms,transform 140ms,opacity 140ms; }
button:active:not(:disabled),a.primary:active { transform:scale(.97); }
button.pending { cursor:progress; opacity:.7; }
button.pending::after { content:""; display:inline-block; width:11px; height:11px; margin-left:8px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-1px; animation:booking-spin .7s linear infinite; }
input,select,textarea { transition:background 140ms,box-shadow 140ms; }
input:focus,textarea:focus { background:var(--surface); box-shadow:0 0 0 3px var(--hover); }
.times { scrollbar-width:thin; scrollbar-color:var(--hover) transparent; overscroll-behavior:contain; }
.note-section summary { border-radius:6px; transition:color 140ms; }
.note-section summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.note-section[open] label { animation:booking-reveal 160ms ease-out; }
@keyframes booking-spin { to { transform:rotate(360deg); } }
@keyframes booking-reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }