/* Served from public/ with a year-long cache: after changing this file,
   bump the ?rev= on every page that links it (not ?v=, which is the
   icon/logo version faviconHelper.spec.js pins to ICON_VERSION). */
:root {
  --primary: #042ED6;
  --secondary: #718BF2;
  --blue-light: #AEBCF8;
  --bg: #F7F9FF;
  --white: #FFFFFF;
  --surface-low: #F1F3F9;
  --surface-med: #ECEEF4;
  --surface-high: #E6E8EE;
  --outline: #C5C5D8;
  --ink: #0A1130;
  --tight: -0.02em;
  --tighter: -0.03em;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 0 var(--surface-high), 0 8px 24px -16px rgba(10, 17, 48, 0.18);
  --shadow-code: inset 0 0 0 1px var(--surface-high);

  --sidebar-w: 280px;
  --content-max: 760px;
  --header-h: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: var(--tight);
  margin: 0 0 0.4em;
}

h1 { font-weight: 900; font-size: 40px; letter-spacing: var(--tighter); margin-top: 0; }
h2 { font-weight: 800; font-size: 26px; margin-top: 2.2em; }
h3 { font-weight: 700; font-size: 19px; margin-top: 1.8em; }
h4 { font-weight: 700; font-size: 15px; margin-top: 1.4em; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(10,17,48,0.6); }

p { margin: 0 0 1em; }

code, pre, kbd, samp {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13.5px;
}

p code, li code, td code {
  background: var(--surface-low);
  border: 1px solid var(--surface-high);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--ink);
  font-size: 13px;
}

pre {
  background: var(--ink);
  color: #E6E8EE;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: 1.55;
  margin: 0 0 1.4em;
  box-shadow: var(--shadow-card);
}
pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: 13px; }

.tok-key   { color: #AEBCF8; }
.tok-str   { color: #B7E8C2; }
.tok-com   { color: #7B83A8; font-style: italic; }
.tok-num   { color: #F2C28B; }
.tok-fn    { color: #F0B3FF; }

/* ---------- Top header ---------- */
.site-header {
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid var(--surface-high);
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 0 28px;
}
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: var(--tight);
  color: var(--ink);
}
.site-header .logo img {
  height: 28px;
  width: auto;
  display: block;
}
.site-header .logo .wordmark {
  font-size: 18px;
}
.site-header .docs-tag {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-header nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-weight: 600;
  font-size: 14px;
}
.site-header nav a { color: var(--ink); white-space: nowrap; }
.site-header nav a:hover { color: var(--primary); text-decoration: none; }
/* Language switch: the other locale's copy of the same page. */
.site-header nav a.lang-switch {
  padding: 2px 8px;
  border: 1px solid var(--blue-light);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ---------- Layout shell ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--header-h));
}

.sidebar {
  border-right: 1px solid var(--surface-high);
  background: var(--white);
  padding: 28px 18px 60px 28px;
  position: sticky;
  top: var(--header-h);
  align-self: start;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

.sidebar .group {
  margin-bottom: 22px;
}
.sidebar .group-title {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,17,48,0.55);
  font-weight: 700;
  margin: 0 8px 8px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar li a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
}
.sidebar li a:hover {
  background: var(--surface-low);
  text-decoration: none;
}
.sidebar li a.active {
  background: var(--blue-light);
  color: var(--primary);
  font-weight: 700;
}

/* ---------- Main content ---------- */
main.content {
  padding: 44px clamp(28px, 6vw, 72px);
  max-width: calc(var(--content-max) + 144px);
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 14px;
}

.lede {
  font-size: 18px;
  color: rgba(10,17,48,0.78);
  font-weight: 500;
  margin-bottom: 28px;
  max-width: 60ch;
  line-height: 1.45;
}

.callout {
  border: 1px dashed var(--outline);
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 1.4em;
  display: flex;
  gap: 12px;
}
.callout .tag {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
  padding-top: 2px;
}
.callout.note .tag { color: var(--primary); }
.callout.warn { border-color: #F2C28B; }
.callout.warn .tag { color: #B86E1A; }
.callout p:last-child { margin-bottom: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  background: var(--white);
  border: 1px solid var(--surface-high);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-high);
  vertical-align: top;
}
th {
  background: var(--surface-low);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(10,17,48,0.7);
}
tr:last-child td { border-bottom: 0; }

ul.docs-list, ol.docs-list {
  padding-left: 1.2em;
}
ul.docs-list li, ol.docs-list li { margin: 0.3em 0; }

/* ---------- Method/event cards ---------- */
.api-card {
  background: var(--white);
  border: 1px solid var(--surface-high);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin: 0 0 18px;
  box-shadow: var(--shadow-card);
}
.api-card h3 {
  margin-top: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
.api-card .sig {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  background: var(--surface-low);
  border: 1px solid var(--surface-high);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  color: rgba(10,17,48,0.85);
  display: inline-block;
}
.api-card .label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(10,17,48,0.55);
  margin: 14px 0 6px;
}

/* ---------- Pager ---------- */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--surface-high);
}
.pager a {
  display: block;
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--surface-high);
  border-radius: var(--radius-md);
  background: var(--white);
  font-weight: 600;
  color: var(--ink);
}
.pager a:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}
.pager .dir {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10,17,48,0.5);
  font-weight: 700;
  margin-bottom: 4px;
}
.pager .next { text-align: right; }

/* ---------- Hero (index only) ---------- */
.hero {
  background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
  border: 1px solid var(--surface-high);
  border-radius: var(--radius-lg);
  padding: 56px clamp(28px, 5vw, 56px);
  margin-bottom: 36px;
}
.hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: var(--tighter);
  margin-bottom: 14px;
}
.hero p {
  font-size: 18px;
  color: rgba(10,17,48,0.72);
  max-width: 55ch;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}
.cards a {
  display: block;
  background: var(--white);
  border: 1px solid var(--surface-high);
  border-radius: var(--radius-md);
  padding: 22px;
  color: var(--ink);
  transition: border-color 120ms ease, transform 120ms ease;
}
.cards a:hover {
  border-color: var(--primary);
  text-decoration: none;
  transform: translateY(-1px);
}
.cards a h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--tight);
}
.cards a p {
  margin: 0;
  font-size: 14px;
  color: rgba(10,17,48,0.7);
  line-height: 1.5;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--surface-high);
    padding: 20px;
  }
  main.content { padding: 28px 22px; }
  .site-header { padding: 0 18px; }
  .site-header nav { gap: 14px; font-size: 13px; }
  h1 { font-size: 32px; }
  h2 { font-size: 22px; }
}
@media (max-width: 560px) {
  /* Phones: the logo already links to the overview, so its nav link goes,
     and so does the section pill beside the logo (each page's heading says
     where you are), which leaves room for the language switch -- the rest
     stays on one line instead of running off the screen. */
  .site-header { padding: 0 14px; gap: 12px; }
  .site-header .logo { gap: 8px; flex-shrink: 0; }
  .site-header .logo img { height: 22px; }
  .site-header .docs-tag { display: none; }
  .site-header nav { gap: 12px; min-width: 0; }
  .site-header nav a.nav-home { display: none; }
}