/* support.flomation.app
 *
 * One stylesheet for every page on the support site: the user guides, the
 * installation guides and the generated integration pages. Pages author
 * content only; they never carry their own CSS. If a page needs something this
 * file does not have, add a component here and document it in
 * templates/guide-template.html.
 *
 * The tokens are lifted verbatim from the marketing site (flomation.co,
 * root.css) and the editor (Automate/editor/app/tokens.css), so the guides,
 * the site and the app render as one product. Change them there first, then
 * copy them here; never hand-tune a value in this file alone.
 */

/* Sora, the same two self-hosted files the site, the editor and Sentinel
   serve. No third-party font request. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/sora-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/sora-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- From the marketing site, verbatim ------------------------------ */
  --bg: #f6f4f8;
  --bg-2: #fdfcfe;
  --surface: #fdfcfe;
  --surface-2: #eae3ef;
  --border: rgba(70, 45, 84, .12);
  --border-2: rgba(70, 45, 84, .18);
  --border-3: rgba(70, 45, 84, .22);
  --text: #342a38;
  --muted: #473d4b;
  --soft: #524856;
  --dim: #5c5260;
  --dimmer: #665c6a;
  --lilac: #6b3f80;
  --lilac-pale: #5d3670;
  --violet: #460070;
  --teal: #2f6b64;
  --teal-fill: #add7d3;
  --paper-lilac: #ded1e5;
  --purple-pastel: #c7add7;
  --purple-mid: #a77bc1;
  --teal-pastel: #add7d3;
  --teal-mid: #7dbfba;
  --periwinkle: #beafde;
  --grad-cta: linear-gradient(180deg, #5d3670, #460070);
  --glow-cta: 0 6px 18px rgba(70, 0, 112, .22);
  --glow-cta-strong: 0 10px 26px rgba(70, 0, 112, .34);
  --lift: 0 1px 2px rgba(70, 45, 84, .06), 0 8px 24px -12px rgba(70, 45, 84, .18);
  /* Deliberately the same declaration the site, the editor and Sentinel
     carry. The Google family is named "Grotesk", so this falls through to
     system-ui everywhere, which is what makes them match. Do not "fix" it
     here alone. */
  --font-heading: "Sora", sans-serif;
  --font-body: "Hanken Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --maxw: 1200px;
  --radius: 16px;
  --pill: 100px;

  /* ---- From the editor, verbatim ------------------------------------- */
  --surface-hover: rgba(222, 209, 229, .42);
  --lift-panel: 0 1px 2px rgba(70, 45, 84, .05), 0 18px 48px -22px rgba(70, 45, 84, .34);
  --success: #1b6d45;
  --success-fill: rgba(31, 122, 77, .1);
  --success-border: rgba(31, 122, 77, .22);
  --danger: #a8212f;
  --danger-fill: rgba(168, 33, 47, .08);
  --danger-border: rgba(168, 33, 47, .2);
  --warning: #8a5300;
  --warning-fill: rgba(138, 83, 0, .1);
  --warning-border: rgba(138, 83, 0, .22);
  --info: #1d5fa8;
  --info-fill: rgba(29, 95, 168, .1);
  --info-border: rgba(29, 95, 168, .22);
  --neutral: #5c5260;
  --neutral-fill: rgba(92, 82, 96, .09);
  --neutral-border: rgba(92, 82, 96, .2);

  /* ---- Guide layout -------------------------------------------------- */
  --gutter: clamp(18px, 4vw, 32px);
  --nav-h: 60px;
  --measure: 74ch;
}

/* ======================================================================
   Base
   ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

html, body { margin: 0; background: var(--bg); }

body {
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--lilac); }
::selection { background: rgba(107, 63, 128, .34); }

:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; border-radius: 4px; }

img { max-width: 100%; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--violet); color: #fff; font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ======================================================================
   Top bar: the marketing site's nav, with a "Guides" mark after the logo
   ====================================================================== */

.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 248, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: 16px;
  padding: 10px var(--gutter);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 24px; width: auto; display: block; }
.brand-section {
  font-family: var(--font-heading); font-size: 14px; font-weight: 600;
  color: var(--lilac);
  padding-left: 12px; border-left: 1px solid var(--border-2);
  line-height: 20px;
}

