/* /switch — moving from Zoom or Google Meet.

   Every rule is scoped under `.swc` (the page's <main>). docs.css styles every
   `.docmain p`, `h2`, `ul`, `li` and `section` itself, one selector heavier than a lone
   class, and lost us side padding and headline sizes on the booking page the same week
   (AGENTS.md, 2026-10-23). Colours are tokens only — a hex here is a colour that is
   wrong in one of the two themes. */

.docmain.swc{max-width:1136px}
.swc[data-state="in"]{max-width:900px}

/* ── signed out: the landing — sign in on the left, the three steps beside it ── */
.swc[data-state="out"]{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:20px 48px;
  align-items:center;padding-top:56px}
.swc[data-state="out"] .docfoot{grid-column:1/-1}
.swc[data-state="loading"] .swc-gate,.swc[data-state="loading"] .swc-gatefine{visibility:hidden}
.swc[data-state="in"] .swc-gate,.swc[data-state="in"] .swc-gatefine{display:none}

.swc .swc-top{padding:8px 0 0}
.swc[data-state="in"] .swc-top{padding:40px 0 8px}
.swc .swc-eyebrow{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);max-width:none}
/* Sized so "in a couple of minutes" holds one line beside the steps at desktop width —
   at 56px it broke after "of", and a promise of speed should not stall mid-phrase. */
.swc .swc-top h1{margin:0;font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(32px,3.9vw,48px);line-height:1.06;letter-spacing:-.03em}
.swc[data-state="in"] .swc-top h1{font-size:clamp(28px,3.6vw,40px);line-height:1.1}
.swc .swc-grad{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.swc p.swc-lede{margin:22px 0 0;font-size:clamp(16px,1.5vw,18px);line-height:1.62;color:var(--mid);max-width:56ch}
.swc[data-state="in"] p.swc-lede{margin-top:14px;font-size:16px}
.swc .swc-gate{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:30px 0 0;min-height:44px}
.swc .swc-gbtn{min-height:44px;min-width:200px}
.swc a.swc-alt{font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;padding:11px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel)}
.swc a.swc-alt:hover{color:var(--acc);border-color:var(--acc);text-decoration:none}
.swc p.swc-gatefine{margin:20px 0 0}

/* ── the three steps ───────────────────────────────────────────────────────── */
.swc .swc-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:none}
.swc[data-state="in"] .swc-steps{margin:26px 0 8px}
.docmain.swc .swc-steps > li{margin:0}
.swc .swc-step{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:18px 20px 20px;
  transition:box-shadow .2s,border-color .2s}
.swc[data-state="out"] .swc-step{background:linear-gradient(180deg,var(--panel),var(--sunk));padding:16px 18px}
/* The step to do next wears the gradient edge, and only its main button is the gradient
   one — one obvious action per state, whichever step that is. */
.swc[data-state="in"] .swc-step.now{border-color:transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;box-shadow:var(--shadow)}
.swc .swc-shead{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:start}
.swc .swc-n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:700;
  font-size:17px;color:var(--cloud);background:var(--grad)}
.swc .swc-step.done .swc-n{background:var(--good);font-size:0}
.swc .swc-step.done .swc-n::after{content:'✓';font-size:18px}
.swc .swc-stitle h2{margin:2px 0 4px;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.swc[data-state="in"] .swc-stitle h2{font-size:19px}
.swc .swc-stitle p.swc-sum{margin:0;font-size:14px;line-height:1.55;color:var(--mid);max-width:62ch}
.swc .swc-tick{align-self:center;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--good);
  padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--good) 45%,transparent)}
.swc .swc-tick[hidden]{display:none}
.swc .swc-body{margin:16px 0 0 54px}
.swc .swc-body[hidden]{display:none}

/* ── buttons ───────────────────────────────────────────────────────────────── */
.swc .swc-go,.swc .swc-ghost{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 20px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;text-align:center;
  text-decoration:none;white-space:nowrap}
.swc .swc-go{color:var(--cloud);background:var(--grad);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--violet) 70%,transparent)}
.swc .swc-go:hover{filter:brightness(1.08);text-decoration:none;color:var(--cloud)}
.swc .swc-ghost{color:var(--ink);background:var(--panel2);border:1px solid var(--line)}
.swc .swc-ghost:hover{border-color:var(--acc);text-decoration:none;color:var(--ink)}
.swc .swc-go:focus-visible,.swc .swc-ghost:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.swc .swc-go[disabled],.swc .swc-ghost[disabled]{opacity:.55;cursor:default;filter:none}
/* Not the step to do next: its main button steps down to the outline style. */
.swc[data-state="in"] .swc-step:not(.now) .swc-go{color:var(--ink);background:var(--panel2);border:1px solid var(--line);box-shadow:none}
.swc[data-state="in"] .swc-step:not(.now) .swc-go:hover{border-color:var(--acc);filter:none}
.swc .swc-small{min-height:36px;padding:7px 14px;font-size:13.5px;border-radius:10px}

/* ── small print, messages ─────────────────────────────────────────────────── */
.swc p.swc-fine{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--dim);max-width:66ch}
.swc p.swc-fine a{color:var(--acc)}
.swc p.swc-text{margin:0 0 12px;font-size:14.5px;line-height:1.6;color:var(--mid);max-width:64ch}
.swc p.swc-heads{margin:0 0 16px;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.55;color:var(--mid);max-width:none;
  background:color-mix(in srgb,var(--warn) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line))}
