/* ============================================================
   Flowral — API reference
   Loaded on /api/reference only, on top of site.css. Documentation
   layout: a sticky index, a long single column, and type sized for
   reading code rather than marketing copy.
   ============================================================ */

.ref-body { --ref-nav-w: 250px; }

.ref-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: var(--ref-nav-w) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* ---------- index ---------- */
.ref-nav {
  position: sticky;
  top: 66px;
  max-height: calc(100vh - 66px);
  overflow-y: auto;
  padding: 30px 0 60px;
  border-right: 1px solid var(--line);
}
.ref-nav-inner { padding-right: 18px; }
.nav-group { margin-bottom: 22px; }
.nav-tag {
  display: block;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.nav-op {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-dim);
  padding: 3px 0 3px 10px;
  border-left: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.nav-op:hover { color: var(--text); border-left-color: var(--line-2); }
/* `.on` is set by the scrollspy in site.js as you read; `:target` covers the
   moment you arrive on a deep link, before any scrolling has happened. */
.nav-op:target, .nav-op.on { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }
/* The group heading lights up with its operation — once the op names have
   scrolled past, it is the only thing saying which part of the API you are in. */
/* Colour only, no inserted marker: this toggles while the reader is scrolling,
   and pseudo-content that changes the text's width reads as jitter. */
.nav-tag.on { color: var(--blue); }

/* ---------- column ---------- */
.ref-main { padding: 30px 0 80px; min-width: 0; }

.ref-intro { max-width: 760px; margin-bottom: 20px; }
.ref-intro h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 18px; }
.ref-intro h1 .ver {
  font-size: 15px; font-family: var(--font); font-weight: 600; color: var(--text-faint);
  vertical-align: middle; margin-left: 8px;
}
.ref-intro p { color: var(--text-dim); font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; }
/* Prose links only. Without the :not(), this beats .btn-primary on specificity
   (0-1-1 against 0-1-0) and repaints the "Get a key" button's label violet — on
   a violet fill, so the text disappears entirely. A button in here is not a
   link in a paragraph, and the rule should never have claimed it. */
.ref-intro a:not(.btn) { color: var(--blue); font-weight: 600; }
/* ---------- where to point a client, and how to get in ----------
   The two base URLs and the three things a reader does next. These were two
   buttons in the site header until they moved here — the header is where you
   sign in, not where you find a base URL, and its ghost button is display:none
   under 900px, so half the visitors never saw "openapi.json" at all. */