.nav-links { display: flex; gap: 2px; font-size: 14px; margin-left: 14px; }
.nav-links a { padding: 7px 9px; border-radius: 7px; color: var(--soft); white-space: nowrap; }
.nav-links a:hover { background: rgba(222, 209, 229, .36); color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 14px; }
.nav-signin { display: none; color: var(--soft); white-space: nowrap; }
.nav-cta {
  background: var(--grad-cta); color: #fff;
  padding: 9px 16px; border-radius: 8px; font-weight: 600; white-space: nowrap;
}
.nav-cta:hover { background: var(--lilac-pale); color: #fff; }

@media (min-width: 900px) {
  .nav-signin { display: flex; }
}
/* Phones: the section links drop to a second row that scrolls sideways. */
@media (max-width: 899px) {
  .site-nav-inner { flex-wrap: wrap; row-gap: 4px; padding-bottom: 6px; }
  .nav-links {
    order: 3; width: 100%; margin: 0 -9px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  html { scroll-padding-top: 110px; }
}

/* ======================================================================
   Page shell: sticky contents on the left, the article on the right
   ====================================================================== */

.page {
  max-width: var(--maxw); margin: 0 auto;
  padding: 40px var(--gutter) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

@media (min-width: 1000px) {
  .page {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 64px;
    padding-top: 56px;
  }
}

/* A page without contents (a landing page) spans the full width. */
.page.page-wide { grid-template-columns: minmax(0, 1fr); }

/* ---- Contents ---------------------------------------------------------
   Mirrors the editor's own sidebar: small caps heading, square bullet, the
   active entry tinted lilac. On narrow screens it folds into a disclosure. */

.toc { min-width: 0; }

@media (min-width: 1000px) {
  .toc {
    position: sticky; top: calc(var(--nav-h) + 32px);
    align-self: start;
    max-height: calc(100vh - var(--nav-h) - 56px);
    overflow-y: auto;
  }
}

.toc details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.toc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dimmer);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}
.toc details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.toc ol { list-style: none; margin: 0; padding: 0 8px 10px; display: grid; gap: 2px; }

.toc ol a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 9px; border-radius: 7px;
  font-size: 13.5px; line-height: 1.4; color: var(--dim);
}
.toc ol a:hover { background: var(--surface-hover); color: var(--text); }
.toc ol a::before {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 2px;
  background: #c6bad0;
  transform: translateY(-2px);
}
.toc ol a.active { background: rgba(107, 63, 128, .15); color: var(--lilac); font-weight: 600; }
.toc ol a.active::before { background: var(--violet); }

@media (min-width: 1000px) {
  .toc details { background: none; border: 0; border-radius: 0; }
  .toc summary { cursor: default; padding: 0 9px 10px; }
  .toc summary::after { display: none; }
  .toc ol { padding: 0; }
}

.toc-foot {
  display: none;
  margin: 18px 9px 0; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.5; color: var(--dimmer);
}
.toc-foot a { color: var(--lilac); font-weight: 600; }
@media (min-width: 1000px) { .toc-foot { display: block; } }

/* ======================================================================
   Article
   ====================================================================== */

.article { min-width: 0; max-width: var(--measure); }
.page-wide .article { max-width: none; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 18px; padding: 0; list-style: none;
  font-size: 14px; color: var(--dim);
}
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--border-3); }
.crumbs a:hover { color: var(--lilac); }
.crumbs [aria-current="page"] { color: var(--text); }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-bottom: 14px;
  font-size: 13px; color: var(--dimmer);
}
.meta-sep::before { content: "·"; }

/* Pills: a category tag (lilac, like the blog's), a level, an audience. */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--pill);
  background: var(--paper-lilac); color: var(--lilac-pale);
  border: 1px solid rgba(107, 63, 128, .22);
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.tag-teal { background: rgba(173, 215, 211, .45); color: #23443f; border-color: rgba(47, 107, 100, .25); }
.tag-plain { background: var(--surface); color: var(--dim); border-color: var(--border-2); }

.article h1 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(32px, 4.8vw, 46px); line-height: 1.08; letter-spacing: -.03em;
  margin: 0 0 16px; text-wrap: balance;
}

.standfirst {
  font-size: 19px; line-height: 1.55; color: var(--muted);
  margin: 0 0 28px; max-width: 58ch;
}