.swc p.swc-heads b{color:var(--ink)}
.swc p.swc-err,.swc p.swc-msg{margin:14px 0 0;padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.55;max-width:none}
.swc p.swc-err{color:var(--ink);background:color-mix(in srgb,var(--bad) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--bad) 40%,var(--line))}
.swc p.swc-msg{color:var(--ink);background:var(--panel2);border:1px solid var(--line)}
.swc p.swc-msg.bad{background:color-mix(in srgb,var(--bad) 10%,var(--panel));border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.swc p.swc-msg.ok{background:color-mix(in srgb,var(--good) 10%,var(--panel));border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.swc p.swc-err[hidden],.swc p.swc-msg[hidden]{display:none}
.swc .swc-mono{font-family:var(--mono);font-size:.94em;color:var(--ink)}

/* ── step 1: the link ──────────────────────────────────────────────────────── */
.swc .swc-makerow{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.swc label.swc-handle{flex:1 1 300px;min-width:0;display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;
  background:var(--sunk);overflow:hidden;cursor:text}
.swc label.swc-handle:focus-within{border-color:var(--acc)}
.swc .swc-pre,.swc .swc-post{font-family:var(--mono);font-size:14px;color:var(--dim);white-space:nowrap}
.swc .swc-pre{padding-left:13px}
.swc .swc-post{padding-right:13px}
.swc label.swc-handle input{all:unset;flex:1;min-width:3ch;font-family:var(--mono);font-size:14px;color:var(--ink);padding:12px 1px}
.swc p.swc-free{margin:8px 0 0;min-height:1.2em;font-family:var(--mono);font-size:12px;color:var(--dim)}
.swc p.swc-free.ok{color:var(--good)}
.swc p.swc-free.no{color:var(--warn)}
.swc .swc-linkrow{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:16px 18px;border-radius:16px;
  border:1px solid var(--line);background:var(--sunk)}
.swc .swc-url{min-width:0;flex:1 1 260px;font-family:var(--mono);font-size:clamp(15px,2vw,19px);color:var(--ink);overflow-wrap:anywhere}
.swc .swc-acts{display:flex;gap:8px;flex-wrap:wrap}
.swc .swc-uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 0}
.swc .swc-use{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 15px;border-radius:14px;border:1px solid var(--line);background:var(--panel2)}
.swc .swc-use b{font-size:14px;color:var(--ink)}
.swc .swc-use span{font-size:13px;line-height:1.55;color:var(--mid)}
.swc pre.swc-invite{margin:2px 0 4px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;background:var(--sunk);border:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible}

/* ── step 2: the calendar ──────────────────────────────────────────────────── */
.swc .swc-undobar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;
  border-radius:12px;background:var(--panel2);border:1px solid var(--line);font-size:14px;color:var(--mid)}
.swc .swc-undobar[hidden]{display:none}
.swc .swc-undobar b{color:var(--ink)}
.swc .swc-cal[hidden],.swc .swc-idle[hidden]{display:none}
.swc .swc-group{margin:0 0 16px}
.swc .swc-cal h3{margin:0 0 8px;font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:0}
.swc .swc-rows{display:grid;gap:8px}
.swc .swc-row{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--sunk);cursor:pointer}
.swc .swc-row input[type=checkbox]{margin:3px 0 0;width:18px;height:18px;accent-color:var(--acc);cursor:pointer}
.swc .swc-row.off{cursor:default;background:transparent;border-style:dashed}
.swc .swc-row.off input{cursor:default}
.swc .swc-rmain{min-width:0;display:grid;gap:3px}
.swc .swc-rtitle{font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.swc .swc-rwhen{font-size:12.5px;color:var(--mid)}
.swc .swc-rdest{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--mid)}
.swc .swc-prov{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--ink);background:var(--panel)}
.swc .swc-to{min-width:0;overflow-wrap:anywhere}
.swc .swc-dest{font-family:var(--mono);font-size:12px;color:var(--ink);overflow-wrap:anywhere}
.swc .swc-why{font-size:12.5px;line-height:1.5;color:var(--mid)}
.swc .swc-why a{color:var(--acc)}
.swc .swc-res{font-size:13px;line-height:1.5;font-weight:500}
.swc .swc-res.ok{color:var(--good)}
.swc .swc-res.warn{color:var(--warn)}
.swc .swc-res.bad{color:var(--bad)}
.swc .swc-res.busy{color:var(--mid)}
.swc p.swc-left{margin:0 0 16px;font-size:13px;color:var(--dim);max-width:none}
.swc .swc-moverow{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:6px 0 0}
.swc .swc-moverow p{margin:0;font-size:13px;line-height:1.5;color:var(--mid);max-width:44ch}

/* ── step 3: the archive ───────────────────────────────────────────────────── */
.swc dl.swc-tools{margin:16px 0 0;display:grid;gap:8px}
.swc .swc-tools > div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 14px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.swc .swc-tools dt{font-size:14px;font-weight:600;color:var(--ink)}
.swc .swc-tools dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--mid)}
.swc .swc-tools dd b{font-weight:600;color:var(--ink)}

@media (max-width:940px){
  .swc[data-state="out"]{grid-template-columns:minmax(0,1fr);padding-top:30px;gap:30px}
}
@media (max-width:620px){
  .swc .swc-body{margin-left:0}
  .swc .swc-step{padding:16px 16px 18px}
  .swc .swc-shead{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .swc .swc-n{width:36px;height:36px;border-radius:11px;font-size:16px}
  .swc .swc-tick{grid-column:2;justify-self:start}
  .swc .swc-uses{grid-template-columns:minmax(0,1fr)}
  .swc .swc-tools > div{grid-template-columns:minmax(0,1fr)}
  .swc .swc-linkrow{padding:14px}
  .swc .swc-acts,.swc .swc-acts > *{flex:1 1 auto}
  .swc .swc-makerow > .swc-go,.swc .swc-moverow > .swc-go,.swc .swc-idle > .swc-go,.swc .swc-body > a.swc-go{width:100%}
  .swc label.swc-handle{flex-basis:auto}
}