/* Shared chrome for the help centre: /help and every /help/<guide> page.
   Palette and type mirror the Camel theme in /css/style.css
   ([data-theme="camel"]) so these pages read as part of the app without
   loading the SPA bundle. Camel only, matching the app and landing default.

   Pages keep their own <style> block for components only they use (the
   integrations guide's terminal blocks, say). Anything two pages share
   belongs here. */

:root{
  --bg:#F2F3F5; --bg-elevated:#FFFFFF; --shelf:#E9EBED;
  --text:#111417; --text-secondary:#2A2F34; --text-muted:#5D656E;
  --border:#DADDE1; --line-strong:#C4C8CE;
  --accent:#B24A2E; --accent-hover:#8E3A22; --accent-tint:#F6E7E1;
  /* The wordmark gradient, stop for stop from /img/emeris-logo.svg. */
  --logo-fade:linear-gradient(90deg,#D38714 0%,#B7903A 24%,#989358 44%,#72937B 58%,#57908D 69%,#328AA3 85%,#2482A8 100%);
  --sans:'Figtree',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --display:'Archivo','Figtree',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text); overflow-x:hidden;
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-tint);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a:hover,a:focus-visible{color:var(--accent-hover)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:var(--bg-elevated);color:var(--text);padding:12px 18px;border:1px solid var(--accent)}
.skip:focus{left:max(20px,4vw);top:10px}

/* ── Masthead ─────────────────────────────────────────────────────────── */
.mast{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--border)}
.mast-in{
  max-width:1000px;margin:0 auto;
  padding:14px max(20px,env(safe-area-inset-right,20px)) 14px max(20px,env(safe-area-inset-left,20px));
  display:flex;align-items:center;gap:20px;
}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand img{display:block;height:24px;width:auto}
.mast nav{display:flex;gap:18px;margin-left:auto;font-size:14px;font-weight:500}
.mast nav a{color:var(--text-muted);text-decoration:none;padding:10px 0}
.mast nav a:hover,.mast nav a:focus-visible{color:var(--text);text-decoration:underline;text-underline-offset:4px}

/* Compact search in the masthead. Guide pages only — on the hub the big
   field below the headline does the job. Hidden until help.js enables it,
   so nobody gets a dead input when the script or the index fails. */
.mast-search{position:relative;margin-left:auto;flex:0 1 300px;display:none}
.js-search .mast-search{display:block}
.js-search .mast nav{margin-left:20px}

/* ── Search field ─────────────────────────────────────────────────────── */
.sf{position:relative;display:flex;align-items:center}
.sf svg{position:absolute;left:14px;width:17px;height:17px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.sf input{
  width:100%;min-height:52px;padding:12px 64px 12px 42px;
  font-family:var(--sans);font-size:16px;color:var(--text);
  background:var(--bg-elevated);border:1px solid var(--line-strong);border-radius:0;appearance:none;
}
.sf input::placeholder{color:var(--text-muted)}
/* Italic on the hub field only: it hints at example searches. The
   masthead field says what it is, so it stays upright. */
.hub-search input::placeholder{font-style:italic}
.sf input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.sf input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sf kbd{
  position:absolute;right:12px;font-family:var(--mono);font-size:11px;color:var(--text-muted);
  background:var(--shelf);border:1px solid var(--line-strong);padding:2px 7px;
}
.sf input:not(:placeholder-shown)~kbd{display:none}
.mast-search .sf input{min-height:44px;font-size:15px;padding:8px 14px 8px 38px}
.mast-search .sf svg{left:12px;width:15px;height:15px}
.mast-search .sf kbd{display:none}

/* ── Hub ──────────────────────────────────────────────────────────────── */
.wrap{
  max-width:1000px;margin:0 auto;
  padding-block:calc(34px + env(safe-area-inset-top,0px)) calc(80px + env(safe-area-inset-bottom,0px));
  padding-inline:max(20px,env(safe-area-inset-left,20px)) max(20px,env(safe-area-inset-right,20px));
}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,6vw,3rem);line-height:1.1;letter-spacing:-.025em;margin:0 0 12px;text-wrap:balance}
.stand{color:var(--text-secondary);font-size:1.0625rem;margin:0 0 28px;max-width:58ch}
.hub-search{max-width:620px;margin:26px 0 10px}
.hint{font-family:var(--mono);font-size:11.5px;color:var(--text-muted);letter-spacing:.04em;margin:0 0 44px}
.hint b{color:var(--text-secondary)}
.js-only{display:none}
.js-search .js-only{display:block}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid var(--border);padding-top:16px;margin-bottom:22px}
.sec-head h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0}
.count{font-family:var(--mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em;font-variant-numeric:tabular-nums}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.card{
  border:1px solid var(--border);border-top:3px solid transparent;
  background:linear-gradient(var(--bg-elevated),var(--bg-elevated)) padding-box, var(--logo-fade) border-box;
  padding:24px 24px 20px;display:flex;flex-direction:column;gap:10px;
}
.card h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.015em;margin:0;line-height:1.2}
.card h3 a{color:var(--text);text-decoration:none}
.card h3 a:hover,.card h3 a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.card p{color:var(--text-secondary);font-size:.9375rem;line-height:1.6;margin:0}
.card ul{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column}
.card li a{display:block;padding:7px 0;font-size:.875rem;color:var(--text-muted);text-decoration:none}
.card li a:hover,.card li a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.badge{
  display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-tint);
  border:1px solid #E7CFC5;padding:2px 7px;vertical-align:2px;margin-left:8px;
}

