/* Public connector pages — documentation, support, privacy.
   Self-contained: these are read by people who never see the admin, so the
   sheet carries its own tokens rather than importing the viewer's app.css.
   Values match the viewer's palette so the two read as one product. */

:root {
  --bg: #0a0a0b;
  --panel: #17171a;
  --border: #26262b;
  --text: #ffffff;
  --text-2: #8a8a93;
  --text-3: #5c5c66;
  --accent: #f4531f;
  --radius: 12px;
  --radius-sm: 8px;
  color-scheme: dark;
}

/* The pages are plain documents; a light-mode reader should get a readable
   document too rather than a dark block pasted into a white browser. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;
    --panel: #f6f6f7;
    --border: #e3e3e6;
    --text: #17171a;
    --text-2: #5c5c66;
    --text-3: #8a8a93;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 16px;
}

/* masthead ---------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Official logo, two files: the wordmark is white on the dark theme and would
   vanish on the light one, where the brandbook's green is the correct mark. */
.logo {
  display: block;
  height: 30px;
  width: auto;
}

.logo-light { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-dark { display: none; }
  :root:not([data-theme="dark"]) .logo-light { display: block; }
}

.masthead-nav .lang {
  border-left: 1px solid var(--border);
  padding-left: 18px;
}

.masthead-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.masthead-nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
}

.masthead-nav a:hover { color: var(--text); }

/* page -------------------------------------------------------------------- */

.page { padding: 40px 16px 64px; }

h1 {
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

h2 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

h3 { font-size: 16px; margin: 24px 0 8px; }

.lede {
  font-size: 18px;
  color: var(--text-2);
  margin: 0 0 8px;
}

p { margin: 0 0 14px; }

a { color: var(--accent); }

ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

.muted { color: var(--text-3); font-size: 14px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 16px;
}

.card p:last-child { margin-bottom: 0; }

.endpoint {
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  word-break: break-all;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}

/* tool list --------------------------------------------------------------- */

.tool {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}

.tool:last-child { border-bottom: 1px solid var(--border); }

.tool-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tool-name {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}

.tag {
  font-size: 12px;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}

.tool p { margin: 0; color: var(--text-2); font-size: 15px; }

/* definition rows --------------------------------------------------------- */

.rows { border-top: 1px solid var(--border); margin-bottom: 16px; }

.row {
  display: flex;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.row dt {
  flex: 0 0 200px;
  color: var(--text-2);
  font-size: 14px;
  margin: 0;
}

.row dd { flex: 1 1 320px; margin: 0; font-size: 15px; }

/* footer ------------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--border);
  padding: 24px 0 40px;
  color: var(--text-2);
  font-size: 14px;
}

.footer p { margin: 0 0 4px; }

@media (max-width: 560px) {
  .row dt { flex-basis: 100%; }
  .page { padding-top: 28px; }
}