/* "At a glance": what the guide covers, how long it takes, what you need. */
.glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  margin: 0 0 40px;
}
.glance > div { background: var(--bg-2); padding: 16px 18px; }
.glance dt {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dimmer); margin-bottom: 6px;
}
.glance dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }

/* ---- Body copy: the blog's long-form rhythm ------------------------- */

.prose { font-size: 17px; line-height: 1.75; color: var(--muted); }
.prose p { margin: 0 0 20px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a:not(.card):not(.btn) {
  color: var(--lilac); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(107, 63, 128, .3);
  text-underline-offset: 3px;
}
.prose a:not(.card):not(.btn):hover { color: var(--lilac-pale); text-decoration-color: currentColor; }

.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-heading); color: var(--text);
  line-height: 1.3; letter-spacing: -.02em; font-weight: 600;
}
.prose h2 {
  font-size: clamp(22px, 2.8vw, 27px);
  margin: 52px 0 16px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 18.5px; color: var(--lilac-pale); margin: 34px 0 10px; }
.prose h4 { font-size: 16px; margin: 26px 0 8px; }

/* Section number before an h2: small, lilac, tabular. */
.section-num {
  display: inline-block; min-width: 2ch; margin-right: 12px;
  font-size: .6em; font-weight: 600; letter-spacing: .06em;
  color: var(--lilac); vertical-align: .22em;
  font-variant-numeric: tabular-nums;
}

/* The one-sentence answer that opens a section, and where to find the
   thing in the app. */
.prose .lead { font-size: 18.5px; line-height: 1.6; color: var(--text); margin-bottom: 18px; }
.find-it {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: -4px 0 20px;
  font-size: 13.5px; color: var(--dimmer);
}
.find-it .ui { font-size: 12.5px; }

.prose ul, .prose ol:not(.steps) { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin: 0 0 8px; padding-left: 4px; }
.prose ul > li::marker { color: var(--purple-mid); }
.prose ol:not(.steps) > li::marker { color: var(--lilac); font-weight: 600; }

.prose hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }

/* ---- Numbered steps ---------------------------------------------------
   Circles joined by a thin rule, so a procedure reads as one path. */

.steps { list-style: none; counter-reset: step; margin: 8px 0 28px; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 50px; margin: 0;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-lilac); color: var(--lilac-pale);
  border: 1px solid rgba(107, 63, 128, .25);
  font-family: var(--font-heading); font-size: 14px; font-weight: 600;
}
.steps > li::after {
  content: ""; position: absolute; left: 15.5px; top: 38px; bottom: 4px;
  width: 1px; background: var(--border-2);
}
.steps > li:last-child { padding-bottom: 4px; }
/* A list that carries on from an earlier one: <ol class="steps" start="3">.
   CSS counters ignore the start attribute, so map it here. */
.steps[start="2"] { counter-reset: step 1; }
.steps[start="3"] { counter-reset: step 2; }
.steps[start="4"] { counter-reset: step 3; }
.steps[start="5"] { counter-reset: step 4; }
.steps[start="6"] { counter-reset: step 5; }
.steps[start="7"] { counter-reset: step 6; }
.steps[start="8"] { counter-reset: step 7; }
.steps[start="9"] { counter-reset: step 8; }
.steps[start="10"] { counter-reset: step 9; }
.steps[start="11"] { counter-reset: step 10; }
.steps[start="12"] { counter-reset: step 11; }
.steps[start="13"] { counter-reset: step 12; }
.steps[start="14"] { counter-reset: step 13; }
.steps[start="15"] { counter-reset: step 14; }
.steps[start="16"] { counter-reset: step 15; }
.steps[start="17"] { counter-reset: step 16; }
.steps[start="18"] { counter-reset: step 17; }
.steps[start="19"] { counter-reset: step 18; }
.steps[start="20"] { counter-reset: step 19; }
.steps[start="21"] { counter-reset: step 20; }
.steps[start="22"] { counter-reset: step 21; }
.steps[start="23"] { counter-reset: step 22; }
.steps[start="24"] { counter-reset: step 23; }
.steps[start="25"] { counter-reset: step 24; }
.steps[start="26"] { counter-reset: step 25; }
.steps[start="27"] { counter-reset: step 26; }
.steps[start="28"] { counter-reset: step 27; }
.steps[start="29"] { counter-reset: step 28; }
.steps[start="30"] { counter-reset: step 29; }
.steps > li:last-child::after { display: none; }
.steps > li > p:last-child { margin-bottom: 0; }
.step-title {
  display: block; margin: 3px 0 6px;
  font-family: var(--font-heading); font-size: 16.5px; font-weight: 600;
  line-height: 1.45; color: var(--text);
}

