/* ============================================================
   feed.mss.gs/developers and /about (pages/feed/feed-docs.mjs):
   reading pages on the host's cream, with a table of contents
   that sticks beside the text on a wide screen, and dark code
   samples coloured on the server (pages/docs/highlight.mjs).
   ============================================================ */

.fd-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  justify-content: center;
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px 16px 40px;
}
.fd-mono { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }

/* ---- The table of contents ---- */
.fd-toc {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  padding: 2px 4px 2px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(50, 55, 30, .22) transparent;
}
.fd-toc-h {
  margin: 0 0 8px 10px;
  color: #5d6a56;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fd-toc ol { list-style: none; margin: 0; padding: 0; }
.fd-toc a {
  display: block;
  padding: 5px 10px;
  border-radius: 8px;
  color: #3f4b39;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}
.fd-toc a:hover { background: rgba(51, 117, 77, .08); color: #20301f; }
.fd-toc a.is-current { background: rgba(51, 117, 77, .13); color: #265f3e; font-weight: 700; }
.fd-toc a:focus-visible { outline: 3px solid rgba(51, 117, 77, .45); outline-offset: 1px; }
.fd-toc ol ol a { padding-left: 22px; font-size: 13px; }

/* ---- The text ---- */
.fd-doc {
  min-width: 0;
  color: #20301f;
  font-size: 16px;
  line-height: 1.65;
}
.fd-doc h1 {
  margin: 0 0 10px;
  color: #17251a;
  font: 700 42px/1.08 'Bricolage Grotesque', 'Bricolage Fallback', 'Hanken Grotesk', sans-serif;
  letter-spacing: -.035em;
}
.fd-lede { margin: 0 0 30px; color: #4a5644; font-size: 18.5px; line-height: 1.6; }
.fd-doc section { scroll-margin-top: 84px; margin: 0 0 44px; }
.fd-doc h2 {
  margin: 0 0 12px;
  color: #17251a;
  font: 700 28px/1.2 'Bricolage Grotesque', 'Bricolage Fallback', 'Hanken Grotesk', sans-serif;
  letter-spacing: -.02em;
}
.fd-doc h3 { margin: 26px 0 8px; color: #17251a; font-size: 18px; line-height: 1.35; }
.fd-doc p { margin: 0 0 14px; }
.fd-doc ul, .fd-doc ol.fd-steps { margin: 0 0 16px; padding-left: 22px; }
.fd-doc li { margin: 0 0 6px; }
.fd-doc a { color: #265f3e; text-decoration: underline; text-decoration-color: rgba(38, 95, 62, .45); text-underline-offset: 2px; }
.fd-doc a:not(.fd-btn):hover { color: #175cb8; text-decoration-color: rgba(23, 92, 184, .5); }
.fd-doc a:not(.fd-btn):focus-visible { outline: 2px solid #175cb8; outline-offset: 2px; border-radius: 4px; }
.fd-doc :not(pre) > code {
  padding: .08em .36em;
  border-radius: 6px;
  background: rgba(51, 117, 77, .1);
  color: #1f3d29;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  overflow-wrap: anywhere;
}
.fd-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid #2f6e48;
  border-radius: 0 12px 12px 0;
  background: rgba(51, 117, 77, .08);
  color: #2d3a29;
  font-size: 15px;
}

/* An endpoint: its route, what it does, its parameters, a request and its
   answer, its errors. */
.fd-endpoint {
  scroll-margin-top: 84px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(50, 55, 30, .12);
}
.fd-endpoint h3 { margin-top: 0; }
.fd-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid rgba(50, 55, 30, .14);
  border-radius: 12px;
  background: #fffdf6;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.fd-method {
  padding: 2px 7px;
  border-radius: 6px;
  background: #2f6e48;
  color: #f7f3e8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
}
/* The method's colour: GET green, POST amber, as the code labels are coloured
   by language. */
.fd-method-post { background: #a85a12; }
/* Posting with a key: its own band in the reading column. */
.fd-posting {
  padding: 26px 24px 8px;
  border: 1px solid rgba(168, 90, 18, .22);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 246, 228, .9), rgba(255, 253, 246, .6));
}
.fd-posting > h2::before {
  content: 'POST';
  display: inline-block;
  margin-right: 10px;
  padding: 3px 8px;
  border-radius: 7px;
  background: #a85a12;
  color: #fff7ea;
  font: 800 13px/1.4 ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .05em;
  vertical-align: 6px;
}
.fd-posting .fd-endpoint { border-top-color: rgba(168, 90, 18, .2); }
.fd-label { margin: 18px 0 6px; color: #5d6a56; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* ---- Tables: parameters, fields, errors ---- */
.fd-table-wrap {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid rgba(50, 55, 30, .14);
  border-radius: 12px;
  background: #fffdf6;
  scrollbar-width: thin;
  scrollbar-color: rgba(50, 55, 30, .25) transparent;
}
.fd-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.fd-table th, .fd-table td { padding: 9px 12px; border-bottom: 1px solid rgba(50, 55, 30, .1); text-align: left; vertical-align: top; }
.fd-table thead th {
  background: rgba(51, 117, 77, .06);
  color: #5d6a56;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fd-table tbody tr:last-child th, .fd-table tbody tr:last-child td { border-bottom: 0; }
.fd-table tbody th { font-weight: 400; white-space: nowrap; }
.fd-table tbody th code { white-space: nowrap; }
.fd-status { font-weight: 700; font-variant-numeric: tabular-nums; }
.fd-status-4 { color: #a04b14; }
.fd-status-5 { color: #a3262a; }

/* ---- Code samples ---- */
.fd-code {
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid #262b31;
  border-radius: 14px;
  background: #15181c;
  box-shadow: 0 10px 26px rgba(22, 28, 24, .12);
}
.fd-code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 5px 8px 5px 14px;
  border-bottom: 1px solid #2a2f35;
  background: #1d2126;
}
.fd-code-lang {
  flex: none;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a6adb7;
}
.fd-code[data-lang="json"] .fd-code-lang { color: #8cc4ff; }
.fd-code[data-lang="js"] .fd-code-lang { color: #f3d57c; }
.fd-code[data-lang="shell"] .fd-code-lang { color: #a5d6a0; }
.fd-code[data-lang="html"] .fd-code-lang { color: #f5a3b5; }
.fd-code[data-lang="python"] .fd-code-lang { color: #d2a8ff; }
.fd-code[data-lang="http"] .fd-code-lang { color: #f2b37e; }
.fd-code-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #a6adb7;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-copy {
  flex: none;
  min-width: 72px;
  height: 28px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid #343a41;
  border-radius: 8px;
  background: transparent;
  color: #c9d1d9;
  font: 600 12.5px/1 'Hanken Grotesk', 'Hanken Fallback', -apple-system, sans-serif;
  cursor: pointer;
}
.fd-copy:hover { background: #262b31; color: #fff; }
.fd-copy:focus-visible { outline: 2px solid #6fd39b; outline-offset: 1px; }
/* Wrapped, so a sample reads without scrolling sideways; a long one scrolls
   inside its box, on a thin bar in the code's own colours. */
.fd-code pre {
  max-height: 34rem;
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  color: #e3e6ea;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
  scrollbar-width: thin;
  scrollbar-color: #3b424a transparent;
}
.fd-code pre::-webkit-scrollbar { width: 8px; height: 8px; }
.fd-code pre::-webkit-scrollbar-track { background: transparent; }
.fd-code pre::-webkit-scrollbar-thumb { border: 2px solid #15181c; border-radius: 8px; background: #3b424a; }
.fd-code pre:focus-visible { outline: 2px solid #6fd39b; outline-offset: -2px; }
.fd-code code { font: inherit; }
.fd-code .tk-key, .fd-code .tk-flag, .fd-code .tk-attr { color: #8cc4ff; }
.fd-code .tk-str { color: #a5d6a0; }
.fd-code .tk-num, .fd-code .tk-lit { color: #f2b37e; }
.fd-code .tk-kw { color: #d2a8ff; }
.fd-code .tk-fn { color: #f3d57c; }
.fd-code .tk-var, .fd-code .tk-tag { color: #f5a3b5; }
.fd-code .tk-punc { color: #a6adb7; }
.fd-code .tk-com { color: #8b949e; font-style: italic; }
.fd-pair .fd-code { margin-bottom: 10px; }
.fd-pair { margin-bottom: 18px; }

/* ---- /about ---- */
.fd-uses { margin: 0 0 18px; padding: 0; list-style: none; }
.fd-uses li { margin: 0 0 14px; }
.fd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 8px; }
.fd-tile {
  padding: 18px;
  border: 1px solid rgba(50, 55, 30, .12);
  border-radius: 16px;
  background: #fffdf6;
}
.fd-tile h3 { margin: 12px 0 6px; font-size: 17px; }
.fd-tile p { margin: 0; color: #4a5644; font-size: 15px; line-height: 1.55; }
.fd-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(51, 117, 77, .12);
  color: #2f6e48;
}
.fd-sample {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #14171b;
  color: #e8eaed;
  font-size: 14px;
  line-height: 1.5;
}
.fd-faq details {
  border-bottom: 1px solid rgba(50, 55, 30, .12);
}
.fd-faq summary {
  padding: 14px 0;
  color: #17251a;
  font-weight: 700;
  cursor: pointer;
}
.fd-faq details p { margin: 0 0 16px; color: #3f4b39; }
.fd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.fd-btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(50, 55, 30, .2);
  border-radius: 12px;
  background: #fffdf6;
  color: #20301f !important;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
}
.fd-btn:hover { border-color: #2f6e48; }
.fd-btn-primary { border-color: #2f6e48; background: #2f6e48; color: #f7f3e8 !important; }
.fd-btn-primary:hover { background: #265f3e; }

@media (max-width: 900px) {
  .fd-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 16px 32px; }
  /* Above the text, the sections as a row of chips; the endpoints are in
     the text right below. */
  .fd-toc { position: static; max-height: none; overflow: visible; padding: 0; }
  .fd-toc-h { margin-left: 0; }
  .fd-toc > ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .fd-toc ol ol { display: none; }
  .fd-toc a { padding: 4px 10px; border: 1px solid rgba(50, 55, 30, .14); background: #fffdf6; font-size: 13.5px; }
  .fd-doc h1 { font-size: 32px; }
  .fd-doc h2 { font-size: 24px; }
  .fd-lede { font-size: 17px; }
  .fd-doc section, .fd-endpoint { scroll-margin-top: 104px; }
  .fd-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fd-posting { margin-left: -6px; margin-right: -6px; padding: 20px 14px 4px; border-radius: 16px; }
}
@media (max-width: 420px) {
  .fd-code pre { padding: 12px; font-size: 12.5px; }
  .fd-table { font-size: 13.5px; }
  .fd-table th, .fd-table td { padding: 8px 9px; }
}