/* Generated by packages/shared/scripts/build-guide.ts. Do not edit. */
:root {
  --ink: #171717;
  --muted: #525252;
  --faint: #a3a3a3;
  --line: #e5e5e5;
  --bg: #fafafa;
  --card: #ffffff;
  --soft: #f5f5f5;
  --blue: #1d4ed8;
  --amber: #b45309;
  --green: #15803d;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar-inner { max-width: 66rem; margin: 0 auto; padding: 0 1rem; display: flex;
  align-items: center; gap: .5rem; min-height: 3.5rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink);
  text-decoration: none; font-weight: 650; letter-spacing: -.01em; }
.brand img { border-radius: .4rem; }
.brand span { white-space: nowrap; }
.bar-nav { margin-left: auto; display: none; align-items: center; gap: .25rem; }
.bar-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .625rem;
  font-size: .875rem; color: var(--muted); text-decoration: none; }
.bar-nav a:hover { color: var(--ink); }
.bar-cta { margin-left: auto; flex-shrink: 0; white-space: nowrap; display: inline-flex;
  align-items: center; border-radius: .4rem; background: var(--ink); color: #fff;
  font-size: .875rem; font-weight: 600; text-decoration: none; min-height: 2.25rem;
  padding: 0 .875rem; }

/* Small-screen menu, built on <details> so the pages need no JavaScript. */
.bar-menu summary { list-style: none; display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-right: -.625rem; border-radius: .4rem;
  color: var(--muted); cursor: pointer; }
.bar-menu summary::-webkit-details-marker { display: none; }
.bar-menu summary:hover { background: var(--soft); color: var(--ink); }
.bar-menu .i-close { display: none; }
.bar-menu[open] .i-open { display: none; }
.bar-menu[open] .i-close { display: block; }
/* Positioned against the bar, which is sticky, so the panel spans its full
   width and stays put while the page scrolls underneath. */
.bar-menu > nav { position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column; padding: 0 1rem .5rem;
  background: var(--card); border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.07); }
.bar-menu > nav a { display: flex; align-items: center; min-height: 3rem; font-size: .9375rem;
  color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.bar-menu > nav a:first-child { border-top: 0; }

@media (min-width: 46rem) {
  .bar-nav { display: flex; }
  .bar-cta { margin-left: .25rem; }
  .bar-menu { display: none; }
}

/* Layout */
.shell { max-width: 66rem; margin: 0 auto; padding: 0 1rem 1rem; }
.grid { display: grid; gap: 3rem; }
main { min-width: 0; }
@media (min-width: 62rem) {
  .grid { grid-template-columns: 15rem minmax(0, 42rem); gap: 4rem; align-items: start;
    justify-content: center; }
  .toc { grid-column: 1; grid-row: 1; position: sticky; top: 5rem;
    max-height: calc(100vh - 7rem); overflow-y: auto; padding-right: .5rem; }
  main { grid-column: 2; grid-row: 1; }
}

/* Contents sidebar */
.toc { border-top: 1px solid var(--line); padding-top: 1.5rem; }
@media (min-width: 62rem) { .toc { border-top: 0; padding-top: 0; } }
.toc-home { display: block; font-size: .8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink); text-decoration: none; margin-bottom: .75rem; }
.toc-list, .toc-list ul { list-style: none; margin: 0; padding: 0; }
.toc-group { margin-bottom: 1.25rem; }
.toc-heading { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); margin-bottom: .25rem; }
.toc-list a { display: block; padding: .3rem 0 .3rem .625rem; font-size: .875rem;
  color: var(--muted); text-decoration: none; border-left: 2px solid var(--line);
  line-height: 1.5; min-height: 2.25rem; }
.toc-list a:hover { color: var(--ink); background: var(--soft); }
.toc-list a[aria-current="page"] { color: var(--ink); font-weight: 600; border-left-color: var(--ink); }