/* ---- Talking about the interface ----------------------------------------
   .ui   a button, tab, menu item or field the reader has to find and click.
   .path a route through the left-hand navigation, e.g. Automate › Flows.
   kbd   a key on the keyboard. */

.ui {
  display: inline-block;
  padding: 0 8px; border-radius: 6px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2);
  box-shadow: 0 1px 0 var(--border-2);
  font-size: .86em; font-weight: 600; line-height: 1.7;
  white-space: nowrap;
}
.ui-primary { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: none; }
.ui-run { background: var(--teal-fill); border-color: var(--teal-fill); color: #2c2233; box-shadow: none; }

.path { white-space: nowrap; }
.path .ui + .ui::before { content: none; }
.path-sep { margin: 0 5px; color: var(--dimmer); font-weight: 400; }

kbd {
  display: inline-block; min-width: 1.6em;
  padding: 0 6px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--border-3);
  box-shadow: inset 0 -2px 0 var(--border-2);
  font-family: var(--font-mono); font-size: .8em; line-height: 1.7;
  text-align: center; color: var(--text);
}

/* ---- Code --------------------------------------------------------------- */

.prose code {
  font-family: var(--font-mono); font-size: .86em;
  padding: .12em .4em; border-radius: 5px;
  background: rgba(107, 63, 128, .09); color: var(--lilac-pale);
  overflow-wrap: anywhere;
}

.code {
  margin: 0 0 24px;
  border: 1px solid var(--border-2); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(234, 227, 239, .5);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--dimmer);
}
.copy-btn {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0;
  padding: 4px 11px; border-radius: 6px; cursor: pointer;
  background: var(--surface); color: var(--dim); border: 1px solid var(--border-2);
}
.copy-btn:hover { color: var(--lilac); border-color: var(--border-3); }
.copy-btn.copied { color: var(--success); border-color: var(--success-border); background: var(--success-fill); }
.code pre {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.65; color: var(--text);
}
.code pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
/* For long single values such as a link: wrap instead of scrolling. */
.code-wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Highlighting, kept to the brand's two hues and the ink scale. */
.tok-var { color: var(--lilac); font-weight: 600; }
.tok-str { color: var(--teal); }
.tok-kw  { color: var(--violet); font-weight: 600; }
.tok-num { color: var(--warning); }
.tok-cm  { color: var(--dimmer); font-style: italic; }

/* ---- Callouts ----------------------------------------------------------
   note    something worth knowing (lilac)
   tip     a shortcut or a better way (teal)
   warning something that can go wrong or cost money (amber)
   danger  something that cannot be undone (red) */

