/*
 * meet.vendorica.com — the page around the booking widget, in
 * "The Register".
 *
 * Hand-written rather than Tailwind: one page, about forty rules, and
 * pulling the website's build chain in to generate them would cost more
 * to maintain than the rules themselves. Every value is taken from
 * `apps/website/design-system/tokens.json` and
 * `apps/website/docs/DESIGN-SYSTEM.md`, so the page is the design
 * system rather than a lookalike.
 *
 * The three things a Register page must get right, and each of which
 * this file got WRONG on its first pass:
 *
 *   1. THE FONTS ARE THE IDENTITY. Newsreader and Instrument Sans are
 *      self-hosted; a generic `ui-serif, Georgia` stack renders the
 *      page as the FALLBACK of Vendorica, which reads as a different
 *      company on a screen shown next to vendorica.com.
 *   2. RADII ARE NEAR-SQUARE. 4px controls, 2px hairlines. §3.3 retires
 *      the 12–24px soft-card language outright — the pill shape is
 *      reserved for chips so it stays meaningful.
 *   3. ELEVATION IS A HAIRLINE, NOT A SHADOW, and hover changes border
 *      or background, never a transform.
 */

/* ── Fonts ──────────────────────────────────────────────────────────
 *
 * Copied into `dist/fonts/` by the build from the website's
 * `public/fonts/`, rather than fetched from it at runtime: a
 * cross-origin font request would need a CORS header on the other host
 * and would put this page's first paint behind that host's uptime.
 *
 * The `Fallback` faces carry the website's measured `size-adjust`
 * metrics so the swap does not shift the layout.
 */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/Newsreader-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia');
  size-adjust: 101.73%;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/InstrumentSans-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial');
  size-adjust: 101.11%;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

:root {
  /* Surfaces + ink, from tokens.json §1.1–1.2 */
  --paper: #faf8f3;
  --paper-raised: #fdfcfa;
  --paper-sunken: #f3f0e9;
  --ink: #191a22;
  --ink-secondary: #555a67;
  --ink-tertiary: #828795;

  /* §3.4 — elevation is this line, not a shadow. */
  --line: rgba(25, 26, 34, 0.14);
  --line-strong: rgba(25, 26, 34, 0.45);

  /* §1.3 — seal red, the only chromatic voice. */
  --accent: #c0442e;

  --serif: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --sans:
    'Instrument Sans', 'Instrument Sans Fallback', system-ui, 'Segoe UI',
    sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* §3.3 — near-square. */
  --radius-hairline: 2px;
  --radius-control: 4px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* §3.1 — 4px base scale; 64px above, 96px of breathing room below so
     a short slot grid does not sit against the fold. */
  padding: 64px 24px 96px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}

.shell {
  /* Narrower than `container.prose` (46rem): the widget's slot grid is
     the content, and it reads as a form rather than as prose. */
  max-width: 38rem;
  margin: 0 auto;
}

.head {
  margin-bottom: 48px;
}

.brand {
  display: inline-block;
  margin-bottom: 48px;
}

.brand img {
  display: block;
  height: 26px;
  width: auto;
}

/*
 * §2.1 `eyebrow` — mono, 0.75rem, 500, 0.08em, UPPERCASE.
 *
 * The eyebrow + serif-heading pair is the standard section opener
 * (§6.1), and it is what gives the page its third voice: §2 requires at
 * least two, and a page with only serif and sans reads as a generic
 * editorial layout rather than as this system.
 */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin: 0 0 12px;
}

/* §2.1 `display` — the page h1. */
.title {
  font-family: var(--serif);
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 16px;
}

/* §2.1 `body-lg` — lede paragraphs only. */
.lede {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-secondary);
  max-width: 34rem;
  text-wrap: pretty;
}

/*
 * The panel the widget paints into.
 *
 * It carries the frame so the widget does not have to: an embed drawing
 * its own would draw a second one on any host page that already had a
 * card, which is why the widget deliberately has no background.
 */
#mount {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 32px;
}