/* Breadcrumbs */
.crumbs { padding: 1rem 0 .25rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0;
  font-size: .8125rem; color: var(--faint); }
.crumbs li + li::before { content: "›"; margin-right: .375rem; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Article */
article { padding-bottom: 1rem; }
h1 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -.025em; margin: .5rem 0 0; }
.lede { font-size: 1.0625rem; color: var(--muted); margin: .875rem 0 0; }
h2 { font-size: 1.3125rem; letter-spacing: -.015em; margin: 3rem 0 .25rem; scroll-margin-top: 5rem; }
h3 { font-size: 1.0625rem; margin: 2rem 0 .25rem; scroll-margin-top: 5rem; }
h4 { font-size: .9375rem; margin: 1.5rem 0 .25rem; }
p, li, dd, dt, td, th { font-size: .9375rem; }
p { margin: .75rem 0; }
ul, ol { padding-left: 1.375rem; }
li { margin: .375rem 0; }
strong { font-weight: 650; }
@media (min-width: 40rem) { h1 { font-size: 2.25rem; } }
.anchor { margin-left: .4rem; color: var(--line); text-decoration: none; font-weight: 400;
  opacity: 0; transition: opacity .1s; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; color: var(--faint); }

/* "In short" answer box */
.answer { margin: 1.5rem 0 0; padding: .875rem 1.125rem; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: .5rem; }
.answer-label { display: block; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); margin-bottom: .125rem; }
.answer p { margin: .25rem 0 0; }

/* On this page */
.onpage { margin: 2rem 0 0; padding: .875rem 1.125rem; background: var(--card);
  border: 1px solid var(--line); border-radius: .5rem; }
.onpage-label { display: block; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); }
.onpage ul { list-style: none; padding: 0; margin: .375rem 0 0; }
.onpage li { margin: 0; }
.onpage a { font-size: .875rem; color: var(--muted); text-decoration: none; display: inline-block;
  padding: .1875rem 0; }
.onpage a:hover { color: var(--ink); text-decoration: underline; }
/* A long directory list reads better in columns than as one tall wall. */
@media (min-width: 46rem) { .onpage-cols ul { columns: 2; column-gap: 2rem; } }
.onpage-cols li { break-inside: avoid; }

/* Steps */
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0; }
ol.steps > li { counter-increment: step; position: relative; padding: 0 0 0 2.25rem;
  margin: 0 0 1rem; }
ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: .1875rem;
  width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 650; display: flex; align-items: center; justify-content: center; }
ol.steps > li > :first-child { margin-top: 0; }
ol.steps > li > :last-child { margin-bottom: 0; }

/* Callouts */
.note, .tip, .warn { margin: 1.25rem 0; padding: .75rem 1rem; border-radius: .5rem;
  border: 1px solid var(--line); background: var(--card); border-left: 3px solid var(--faint); }
.note > :first-child, .tip > :first-child, .warn > :first-child { margin-top: 0; }
.note > :last-child, .tip > :last-child, .warn > :last-child { margin-bottom: 0; }
.tip { border-left-color: var(--green); }
.warn { border-left-color: var(--amber); }
/* The label is often a short sentence rather than a word like "Note", and
   sentence-length text set in uppercase is hard to read. */
.note b, .tip b, .warn b { display: block; font-size: .875rem; font-weight: 650;
  margin-bottom: .125rem; }
.note b { color: var(--muted); }
.tip b { color: var(--green); }
.warn b { color: var(--amber); }

/* UI paths, keys and code */
.path { display: inline-block; background: var(--soft); border: 1px solid var(--line);
  border-radius: .3rem; padding: 0 .375rem; font-weight: 600; font-size: .9em;
  white-space: nowrap; }
code { background: var(--soft); border-radius: .25rem; padding: .0625rem .3125rem;
  font-size: .875em; word-break: break-word; }
pre { background: var(--soft); border: 1px solid var(--line); border-radius: .5rem;
  padding: .875rem 1rem; overflow-x: auto; font-size: .8125rem; line-height: 1.6; }