.callout {
  margin: 0 0 24px; padding: 16px 18px 16px 20px;
  border-radius: 12px; border: 1px solid;
  border-left-width: 3px;
  font-size: 15.5px; line-height: 1.65;
}
.callout > :last-child { margin-bottom: 0; }
.callout p { margin: 0 0 10px; }
.callout-title {
  display: block; margin-bottom: 4px;
  font-family: var(--font-heading); font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.callout.note    { background: rgba(107, 63, 128, .06); border-color: rgba(107, 63, 128, .18); border-left-color: var(--lilac); }
.callout.note .callout-title { color: var(--lilac-pale); }
.callout.tip     { background: rgba(173, 215, 211, .22); border-color: rgba(47, 107, 100, .2); border-left-color: var(--teal); }
.callout.tip .callout-title { color: var(--teal); }
.callout.warning { background: var(--warning-fill); border-color: var(--warning-border); border-left-color: var(--warning); }
.callout.warning .callout-title { color: var(--warning); }
.callout.danger  { background: var(--danger-fill); border-color: var(--danger-border); border-left-color: var(--danger); }
.callout.danger .callout-title { color: var(--danger); }

/* ---- Tables ------------------------------------------------------------- */

.table-wrap {
  margin: 0 0 28px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-2);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.prose th {
  text-align: left; vertical-align: bottom;
  padding: 11px 16px;
  background: rgba(234, 227, 239, .55);
  border-bottom: 1px solid var(--border-2);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap;
}
.prose td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { color: var(--text); font-weight: 600; }
.prose td code { white-space: nowrap; overflow-wrap: normal; }

/* ---- Status chips: the editor's own run colours ----------------------- */

.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 9px; border-radius: var(--pill); border: 1px solid;
  font-size: 12.5px; font-weight: 600; line-height: 1.7; white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-success { color: var(--success); background: var(--success-fill); border-color: var(--success-border); }
.status-danger  { color: var(--danger);  background: var(--danger-fill);  border-color: var(--danger-border); }
.status-warning { color: var(--warning); background: var(--warning-fill); border-color: var(--warning-border); }
.status-info    { color: var(--info);    background: var(--info-fill);    border-color: var(--info-border); }
.status-neutral { color: var(--neutral); background: var(--neutral-fill); border-color: var(--neutral-border); }
.status-running { color: var(--teal);    background: rgba(173, 215, 211, .3); border-color: rgba(47, 107, 100, .25); }

/* ---- Screenshots, framed like the site's studio window ---------------- */

.shot { margin: 8px 0 32px; }
.window {
  background: var(--surface);
  border: 1px solid rgba(70, 45, 84, .12);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--lift-panel);
}
.window-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.window-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--paper-lilac); flex: none; }
.window-dot:nth-child(3) { background: var(--violet); }
.window-title {
  margin-left: 10px; min-width: 0;
  font-size: 12px; color: var(--dimmer);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.window img { display: block; width: 100%; height: auto; }
.shot figcaption, .diagram figcaption {
  margin-top: 12px; padding: 0 4px;
  font-size: 13.5px; line-height: 1.55; color: var(--dim);
}

/* A cropped detail of the interface: no window chrome, just a soft frame. */
.shot-crop .window { border-radius: 12px; }
.shot-crop .window-bar { display: none; }

/* Close-ups of a panel or menu are shown at their natural size, not
   stretched: narrow for a menu or small panel, medium for a settings panel.
   Screenshots are 2x, so these widths are half the PNG's pixel width. */
.shot-narrow { max-width: 460px; }
.shot-medium { max-width: 620px; }

/* ---- Diagrams: inline SVG on the editor's dotted canvas --------------- */

.diagram { margin: 8px 0 32px; }
.canvas {
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--bg-2);
  background-image: radial-gradient(rgba(70, 45, 84, .1) 1px, transparent 1px);
  background-size: 26px 26px;
  padding: 18px;
  overflow-x: auto;
}
.canvas svg { display: block; width: 100%; height: auto; min-width: 680px; font-family: var(--font-body); }

/* Figures break out of the text measure into the empty space to the right
   on wide screens, so screenshots and diagrams are shown near full size.
   200px is the room the page grid leaves beside a 74ch article at 1240px+. */
@media (min-width: 1240px) {
  .prose .diagram, .prose .shot:not(.shot-narrow):not(.shot-medium) { width: calc(100% + 200px); }
  .prose .diagram figcaption, .prose .shot figcaption { max-width: var(--measure); }
}