.boot {
  margin: 0;
  color: var(--ink-tertiary);
}

.foot {
  margin-top: 48px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
}

/*
 * §2.2 — links are underlined, never a bare colour change (WCAG 1.4.1),
 * and hover shifts both the underline and the text to accent.
 */
.foot a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.foot a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── The meeting-type picker ────────────────────────────────────────
 *
 * Shown when somebody arrives at the bare host, having not been sent a
 * particular link. Same near-square hairline language as everything
 * else: the row lifts by changing its border, never by moving.
 */
.vm-types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vm-type {
  display: block;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}

.vm-type:hover {
  border-color: var(--line-strong);
  background: var(--paper-sunken);
}

.vm-type-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 550;
  line-height: 1.2;
}

/* Mono, because a duration and a host are the `data` voice — the same
   register as the timestamps inside the widget below. */
.vm-type-meta {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-tertiary);
}

.vm-type-blurb {
  display: block;
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}

/* ── The widget, restyled to the system ─────────────────────────────
 *
 * The widget is built to INHERIT its host's look and ships neutral
 * greys and 6px radii so it lands unobtrusively on a third party's
 * page. On our own host that neutrality is the wrong answer — it is
 * visibly not Vendorica sitting inside a Vendorica frame — so this is
 * the one place that deliberately reaches into `.vb-`.
 *
 * Kept to colour, radius and hover ONLY. Layout, spacing and structure
 * stay the widget's, so a change to its markup cannot be broken from
 * here; the worst a mismatch can do is leave one element in its default
 * grey.
 *
 * **Every selector is prefixed `#mount`, and that is not decoration.**
 * The widget injects its stylesheet into `document.head` AT RUNTIME —
 * after this file's <link> — so on equal specificity it wins every
 * property it declares. A bare `.vb-slot { border-radius }` silently
 * lost to the widget's 6px while `.vb-h { font-family }` applied,
 * because the widget declares one and not the other. The id raises
 * specificity above anything a class-only sheet can reach, so the
 * result no longer depends on which properties the widget happens to
 * set today.
 */
#mount .vb-h {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 550;
  letter-spacing: 0;
}

#mount .vb-tz,
#mount .vb-daylabel {
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

#mount .vb-btn,
#mount .vb-slot,
#mount .vb-input,
#mount .vb-textarea {
  border-radius: var(--radius-control);
  border-color: var(--line);
  color: var(--ink);
}

#mount .vb-btn:hover:not(:disabled),
#mount .vb-slot:hover {
  /* §3.4 — hover changes the border, never a lift. */
  border-color: var(--line-strong);
  background: var(--paper-sunken);
}

#mount .vb-slot[aria-pressed='true'],
#mount .vb-slot[aria-pressed='true']:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

#mount .vb-slot {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

#mount .vb-label {
  color: var(--ink-secondary);
}

#mount .vb-err {
  color: var(--accent);
}

#mount .vb-chosen,
#mount .vb-done-h {
  font-family: var(--serif);
  font-weight: 550;
}

#mount .vb-join {
  color: var(--accent);
}

/* ── Mobile ─────────────────────────────────────────────────────────
 *
 * §2.1 gives every type token a mobile size and §3.1 halves the
 * vertical rhythm (96/64 → 64/32). The slot grid is what actually
 * decides the breakpoint: it is `repeat(auto-fill, minmax(150px, 1fr))`,
 * so below ~30rem it collapses to one column and the panel's padding is
 * the difference between three slots per screen and two.
 */
@media (max-width: 40rem) {
  body {
    padding: 32px 16px 64px;
  }

  .head {
    margin-bottom: 32px;
  }

  .brand {
    margin-bottom: 32px;
  }

  .title {
    font-size: 2.125rem;
  }

  .lede {
    font-size: 1rem;
  }

  #mount {
    padding: 20px 16px;
  }

  .vm-type {
    padding: 14px;
  }

  .vm-type-name {
    font-size: 1.125rem;
  }

  .foot {
    margin-top: 32px;
  }
}