pre code { background: none; padding: 0; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 1.25rem 0; }
table { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: .5rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem .75rem;
  border-bottom: 1px solid var(--line); }
th { font-size: .8125rem; font-weight: 650; background: var(--soft); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   /developers: the API reference
   --------------------------------------------------------------------------- */

/* Code blocks carry shell and JSON, which wrap badly; let them scroll instead. */
pre.code { margin: 1rem 0; }
pre.code code { white-space: pre; }

/* METHOD /path, so an endpoint is scannable down the page. */
.endpoint { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .5rem 0 .75rem; }
.endpoint code { font-size: .8125rem; background: var(--soft); padding: .1875rem .4375rem; }
.method { display: inline-block; border-radius: .25rem; padding: .125rem .4375rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .03em; color: #fff; }
/* Colour by side effect, not prettiness: green reads, blue writes, red removes. */
.method-get { background: var(--green); }
.method-post { background: var(--blue); }
.method-delete { background: #b91c1c; }

.opid { margin: -.25rem 0 1rem; font-size: .8125rem; color: var(--muted); }
.opid code { font-size: .9em; }

.ref-table { margin: .75rem 0 1.5rem; display: block; overflow-x: auto;
  white-space: normal; }
.ref-table td:first-child code { white-space: nowrap; }
.ref-table th:nth-child(3), .ref-table td:nth-child(3) { white-space: nowrap; }
.req, .opt { font-size: .6875rem; font-weight: 650; white-space: nowrap; }
.req { color: var(--amber); }
.opt { color: var(--faint); }

/* Nested object fields, collapsed: a fully expanded booking is a wall of rows. */
details.nested { margin-top: .375rem; }
details.nested > summary { cursor: pointer; font-size: .75rem; color: var(--blue); }
details.nested .ref-table { margin: .5rem 0 .25rem; font-size: .8125rem; }

/* h4 does real work on the reference (Query parameters / Request body / Returns).
   Bare, like h2 and h3 above: the body has no wrapper class to hang it off. */
h4 { margin: 1.25rem 0 .25rem; font-size: .875rem; font-weight: 650;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Definition lists for field reference */
dl.fields { margin: 1.25rem 0; }
dl.fields dt { font-weight: 650; margin-top: .875rem; }
dl.fields dd { margin: .125rem 0 0; color: var(--muted); }

/* FAQ */
.faq .qa { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: 1.25rem; }
.faq h3 { margin-top: .5rem; }

/* Related + hub cards */
.related ul, .hub ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .625rem; }
.related a, .hub a { display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: .625rem; padding: .875rem 1rem; text-decoration: none; color: var(--ink); }
.related a:hover, .hub a:hover { border-color: var(--faint); }
.related strong, .hub strong { display: block; font-size: .9375rem; }
.related span, .hub span { display: block; font-size: .875rem; color: var(--muted); margin-top: .125rem; }
@media (min-width: 40rem) { .hub ul { grid-template-columns: 1fr 1fr; } }

/* Task shortcuts on the hub */
.tasks { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .625rem; }
.tasks a { display: flex; align-items: baseline; gap: .625rem; background: var(--card);
  border: 1px solid var(--line); border-radius: .625rem; padding: .875rem 1rem;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9375rem; }
.tasks a:hover { border-color: var(--faint); }
.tasks a span { font-weight: 400; color: var(--muted); font-size: .875rem; }

/* Prev / next */
.pager { display: grid; gap: .625rem; margin: 2.5rem 0 1rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line); }
@media (min-width: 40rem) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: .625rem; padding: .75rem 1rem; text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: var(--faint); }
.pager span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); }
.pager strong { font-size: .9375rem; }
.pager-next { text-align: right; }

.updated { font-size: .8125rem; color: var(--faint); margin-top: 2.5rem; }