/* Shapes and labels, named by role (from the site's flows.css). */
.d-wire      { fill: none; stroke: var(--violet); stroke-width: 2; opacity: .55; }
.d-wire-dim  { fill: none; stroke: #cbbcd6; stroke-width: 2; }
.d-wire-dash { fill: none; stroke: var(--lilac); stroke-width: 2; stroke-dasharray: 6 6; opacity: .7; }
.d-port      { fill: var(--violet); }
.d-node      { fill: #eae3ef; stroke: rgba(70, 45, 84, .16); }
.d-node-hot  { fill: #eae3ef; stroke: var(--violet); stroke-width: 1.5; }
.d-node-teal { fill: #d6ebe9; stroke: rgba(47, 107, 100, .35); }
.d-node-peri { fill: #e4def2; stroke: rgba(70, 45, 84, .16); }
.d-node-card { fill: var(--surface); stroke: rgba(70, 45, 84, .16); }
.d-halo      { fill: none; stroke: rgba(107, 63, 128, .15); stroke-width: 3; }
.d-tag       { font-size: 10.5px; fill: var(--dim); letter-spacing: .08em; }
.d-tag-hot   { font-size: 10.5px; fill: var(--lilac); letter-spacing: .08em; font-weight: 600; }
.d-title     { font-size: 14px; font-weight: 600; fill: var(--text); font-family: var(--font-heading); }
.d-sub       { font-size: 12px; fill: var(--dim); }
.d-note      { font-size: 12px; fill: var(--lilac); font-weight: 600; }
.d-callout   { font-size: 11.5px; fill: var(--dimmer); }
.d-wire-ok   { fill: none; stroke: var(--success); stroke-width: 2; opacity: .7; }
.d-wire-fail { fill: none; stroke: var(--danger); stroke-width: 2; opacity: .7; }
.d-ok        { fill: var(--success); }
.d-fail      { fill: var(--danger); }
.d-mark      { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-skipped   { opacity: .4; }

/* ---- Cards: related guides, next steps, a concept index --------------- */

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px; margin: 8px 0 32px;
}
.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 20px;
  background: var(--bg-2);
  border: 1px solid rgba(70, 45, 84, .11); border-radius: var(--radius);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
a.card:hover { border-color: rgba(107, 63, 128, .4); transform: translateY(-2px); box-shadow: var(--lift); color: inherit; }
.card-kicker { font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--lilac); }
.card-title { font-family: var(--font-heading); font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; color: var(--text); line-height: 1.35; }
.card-body { font-size: 14.5px; line-height: 1.55; color: var(--soft); }
.card-cta { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 600; color: var(--lilac); }
a.card:hover .card-cta { color: var(--lilac-pale); }
.card-cta.soon { color: var(--dimmer); font-weight: 500; }

/* ---- Related help and the prev / next pager ------------------------- */

.help-strip {
  margin: 48px 0 0; padding: clamp(22px, 3vw, 30px);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(46, 201, 165, .1), rgba(107, 63, 128, .07));
  border: 1px solid rgba(46, 201, 165, .28);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
}
.help-strip-title { font-family: var(--font-heading); font-size: 19px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.help-strip p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 10px;
  background: var(--grad-cta); color: #fff; font-size: 14.5px; font-weight: 600;
  box-shadow: var(--glow-cta); white-space: nowrap;
}
.btn:hover { color: #fff; box-shadow: var(--glow-cta-strong); }
.btn-quiet { background: transparent; color: var(--text); border: 1px solid var(--border-2); box-shadow: none; }
.btn-quiet:hover { background: var(--surface-hover); color: var(--text); box-shadow: none; }

.pager {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px; margin: 40px 0 0; padding-top: 28px;
  border-top: 1px solid var(--border);
}
.pager a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px; border-radius: 12px;
  border: 1px solid var(--border-2); background: var(--bg-2);
}
.pager a:hover { border-color: rgba(107, 63, 128, .4); color: inherit; }
.pager-dir { font-size: 12.5px; color: var(--dimmer); }
.pager-title { font-family: var(--font-heading); font-size: 15.5px; font-weight: 600; color: var(--lilac); }
.pager .pager-next { text-align: right; grid-column: -2; }

.updated { margin-top: 28px; font-size: 13px; color: var(--dimmer); }

/* ======================================================================
   Reference pages: installation guides and generated integration pages
   ====================================================================== */

/* Contents lists with groups ("Getting started", "Components", ...). */
.toc .toc-group {
  padding: 16px 9px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dimmer);
}
.toc .toc-group:first-child { padding-top: 0; }

/* The sentence under a section heading. */
.prose .section-intro { font-size: 17px; line-height: 1.65; color: var(--muted); margin: -4px 0 20px; }

/* Component badge: the package a section installs. */
.component-tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 5px 13px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--pill);
  font-family: var(--font-mono); font-size: 13.5px; color: var(--text);
}
.component-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple-mid); }
.component-tag .dot.go { background: var(--lilac); }
.component-tag .dot.node { background: var(--teal); }
.component-tag .dot.cli { background: #b07a2a; }

/* Shell highlighting used by the installation guides. */
.code .cmd  { color: var(--violet); font-weight: 600; }
.code .flag { color: #8a5300; }
.code .str  { color: var(--teal); }
.code .kw   { color: var(--lilac); font-weight: 600; }
.code .num  { color: #9a4d1c; }
.code .cm   { color: var(--dimmer); font-style: italic; }
.code .var  { color: var(--text); font-weight: 600; }

/* Integration field tables: required and live-picker markers. */
.req, .live-picker { font-size: 13px; font-weight: 600; white-space: nowrap; }
.req { color: var(--teal); }
.live-picker { color: var(--lilac); }
.action-id { margin: -4px 0 12px; font-size: 14px; color: var(--dimmer); }
.prose h3 + .action-id { margin-top: -6px; }

/* A diagram drawn before the paper theme, recoloured at build time: centre it. */
.canvas svg.legacy { min-width: 0; max-width: 580px; margin: 0 auto; }

/* ======================================================================
   Landing page (index.html): hero, grouped guide cards
   ====================================================================== */

.hub-hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 28px; align-items: center;
  margin: 0 0 52px;
}
@media (min-width: 900px) { .hub-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } }
.hub-kicker { font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--lilac); margin: 0 0 12px; }
.hub-hero .standfirst { margin-bottom: 22px; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hub-hero-art {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--surface-2);
  border: 1px solid var(--border);
}
.hub-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; display: block; }