/* ── Plan band ────────────────────────────────────────────────────────── */
/* Full width beneath the three cards. Heavier than a card on purpose: this
   is the thread the app exists for, not a fourth sibling. */
.feature{
  border:1px solid var(--border);border-top:3px solid transparent;
  background:linear-gradient(var(--bg-elevated),var(--bg-elevated)) padding-box, var(--logo-fade) border-box;
  padding:30px 32px;margin-top:28px;
}
.feature h2{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.015em;margin:0 0 10px;line-height:1.2}
.feature h2 a{color:var(--text);text-decoration:none}
.feature h2 a:hover,.feature h2 a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.feature .lede{color:var(--text-secondary);margin:0 0 20px;max-width:68ch;font-size:1rem;line-height:1.65}
.feature ul{
  list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 28px;
}
.feature li a{display:block;padding:7px 0;font-size:.9375rem;color:var(--text-muted);text-decoration:none}
.feature li a:hover,.feature li a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ── Results ──────────────────────────────────────────────────────────── */
#browse{border-top:1px solid var(--border);padding-top:38px}
#results{display:none}
.searching #results{display:block}
.searching #browse{display:none}
.res{list-style:none;margin:0;padding:0;border:1px solid var(--border);background:var(--bg-elevated)}
.res li+li{border-top:1px solid var(--border)}
.res a{display:block;padding:15px 20px;text-decoration:none;color:inherit;min-height:44px;border-left:3px solid transparent}
.res a:hover,.res a:focus-visible{background:var(--shelf);border-left-color:var(--accent)}
.res .crumb{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:3px}
.res .rh{font-weight:600;color:var(--text);font-size:1rem;display:block;line-height:1.35}
.res .rs{color:var(--text-muted);font-size:.875rem;line-height:1.55;display:block;margin-top:3px}
mark{background:var(--accent-tint);color:var(--text);padding:0 2px}
.nores{border:1px solid var(--border);background:var(--bg-elevated);padding:28px 24px;color:var(--text-secondary)}
.nores p{margin:0 0 8px}
.nores p:last-child{margin:0;color:var(--text-muted);font-size:.9375rem}

/* Dropdown variant for the masthead field on guide pages */
.drop{position:absolute;top:calc(100% + 9px);right:0;width:min(470px,calc(100vw - 40px));display:none;z-index:30;box-shadow:0 14px 34px rgba(17,20,23,.14)}
.searching .drop{display:block}
.drop .res{max-height:62vh;overflow-y:auto}
.drop .dh{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);background:var(--shelf);border:1px solid var(--border);border-bottom:0;padding:8px 20px}

/* ── Support block ────────────────────────────────────────────────────── */
.support{margin-top:56px;border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--bg-elevated);padding:22px 26px}
.support h2{font-family:var(--display);font-weight:700;font-size:1.0625rem;margin:0 0 6px}
.support p{color:var(--text-secondary);margin:0;font-size:.9375rem;max-width:62ch}

/* ── Guide article ────────────────────────────────────────────────────── */
.article{
  max-width:74ch;margin:0 auto;
  padding-block:40px calc(80px + env(safe-area-inset-bottom,0px));
  padding-inline:max(20px,env(safe-area-inset-left,20px)) max(20px,env(safe-area-inset-right,20px));
}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 18px}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--accent);text-decoration:underline}
.article h1{font-size:clamp(1.7rem,5vw,2.5rem);margin-bottom:8px}
.dateline{color:var(--text-muted);font-size:.85em;margin:0 0 40px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.article h2{font-family:var(--display);font-weight:700;font-size:1.2em;letter-spacing:-.01em;margin:48px 0 4px;padding-top:24px;border-top:1px solid var(--border)}
.article h2:first-of-type{border-top:none;padding-top:0}
.article h3{font-size:1em;font-weight:600;margin:28px 0 4px;color:var(--text)}
/* Lead paragraph: one step up from body, used above a guide's contents. */
.article .answer{font-size:1.05em;color:var(--text);margin:12px 0 16px}
.article p,.article li{color:var(--text-secondary)}
.article p{margin:12px 0}
.article ul{margin:12px 0;padding-left:1.3em}
.article li{margin:8px 0}
.article strong{color:var(--text);font-weight:600}
code{font-family:var(--mono);background:var(--shelf);border:1px solid var(--line-strong);border-radius:4px;padding:1px 6px;font-size:.88em;word-break:break-all}
.article pre{background:var(--bg-elevated);border:1px solid var(--border);border-left:3px solid var(--accent);padding:14px 18px;margin:16px 0;overflow-x:auto;font-family:var(--mono);font-size:.82em;line-height:1.55;color:var(--text)}
.article pre code{background:none;border:none;padding:0;font-size:1em;word-break:normal}
.article ol{margin:12px 0;padding-left:1.3em}
.article table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9em}
.article th{text-align:left;font-weight:600;color:var(--text);padding:8px 10px 8px 0;border-bottom:2px solid var(--line-strong)}
.article td{padding:8px 10px 8px 0;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-secondary)}
.table-scroll{overflow-x:auto}