.ref-start {
  margin: 22px 0 4px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.ref-hosts {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.ref-host { min-width: 0; }
.ref-host-k {
  display: block;
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
/* A base URL is meant to be copied, so it stays selectable and wraps rather
   than scrolling — there is no line long enough here to need its own box. */
.ref-host code { font-size: 13px; user-select: all; }

.ref-start-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ref-start-cta .btn { font-size: 14px; padding: 11px 18px; }

/* ---------- import into Postman ----------
   Its own row under the CTAs rather than a fourth button among them: it is a
   different kind of action (take this away and use it elsewhere) and it carries
   a vendor's colour, which would fight the three buttons above if it sat in
   line with them. */
.ref-postman {
  display: flex; align-items: center; gap: 13px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ref-postman-mark { flex: 0 0 auto; line-height: 0; }
/* The mark appears twice — once as the row's icon, once inside the button —
   and only the first needs the larger size. */
.ref-postman-mark svg { width: 26px; height: 26px; }
.ref-postman-txt { flex: 1; min-width: 0; }
/* The direct child only. `.ref-postman-txt b` also matched the inline <b> in
   the sentence below, so "Import → Link" was pushed onto its own line
   mid-sentence. */
.ref-postman-txt > b { display: block; font-size: 13.5px; color: var(--text); }
.ref-postman-txt small b { color: var(--text); font-weight: 700; white-space: nowrap; }
.ref-postman-txt small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.ref-postman-txt code { font-size: 11px; }

/* Postman's brand orange. Used only here, and only on the control that takes
   you to Postman — a vendor colour anywhere else on the page would read as our
   own accent. */
.btn-postman {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: #ff6c37; border-color: transparent; color: #fff;
  font-size: 14px; padding: 11px 18px;
}
.btn-postman:hover { background: #e85c2a; color: #fff; }
/* The mark inverts itself — `postmanMark(true)` in the builder — rather than
   being repainted here by selector. Overriding SVG fills from CSS means the
   stylesheet has to know the glyph's internal shape, and it silently stops
   working the moment that changes. */
.btn-postman svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .ref-postman { flex-wrap: wrap; }
  .ref-postman-txt { flex: 1 1 100%; order: 2; }
  .btn-postman { order: 3; width: 100%; justify-content: center; }
}

.ref-meta {
  font-size: 13px; color: var(--text-faint);
  padding-top: 14px; border-top: 1px solid var(--line);
}

@media (max-width: 560px) {
  /* Stack the hosts, and let the buttons fill the width — three side by side
     wrap into an unreadable stagger on a phone. */
  .ref-hosts { flex-direction: column; gap: 14px; }
  .ref-start-cta { flex-direction: column; }
  .ref-start-cta .btn { justify-content: center; }
}

.tag { padding: 40px 0 0; scroll-margin-top: 84px; }
.tag > h2 {
  font-size: 13px; font-family: var(--display); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
  padding-bottom: 10px; border-bottom: 1px solid var(--line-2);
}
.tag-desc { color: var(--text-dim); font-size: 15px; margin: 14px 0 0; max-width: 760px; }

/* ---------- one operation ---------- */
.op {
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 84px;
}
.op-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.verb {
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 6px; color: #fff; text-transform: uppercase;
}
.verb.get { background: #3c8f63; }
.verb.post { background: var(--blue); }
.verb.put, .verb.patch { background: #c07a2e; }
.verb.delete { background: #c04b6c; }
.op-path { font-size: 14px; }
.op-id { margin-left: auto; font-size: 11.5px; color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.op h3 { font-size: 19px; margin-bottom: 8px; }
.op-desc { color: var(--text-dim); font-size: 15px; line-height: 1.7; max-width: 760px; }
.op h4 {
  font-size: 11.5px; font-family: var(--display); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  margin: 22px 0 8px;
}
.op h4 .media { text-transform: none; letter-spacing: 0; color: var(--text-faint); font-weight: 500; margin-left: 8px; }
.scopes { font-size: 13px; color: var(--text-faint); margin-top: 10px; }

/* ---------- field tables ---------- */
.fields { width: 100%; border-collapse: collapse; font-size: 14px; }
.fields td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-dim); }
.fields tr:last-child td { border-bottom: none; }
.fields td:first-child { width: 200px; color: var(--text); }
.fields td.type { width: 170px; font-size: 13px; color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.type-ref { color: var(--blue); font-weight: 600; }
.req {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #c04b6c; margin-left: 6px;
}
.enum { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-faint); }
.enum code { font-size: 12px; }

/* ---------- responses ---------- */
.resp { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 14px; flex-wrap: wrap; }
.status {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: 6px; flex: 0 0 auto;
}
.status.ok { background: rgba(76, 179, 124, .16); color: #2f7a52; }
.status.warn { background: rgba(238, 154, 84, .18); color: #a2632a; }
.status.bad { background: rgba(224, 106, 144, .16); color: #a63f5f; }
.resp-desc { color: var(--text-dim); }
.shape { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--text-faint); }

/* Code blocks come from site.css (pre.code); only the spacing between a
   request and the response under it is specific to this page. */
pre.code { margin-top: 10px; }

/* ---------- objects ---------- */
.schema { padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 84px; }
.schema h3 { font-size: 17px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-bottom: 8px; }
.schema-desc { color: var(--text-dim); font-size: 14.5px; line-height: 1.7; margin-bottom: 12px; max-width: 760px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .ref-shell { grid-template-columns: 1fr; gap: 0; }
  .ref-nav {
    position: static; max-height: none; border-right: none;
    border-bottom: 1px solid var(--line); padding-bottom: 20px;
  }
  .ref-nav-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; padding-right: 0; }
  .nav-group { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .fields td:first-child, .fields td.type { width: auto; }
  .fields, .fields tbody, .fields tr, .fields td { display: block; }
  .fields tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .fields td { border-bottom: none; padding: 2px 0; }
  .op-id { margin-left: 0; width: 100%; }
}