.hub-section { margin: 0 0 48px; }
.hub-section-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(21px, 2.6vw, 25px); letter-spacing: -.02em;
  margin: 0 0 6px; color: var(--text);
}
.hub-section-intro { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; max-width: 64ch; }
.card-top { display: flex; align-items: center; gap: 10px; }
.card-step {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper-lilac); color: var(--lilac-pale);
  border: 1px solid rgba(107, 63, 128, .25);
  font-family: var(--font-heading); font-size: 12.5px; font-weight: 600;
}
.card-meta { font-size: 12.5px; color: var(--dimmer); }

/* Integrations index: single-column hero, search filter, category jump links. */
.hub-hero-plain { grid-template-columns: minmax(0, 1fr) !important; margin-bottom: 24px; }
.hub-hero-plain .standfirst { max-width: 64ch; }
.filter { display: block; max-width: 520px; }
.filter input {
  width: 100%; padding: 13px 16px 13px 44px;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23665c6a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;
  border: 1px solid var(--border-2); border-radius: 12px;
}
.filter input:focus { outline: 2px solid var(--lilac); outline-offset: 1px; border-color: transparent; }
.filter-empty { margin: 12px 0 0; font-size: 14.5px; color: var(--dim); }
[data-filter-group] .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.jump-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
.jump-links a {
  padding: 5px 12px; border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--border-2);
  font-size: 13px; color: var(--dim); white-space: nowrap;
}
.jump-links a:hover { color: var(--lilac); border-color: var(--border-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card-points { margin: 2px 0 4px; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--soft); }
.card-points li { margin: 0 0 3px; }
.card-points li::marker { color: var(--purple-mid); }

/* Three large doors on the support home page. */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 0 0 52px; }
.door { padding: 26px 24px 22px; }
.door .card-title { font-size: 20px; }
.door-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 6px;
  background: var(--paper-lilac); color: var(--lilac-pale);
}
.door-icon.teal { background: rgba(173, 215, 211, .45); color: var(--teal); }
.door-icon svg { width: 20px; height: 20px; }

/* ======================================================================
   Footer: the site's compact footer
   ====================================================================== */

.site-footer { border-top: 1px solid var(--border); padding: 40px var(--gutter) 36px; }
.site-footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px;
}
.site-footer img { height: 22px; width: auto; display: block; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--dim); }
.footer-legal {
  max-width: var(--maxw); margin: 26px auto 0; padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  font-size: 13px; line-height: 1.6; color: var(--dimmer);
}

/* ======================================================================
   Print: the article alone, for PDF export
   ====================================================================== */

@media print {
  html, body { background: #fff; }
  .site-nav, .toc, .site-footer, .help-strip, .pager, .skip-link, .copy-btn { display: none !important; }
  .page { display: block; padding: 0; }
  .article { max-width: none; }
  .prose { font-size: 11.5pt; }
  .window, .canvas, .card { box-shadow: none; break-inside: avoid; }
  .prose h2 { break-after: avoid; }
  a { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}