/* Footer */
.foot { border-top: 1px solid var(--line); margin-top: 2rem; background: var(--card); }
.foot-inner { max-width: 66rem; margin: 0 auto; padding: 2rem 1rem 0; display: flex;
  flex-direction: column; gap: 1.5rem; font-size: .8125rem; }
.foot-brand { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .9375rem; }
.foot-brand img { border-radius: .375rem; }
.foot address { font-style: normal; color: var(--muted); margin-top: .5rem; line-height: 1.7; }
.foot nav { display: flex; flex-direction: column; }
.foot nav a { color: var(--muted); display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot-copy { max-width: 66rem; margin: 0 auto; padding: 1.5rem 1rem 2rem; font-size: .8125rem;
  color: var(--faint); }
@media (min-width: 40rem) {
  .foot-inner { flex-direction: row; justify-content: space-between; }
  .foot nav { text-align: right; }
  .foot nav a { min-height: 1.75rem; }
}

@media print {
  .bar, .toc, .pager, .onpage, .foot, .crumbs { display: none; }
  body { background: #fff; }
  .grid { display: block; }
  a { color: var(--ink); text-decoration: underline; }
}
/* Industry pages */
.toc-cat { display: block; padding: .3rem 0 .3rem .625rem; font-size: .875rem; font-weight: 600;
  color: var(--muted); text-decoration: none; border-left: 2px solid var(--line);
  line-height: 1.5; min-height: 2.25rem; }
.toc-cat:hover { color: var(--ink); background: var(--soft); }
.toc-cat[aria-current="page"] { color: var(--ink); border-left-color: var(--ink); }
.toc-group .toc-cat + ul a { padding-left: 1.25rem; font-weight: 400; }

.niche { border-top: 1px solid var(--line); padding-top: .25rem; margin-top: 2.5rem; }
.niche h2 { margin-top: .75rem; }
.niche .note { margin-bottom: .5rem; }
.ask { font-size: .875rem; color: var(--muted); }
.more { font-size: .875rem; }

/* The recommended-setup table: a two-column reference, label on the left. */
table.setup th { width: 11rem; white-space: normal; vertical-align: top;
  font-weight: 650; background: var(--soft); }
@media (max-width: 34rem) {
  table.setup, table.setup tbody, table.setup tr, table.setup th, table.setup td { display: block; }
  table.setup th { width: auto; background: none; padding-bottom: 0; border-bottom: 0; }
  table.setup td { padding-top: .125rem; }
}

/* Industry hub */
.hub-cats { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .625rem; }
@media (min-width: 46rem) { .hub-cats { grid-template-columns: 1fr 1fr; } }
.hub-cats > li { background: var(--card); border: 1px solid var(--line); border-radius: .625rem; }
/* Only the card's own link is a block; the trade links beneath it stay inline
   so the separators between them do not end up on lines of their own. */
.hub-cats > li > a { display: block; padding: .875rem 1rem .5rem; text-decoration: none;
  color: var(--ink); }
.hub-cats > li:hover { border-color: var(--faint); }
.hub-cats strong { display: block; font-size: .9375rem; }
.hub-cats span { display: block; font-size: .875rem; color: var(--muted); margin-top: .125rem; }
.hub-count { font-size: .75rem !important; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint) !important; margin-top: .375rem !important; }
.hub-deep { display: block; padding: 0 1rem .875rem; font-size: .8125rem; color: var(--faint);
  line-height: 1.6; }
.hub-deep a { color: var(--muted); display: inline; }

/* Closing call to action */
.cta-block { margin-top: 3rem; padding: 1.25rem 1.5rem; background: var(--card);
  border: 1px solid var(--line); border-radius: .75rem; }
.cta-block h2 { margin-top: 0; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  padding: 0 1.125rem; background: var(--ink); color: #fff; border-radius: .5rem;
  font-size: .9375rem; font-weight: 600; text-decoration: none; }
.cta-quiet { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .5rem;
  font-size: .9375rem; }