.toc{background:var(--bg-elevated);border:1px solid var(--border);padding:20px 24px;margin:0 0 44px}
.toc p{margin:0 0 10px;font-family:var(--mono);font-size:.7em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.toc ol{margin:0;padding-left:1.5em;columns:2;column-gap:32px}
.toc li{margin:4px 0;font-size:.88em}
.toc a{color:var(--text-secondary);text-decoration:none}
.toc a:hover,.toc a:focus-visible{color:var(--accent);text-decoration:underline}

.callout{background:var(--bg-elevated);border:1px solid var(--border);border-left:3px solid var(--accent);padding:16px 20px;margin:24px 0}
.callout p:first-child{margin-top:0}
.callout p:last-child{margin-bottom:0}

/* One block per capture address, on the email guide */
.addr{border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--bg-elevated);padding:14px 18px;margin:16px 0}
.addr code{display:inline-block;margin-bottom:6px}
.addr p{margin:4px 0}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer{
  max-width:1000px;margin:0 auto;padding-top:24px;
  padding-inline:max(20px,env(safe-area-inset-left,20px)) max(20px,env(safe-area-inset-right,20px));
  padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);font-size:.8em;color:var(--text-muted);
}
.article+footer,footer.narrow{max-width:74ch}
footer a{color:var(--text-muted)}
footer nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px}

@media (max-width:620px){
  body{font-size:15px}
  .mast-in{gap:12px;flex-wrap:wrap}
  .js-search .mast-search{flex:1 1 100%;order:3;margin-left:0}
  .js-search .mast nav{margin-left:auto}
  .wrap{padding-block:calc(24px + env(safe-area-inset-top,0px)) calc(64px + env(safe-area-inset-bottom,0px))}
  .toc ol{columns:1}
  .drop{right:auto;left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Feedback sits outside <main> so the index generator never reads it, which
   means it also loses .article's width. This wrapper gives it back. */
.article-foot{
  max-width:74ch;margin:0 auto;
  padding-inline:max(20px,env(safe-area-inset-left,20px)) max(20px,env(safe-area-inset-right,20px));
}
.article-foot .support{margin-top:0}

/* ── Feedback form ────────────────────────────────────────────────────── */
/* Sits inside .support at the foot of the hub and every guide. Hidden until
   help.js enables it; the mailto beneath it is the no-JS path. */
.fb{display:none;flex-direction:column;gap:14px;margin:18px 0 0;max-width:46rem}
.js-search .fb{display:flex}  /* its own gate: .js-only would force display:block */
.fb-field{display:flex;flex-direction:column;gap:5px}
.fb-field label{font-size:.8125rem;font-weight:600;color:var(--text)}
.fb-field label span{font-weight:400;color:var(--text-muted)}
.fb textarea,.fb input{
  font-family:var(--sans);font-size:.9375rem;color:var(--text);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:0;
  padding:10px 12px;width:100%;appearance:none;
}
.fb textarea{resize:vertical;min-height:84px;line-height:1.5}
.fb input{min-height:44px}
.fb textarea:focus,.fb input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.fb-send{
  align-self:flex-start;min-height:44px;padding:11px 22px;cursor:pointer;
  font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:0;
}
.fb-send:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.fb-send[disabled]{background:var(--text-muted);border-color:var(--text-muted);cursor:default}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Turnstile renders a ~300x65 widget. Reserving the box keeps the Send
   button from jumping when it appears. */
.fb-captcha:not(:empty){min-height:65px}
.fb-note{margin:0;font-size:.875rem;color:var(--text-secondary)}
.fb-note.err{color:#A3341F}
.fb-alt{margin:14px 0 0;font-size:.875rem;color:var(--text-muted)}
.support .fb-done{margin:18px 0 0;font-size:.9375rem;color:var(--text-secondary)}