/* Styles for the two server-rendered surfaces:
     /        the connect page and widget harness   (.hx-)
     /admin   the support supervision console        (.cx-)

   The widget itself is styled inside its own shadow root and shares nothing
   with this file — which is the point. The fixture-driven mock of Trak that
   used to live here is gone, and its styles went with it. */

:root { --blue: #0E5FD8; --blue-d: #0A47A3; --bg: #f5f7fb; --line: #e3e8f0;
        --ink: #16203a; --muted: #6b7789; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }

/* ══════════════════════════════════════════════════════════════════════════
   Harness (/). One job: prove the widget works against a real account, so it
   stays out of the widget's way.
   ══════════════════════════════════════════════════════════════════════════ */
.hx { max-width: 560px; margin: 0 auto; padding: 9vh 20px 80px; }
.hx-brand { font-weight: 700; margin-bottom: 18px; letter-spacing: -.01em; }
.hx-brand span { font-weight: 400; color: var(--muted); }

.hx-card { background: #fff; border: 1px solid var(--line); border-radius: 13px;
           padding: 20px 22px; margin-bottom: 14px; }
.hx-card h1 { font-size: 18px; margin-bottom: 5px; }
.hx-card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
              color: var(--muted); margin-bottom: 9px; }
.hx-sub { color: var(--muted); font-size: 13.5px; }

.hx-input { width: 100%; padding: 11px 13px; font: inherit; border: 1px solid #cbd5e1;
            border-radius: 9px; margin: 14px 0 12px; }
.hx-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.hx-go { background: var(--blue); color: #fff; border: none; border-radius: 9px;
         padding: 11px 22px; font: inherit; font-weight: 600; cursor: pointer; }
.hx-go:hover { background: var(--blue-d); }

.hx-err { background: #fdecec; border: 1px solid #f6c9c9; color: #a12626;
          border-radius: 10px; padding: 11px 14px; margin-bottom: 13px; font-size: 13.5px; }

.hx-note { color: var(--muted); font-size: 12.5px; padding: 2px 4px; }
.hx-note p { margin-bottom: 7px; }
.hx-note b { color: #45506a; }

/* Connected. The green dot is the only strong colour on the page — it is the
   one fact you want to read at a glance. */
.hx-live { border-color: #cbeedd; }
.hx-row { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.hx-dot { width: 9px; height: 9px; border-radius: 50%; background: #21a366; flex: none;
          box-shadow: 0 0 0 3px rgba(33,163,102,.16); }
.hx-off { margin-left: auto; font-size: 13px; font-weight: 600; text-decoration: none; }
.hx-off:hover { text-decoration: underline; }

.hx-dl { display: grid; grid-template-columns: 96px 1fr; }
.hx-dl dt { color: var(--muted); font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid #f2f5f9; }
.hx-dl dd { font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid #f2f5f9; }
.hx-dl dt:last-of-type, .hx-dl dd:last-of-type { border-bottom: none; }

.hx-tag { display: inline-block; background: #eef2f8; color: #5b6879; border-radius: 20px;
          padding: 2px 9px; font-size: 11px; font-weight: 700; margin-left: 5px; }
.hx-sa { background: #e7f0ff; color: #1457c4; }

/* ══════════════════════════════════════════════════════════════════════════
   Support console (/admin). Dense and quiet: it is read all day, and nothing
   in it should compete with the conversation text itself.
   ══════════════════════════════════════════════════════════════════════════ */
.cx-body { background: #f5f7fb; color: #16203a; font: 14px/1.55 -apple-system, BlinkMacSystemFont,
           "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.cx-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
.cx-narrow { max-width: 420px; margin: 10vh auto; padding: 0 20px; }
.cx-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
/* Sign out is always last on the right, whatever sits between it and the brand,
   so adding a nav link does not push it into the middle of the bar. */
.cx-out { margin-left: auto; }
.cx-nav { color: #0E5FD8; text-decoration: none; font-weight: 600; font-size: 13px; }
.cx-nav:hover { text-decoration: underline; }
.cx-brand { font-weight: 700; letter-spacing: -.01em; }
.cx-brand span { font-weight: 400; color: #6b7789; }
.cx-back, .cx-out { color: #0E5FD8; text-decoration: none; font-weight: 600; font-size: 13px; }
.cx-back:hover, .cx-out:hover { text-decoration: underline; }

.cx-card { background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 16px 18px;
           margin-bottom: 14px; }
.cx-flush { padding: 0; overflow: hidden; }
.cx-card h1 { font-size: 17px; margin-bottom: 3px; }
.cx-card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #6b7789;
              margin-bottom: 8px; }
.cx-sub { color: #6b7789; font-size: 13px; }
.cx-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cx-err { background: #fdecec; border: 1px solid #f6c9c9; color: #a12626; border-radius: 10px;
          padding: 10px 13px; margin-bottom: 12px; font-size: 13px; }
.cx-pre { background: #f1f4f9; border-radius: 6px; padding: 9px 11px; font-size: 12px; overflow-x: auto;
          font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 8px; }

.cx-input { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid #cbd5e1;
            border-radius: 8px; margin: 10px 0; }
.cx-input-sm { max-width: 190px; margin: 0; }
.cx-textarea { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid #cbd5e1;
               border-radius: 8px; resize: vertical; }
.cx-go { background: #0E5FD8; color: #fff; border: none; border-radius: 8px; padding: 10px 18px;
         font: inherit; font-weight: 600; cursor: pointer; }
.cx-go:hover { background: #0A47A3; }
.cx-go-sm { padding: 7px 14px; font-size: 13px; }
.cx-row { display: flex; gap: 9px; align-items: center; margin-top: 9px; }
.cx-link { background: none; border: none; color: #0E5FD8; font: inherit; font-weight: 600;
           cursor: pointer; padding: 0; }
.cx-release { margin-top: 13px; padding-top: 12px; border-top: 1px solid #eef2f7; font-size: 13px; }

.cx-filters { display: flex; gap: 9px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.cx-search { padding: 8px 12px; font: inherit; border: 1px solid #cbd5e1; border-radius: 8px;
             min-width: 230px; }
.cx-check { font-size: 13px; color: #445; display: flex; align-items: center; gap: 6px; }
.cx-count { color: #6b7789; font-size: 12.5px; margin-left: auto; }

.cx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cx-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
               color: #8b96a8; padding: 10px 14px; border-bottom: 1px solid #e3e8f0; font-weight: 700; }
.cx-table td { padding: 10px 14px; border-bottom: 1px solid #f1f4f9; vertical-align: middle; }
.cx-table tr:last-child td { border-bottom: none; }
.cx-table tbody tr { cursor: pointer; }
.cx-table tbody tr:hover { background: #f7f9fd; }
.cx-table small { display: block; color: #8b96a8; font-size: 11.5px; }
.cx-n { text-align: right; }
.cx-zero { color: #c3cbd8; }
.cx-writes { color: #a35a00; }
.cx-go-cell { color: #c3cbd8; text-align: right; }

.cx-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px;
           border-radius: 20px; background: #eef2f8; color: #5b6879; white-space: nowrap; }
.cx-pill-warn { background: #fdf0dc; color: #8a5200; }

.cx-grid { display: grid; grid-template-columns: 1fr 330px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .cx-grid { grid-template-columns: 1fr; } }

.cx-log { max-height: 62vh; overflow-y: auto; padding: 14px 16px; }
.cx-msg { margin-bottom: 13px; }
.cx-who { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
          color: #8b96a8; margin-bottom: 3px; display: flex; align-items: center; gap: 7px; }
.cx-who span:last-child { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; }
.cx-auto { background: #eef2f8; color: #5b6879; border-radius: 4px; padding: 1px 6px; font-size: 10px; }
.cx-text { white-space: pre-wrap; }
.cx-user .cx-text { background: #eef4ff; border-radius: 10px; padding: 8px 11px; }
.cx-ai .cx-text { background: #fff; border: 1px solid #e8edf5; border-radius: 10px; padding: 8px 11px; }
.cx-agent .cx-text { background: #eafaf1; border: 1px solid #cbeedd; border-radius: 10px; padding: 8px 11px; }
.cx-tool { font-size: 11.5px; color: #6b7789; padding: 2px 0 8px 2px;
           font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cx-tool code { color: #0E5FD8; }
.cx-confirm { font-size: 12px; background: #fdf0dc; border-radius: 8px; padding: 6px 10px;
              margin-bottom: 11px; color: #7a4a00; }
.cx-c-cancelled, .cx-c-declined { background: #fdecec; color: #a12626; }
.cx-note { font-size: 12px; color: #8b96a8; text-align: center; padding: 5px 0 12px; }
.cx-file { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #d8e2f0;
           border-radius: 9px; padding: 5px 10px; margin-bottom: 5px; margin-right: 5px;
           font-size: 12px; color: #0E5FD8; text-decoration: none; }
.cx-file:hover { border-color: #0E5FD8; background: #f5f9ff; }

.cx-audit { display: flex; flex-direction: column; gap: 7px; max-height: 62vh; overflow-y: auto; }
.cx-arow { border: 1px solid #eef2f7; border-radius: 8px; padding: 7px 9px; font-size: 12px; }
.cx-awrite { border-color: #f0dcc0; background: #fffbf5; }
.cx-arow code { color: #16203a; font-weight: 600;
                font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cx-atag { color: #8b96a8; margin-left: 6px; font-size: 10.5px; text-transform: uppercase; }
.cx-astatus { float: right; font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.cx-ok { color: #1a7f4f; } .cx-error, .cx-refused { color: #a12626; }
.cx-adetail { color: #6b7789; margin-top: 3px; word-break: break-word; }

.cx-open a { font-weight: 600; text-decoration: none; }
.cx-open a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   Public help site (/help). The only genuinely public page in the app: it is
   shared with customers, indexed by search engines and read on phones, so it
   gets a real type scale and a comfortable measure instead of the 14px density
   the console lives at.

   Everything here is written defensively, because the markup is generated
   elsewhere. Markdown::toArticleHtml emits bare semantic tags with no classes
   at all, so the whole of .hp-prose is reached by descendant selector; and an
   article carries a table of contents only when it has three or more headings,
   so the article layout has to look deliberate with and without one.
   ══════════════════════════════════════════════════════════════════════════ */

/* These sit on :root rather than on .hp-body so an article page still gets its
   measure if the body class is ever missed. Nothing outside this section reads
   --hp-*, and the widget's shadow root never references them. */
/* ── Trak's own design tokens ─────────────────────────────────────────────
   Read off www.trak.co rather than eyeballed, so this page and the marketing
   site cannot drift apart: the brand ramp is Trak's --color-brand-* scale
   verbatim, the ink is its #0E1B2C navy, and the typeface is the same Manrope
   it self-hosts. Two brand shades, because brand-500 is only 3.36:1 on white:
   -brand carries identity and decoration, -brand-d (6.06:1, Trak's own
   brand-700) carries anything made of words. */
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 800;
             font-display: swap; src: url(/assets/fonts/manrope-v20-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: Manrope; font-style: normal; font-weight: 400 800;
             font-display: swap; src: url(/assets/fonts/manrope-v20-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; }

/* These sit on :root rather than on .hp-body so an article page still gets its
   measure if the body class is ever missed. Nothing outside this section reads
   --hp-*, and the widget's shadow root never references them. */
:root { --hp-measure: 68ch; --hp-toc: 15rem;
        --hp-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
        /* Trak brand ramp, verbatim from www.trak.co */
        --hp-brand: #f3582d;      /* brand-500 — identity, washes, rules      */
        --hp-brand-d: #b53415;    /* brand-700 — 6.06:1, safe for text        */
        --hp-brand-dd: #742516;   /* brand-900 — hover, pressed               */
        --hp-brand-wash: #fff3ee; /* brand-50  — hero and callout grounds     */
        --hp-brand-line: #fec0a4; /* brand-200 — hairlines that carry colour  */
        --hp-ink: #0e1b2c;        /* Trak navy, 17.3:1                        */
        --hp-ink2: #41506b;       /* 8.1:1  — secondary prose                 */
        --hp-faint: #6b7a93;      /* 4.35:1 — meta only, never body copy      */
        --hp-sunk: #f4f5f7;   /* code and table fills, near-neutral  */
        --hp-line: #e4e9f1; }

.hp-body { background: #fff; color: var(--hp-ink); font-family: var(--hp-font);
           font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.hp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

/* The masthead row is .hp-head > .hp-wrap when there is an inner wrap and
   .hp-head itself when there is not, so both are declared as the flex row. */
.hp-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
           justify-content: space-between; flex-wrap: wrap; gap: 10px 20px;
           padding: 12px clamp(16px, 4vw, 32px); background: rgba(255, 255, 255, .93);
           backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); }
.hp-head > .hp-wrap { width: 100%; padding: 0; display: flex; align-items: center;
                      justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; }
/* The lockup, plus a "Help" tag so the masthead says which Trak surface this is
   without a second line of text. The divider is a border rather than a glyph so
   it disappears cleanly when the tag wraps on a narrow screen. */
.hp-brand { display: inline-flex; align-items: center; gap: 10px;
            font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.hp-logo { display: block; width: auto; height: 26px; }
.hp-brand span { padding-left: 10px; border-left: 1px solid var(--hp-line);
                 font-weight: 600; font-size: .9375rem; color: var(--muted); }

/* Keyboard users land here first; it stays out of the way until focused. */
.hp-skip { position: absolute; left: -9999px; top: 0; z-index: 40; }
.hp-skip:focus { left: 8px; top: 8px; padding: 10px 14px; background: var(--hp-ink);
                 color: #fff; border-radius: 8px; text-decoration: none; }
/* The element itself is the <a> — a descendant selector here matches nothing,
   and the brand falls through to the global link colour and underline. */
.hp-brand, .hp-brand:hover { color: inherit; text-decoration: none; }
.hp-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
          font-size: .875rem; font-weight: 600; }
.hp-nav a { color: var(--hp-ink2); text-decoration: none; }
.hp-nav a:hover { color: var(--hp-brand-d); text-decoration: underline; }

/* A warm wash behind the hero rather than a rule under it: it gives the page a
   masthead of its own and carries the brand colour without shouting.
   The band is a full-width block with its own inner .hp-wrap, so no negative
   z-index and no 100vw — the first paints unpredictably against the canvas
   background and the second overflows by the width of the scrollbar. */
.hp-hero { padding: clamp(40px, 8vw, 76px) 0 clamp(32px, 5vw, 52px); text-align: center;
           margin-bottom: clamp(28px, 5vw, 48px);
           background: linear-gradient(180deg, var(--hp-brand-wash), #fff);
           border-bottom: 1px solid var(--hp-line); }
.hp-h1 { font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.1; letter-spacing: -.025em;
         font-weight: 700; }
.hp-lede { max-width: 56ch; margin: 14px auto 0; color: var(--muted); line-height: 1.6;
           font-size: clamp(1rem, 2.2vw, 1.1875rem); }

/* Category groups. Spacing is carried on .hp-cat rather than a grid gap on
   .hp-cats, so nothing depends on .hp-cats being the direct parent. */
/* Search. The row is flex so the input takes the slack and the button keeps its
   natural width; it stacks below 30rem rather than squeezing both. */
.hp-search { max-width: 34rem; margin: clamp(20px, 4vw, 28px) auto 0; }
.hp-search-label { display: block; margin-bottom: 7px; font-size: .8125rem; font-weight: 700;
                   color: var(--hp-ink2); text-align: center; }
.hp-search-row { display: flex; gap: 8px; text-align: left; }
.hp-search-input { flex: 1 1 auto; min-width: 0; padding: 13px 16px; font: inherit;
                   font-size: 1rem; color: var(--hp-ink); background: #fff;
                   border: 1px solid var(--hp-brand-line); border-radius: 10px; }
.hp-search-input::placeholder { color: var(--hp-faint); }
.hp-search-input:focus { outline: 2px solid var(--hp-brand); outline-offset: 1px;
                         border-color: var(--hp-brand); }
.hp-search-go { flex: none; padding: 13px 22px; font: inherit; font-weight: 700; color: #fff;
                background: var(--hp-brand-d); border: 1px solid var(--hp-brand-d);
                border-radius: 10px; cursor: pointer; }
.hp-search-go:hover { background: var(--hp-brand-dd); border-color: var(--hp-brand-dd); }
.hp-search-go:focus-visible { outline: 2px solid var(--hp-ink); outline-offset: 2px; }
@media (max-width: 30rem) {
  .hp-search-row { flex-direction: column; }
  .hp-search-go { width: 100%; }
}

/* The result count line, and the way back to the full listing. */
.hp-found { margin-bottom: 18px; color: var(--muted); font-size: .9375rem; }
.hp-found a { color: var(--hp-brand-d); font-weight: 600; }

.hp-cats { padding-bottom: clamp(24px, 5vw, 40px); }
.hp-cat { margin-bottom: clamp(32px, 5vw, 52px); }
.hp-cat:last-child { margin-bottom: 0; }
.hp-cat-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
                color: var(--hp-ink2); padding-bottom: 9px; margin-bottom: 16px;
                border-bottom: 2px solid var(--hp-brand); }

/* min() in the track keeps a single column at 360px instead of overflowing. */
.hp-cards { display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.hp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
           border-radius: 13px; padding: 16px 18px 15px; color: inherit; text-decoration: none;
           transition: border-color .15s ease, box-shadow .15s ease; }
.hp-card:hover { border-color: var(--hp-brand-line); box-shadow: 0 6px 18px -10px rgba(22, 32, 58, .28); }
.hp-card:focus-visible { outline: 2px solid var(--hp-brand); outline-offset: 2px; }
.hp-card-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em;
                 color: var(--ink); }
.hp-card-title a { color: inherit; text-decoration: none; }
.hp-card:hover .hp-card-title, .hp-card-title a:hover { color: var(--hp-brand-d); }
.hp-card-sum { flex: 1 1 auto; margin-top: 7px; color: var(--muted); font-size: .9375rem;
               line-height: 1.55; }
.hp-card-meta { margin-top: 14px; font-size: .75rem; font-weight: 700; text-transform: uppercase;
                letter-spacing: .05em; color: var(--hp-faint); }
.hp-badge { display: inline-block; background: var(--hp-brand-wash); color: var(--hp-brand-d); border-radius: 20px;
            padding: 2px 9px; font-size: .6875rem; font-weight: 700; white-space: nowrap; }

.hp-article { max-width: var(--hp-measure, 68ch); margin: 0 auto;
              padding: clamp(20px, 4vw, 36px) 0 0; }
/* Flex with a gap rather than whitespace in the markup: the separator is an
   aria-hidden <span> with no spaces around it, so without this every article
   opens with "Help centre/Jobs". */
/* The video player. aspect-ratio rather than the old padding-top trick, and on
   the wrapper rather than the iframe, so the player scales with the reading
   column at every width instead of carrying YouTube's fixed 560x315. */
/* A link to the video rather than the video. See Markdown::embed() for why:
   a blocked iframe renders as an empty box, which reads as a broken article. */
.hp-video { display: flex; align-items: center; gap: 14px; margin: 18px 0;
            padding: 14px 16px; background: var(--hp-brand-wash);
            border: 1px solid var(--hp-brand-line); border-radius: 10px;
            text-decoration: none; color: inherit; }
.hp-video:hover { border-color: var(--hp-brand); background: #fff; }
.hp-video-play { flex: none; display: grid; place-items: center; width: 42px; height: 42px;
                 border-radius: 50%; background: var(--hp-brand); color: #fff; }
.hp-video-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-video-title { font-weight: 700; color: var(--hp-ink); }
.hp-video-meta { font-size: .8125rem; color: var(--hp-ink2); }

.hp-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
            margin-bottom: 14px; font-size: .8125rem; color: var(--muted); }
.hp-crumb a { color: var(--hp-brand-d); font-weight: 600; text-decoration: none; }
.hp-crumb a:hover { text-decoration: underline; }
.hp-title { font-size: clamp(1.75rem, 4.6vw, 2.5rem); line-height: 1.15; letter-spacing: -.025em;
            font-weight: 700; }
.hp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px;
           padding-bottom: 20px; border-bottom: 1px solid var(--line);
           font-size: .8125rem; color: var(--muted); }

.hp-toc { margin-top: 24px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line);
          border-radius: 12px; font-size: .9375rem; }
.hp-toc-title { margin-bottom: 8px; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
                letter-spacing: .07em; color: var(--hp-faint); }
.hp-toc ul, .hp-toc ol { list-style: none; }
.hp-toc li { margin: 5px 0; line-height: 1.4; }
.hp-toc li ul, .hp-toc li ol { margin: 5px 0 5px 14px; }
.hp-toc a { color: var(--hp-ink2); text-decoration: none; }
.hp-toc a:hover { color: var(--hp-brand-d); text-decoration: underline; }

.hp-prose { max-width: var(--hp-measure, 68ch); margin-top: clamp(24px, 4vw, 36px);
            font-size: 1.0625rem; line-height: 1.72; }
.hp-prose > :first-child { margin-top: 0; }
.hp-prose p { margin: 0 0 1.15em; }
/* scroll-margin because the masthead is sticky: a jump to #some-heading from
   the table of contents would otherwise land under it. */
.hp-prose h2 { margin: 1.9em 0 .55em; font-size: 1.5rem; font-weight: 700; line-height: 1.25;
               letter-spacing: -.015em; scroll-margin-top: 78px; }
.hp-prose h3 { margin: 1.9em 0 .45em; font-size: 1.1875rem; font-weight: 700; line-height: 1.35;
               scroll-margin-top: 78px; }
.hp-prose h2 + h3 { margin-top: 1.1em; }
.hp-prose ul, .hp-prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.hp-prose li { margin: 0 0 .45em; }
.hp-prose li > ul, .hp-prose li > ol { margin: .45em 0 0; }
.hp-prose li::marker { color: var(--hp-faint); }
.hp-prose a { color: var(--hp-brand-d); text-decoration: underline; text-decoration-thickness: 1px;
              text-underline-offset: 2px; }
.hp-prose a:hover { color: var(--hp-brand-dd); }
.hp-prose strong { font-weight: 700; color: var(--hp-ink); }
.hp-prose em { font-style: italic; }
.hp-prose code { background: var(--hp-sunk); border-radius: 5px; padding: .12em .38em; font-size: .875em;
                 font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }
.hp-prose pre { margin: 0 0 1.2em; background: var(--hp-sunk); border-radius: 8px; padding: 12px 14px;
                overflow-x: auto; font-size: .875rem; line-height: 1.6; }
.hp-prose pre code { background: none; padding: 0; font-size: 1em; }
.hp-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.hp-prose blockquote { margin: 1.5em 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--hp-line);
                       color: var(--hp-ink2); }
.hp-prose blockquote p:last-child { margin-bottom: 0; }
/* Screenshots are the bulk of the help images and most of them are pale, so the
   hairline is what stops them dissolving into the page. */
.hp-prose img { display: block; max-width: 100%; height: auto; margin: 1.6em 0;
                background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.hp-prose table { width: 100%; margin: 0 0 1.3em; border-collapse: collapse; font-size: .9375rem; }
.hp-prose th { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
               font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
               color: var(--hp-faint); white-space: nowrap; }
.hp-prose td { padding: 9px 12px; border-bottom: 1px solid var(--hp-line); vertical-align: top; }
.hp-prose tr:last-child td { border-bottom: none; }

/* toArticleHtml emits a bare <table>, so a wide one arrives with no wrapper to
   scroll inside. Making the table its own scroll container is what keeps the
   page body from scrolling sideways on a phone. Wrapping it in .hp-scroll gives
   the tidier result, and that rule wins because the table is no longer a child
   of .hp-prose. */
.hp-prose > table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
.hp-scroll { max-width: 100%; margin: 0 0 1.3em; overflow-x: auto; }
.hp-scroll > table, .hp-scroll > pre { margin: 0; }

.hp-foot { margin-top: clamp(40px, 7vw, 72px);
           padding: clamp(24px, 4vw, 36px) 0 clamp(32px, 5vw, 56px);
           border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.hp-foot a { font-weight: 600; }
/* The same form in a left-aligned column rather than centred under the hero
   lede, and tighter, because here it is one option beside "email us" instead of
   the main thing on the page. */
.hp-foot .hp-search { margin: 14px 0 18px; max-width: 30rem; }
.hp-foot .hp-search-label { text-align: left; }
/* A real button in the brand colour. Every use of .hp-cta is the <a> itself —
   the footer's "Email us" and the 404's way back — so it can carry solid brand
   without any risk of brand-on-brand text. inline-flex, not flex, or it
   stretches the full width of the footer and stops reading as a button. */
.hp-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--hp-brand-d);
          border: 1px solid var(--hp-brand-d); border-radius: 10px; padding: 12px 20px;
          color: #fff; font-size: .9375rem; font-weight: 700; text-decoration: none;
          transition: background .15s ease, border-color .15s ease; }
.hp-cta:hover { background: var(--hp-brand-dd); border-color: var(--hp-brand-dd);
                color: #fff; text-decoration: none; }
.hp-cta:focus-visible { outline: 2px solid var(--hp-ink); outline-offset: 2px; }
a.hp-cta:hover { background: var(--hp-brand-wash); border-color: var(--hp-brand-line); }

.hp-empty { text-align: center; padding: clamp(32px, 7vw, 64px) 20px; background: var(--bg);
            border: 1px dashed var(--hp-line); border-radius: 13px; color: var(--muted);
            font-size: .9375rem; }
.hp-empty a { font-weight: 600; }

.hp-404 { max-width: 44rem; margin: 0 auto; text-align: center;
          padding: clamp(48px, 12vw, 112px) 0 clamp(40px, 8vw, 80px); }
.hp-404 h1 { margin-bottom: 12px; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15;
             letter-spacing: -.025em; }
.hp-404 p { margin-bottom: 20px; color: var(--muted); }
.hp-404 a { font-weight: 600; }

/* Wide screens: the table of contents becomes a sticky second column. It spans
   every row so it can travel the length of the article, and every other child
   is pinned to column 1 — an article whose ToC is nested inside something else
   just keeps the inline card, which is why the row gap stays at 0 and the
   vertical rhythm lives in the margins. */
@media (min-width: 1120px) {
  /* :has() so the second column exists only when there is a ToC to put in it.
     Three of the articles have fewer than three headings and get no ToC, and
     reserving the gutter for them left their prose sitting off-centre next to
     nothing. Browsers without :has() keep the old two-column grid, which is the
     harmless end of the fallback. */
  .hp-article { display: grid; max-width: none; justify-content: center; align-items: start;
                grid-template-columns: minmax(0, var(--hp-measure, 68ch)) var(--hp-toc, 15rem);
                column-gap: clamp(32px, 4vw, 56px); row-gap: 0; }
  .hp-article:not(:has(> .hp-toc)) { grid-template-columns: minmax(0, var(--hp-measure, 68ch)); }
  .hp-article > * { grid-column: 1; min-width: 0; }
  .hp-article > .hp-toc { grid-column: 2; grid-row: 1 / span 60; align-self: start;
                          position: sticky; top: 78px; margin: 4px 0 0; }
}

@media (max-width: 420px) {
  .hp-body { font-size: 1rem; }
  .hp-card { padding: 14px 15px; }
  .hp-nav { gap: 6px 12px; font-size: .8125rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Docs admin (/admin/docs). Renders inside the console shell, so it borrows the
   .cx- palette and its density: the job is to scan every article, spot the
   drafts and get into the editor, not to look like the site it publishes to.
   ══════════════════════════════════════════════════════════════════════════ */

.dx-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px; margin-bottom: 14px; }
.dx-bar .dx-count { margin-left: auto; }
.dx-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dx-count { color: #6b7789; font-size: 12.5px; }

.dx-list { background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; overflow: hidden; }

/* .dx-group is the category header bar. If the markup instead uses it as a
   wrapper around its rows, the second rule strips the header chrome off the
   wrapper and hands it to the title line; and .dx-row restates its own type
   regardless, so rows can never end up inheriting 10.5px small caps. */
.dx-group { padding: 8px 14px; background: #f7f9fd; border-top: 1px solid #e3e8f0;
            font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
            color: #8b96a8; }
.dx-list > .dx-group:first-child { border-top: none; }
.dx-group:has(.dx-row) { padding: 0; background: none; font-size: inherit; font-weight: 400;
                         text-transform: none; letter-spacing: 0; color: inherit; }
.dx-group:has(.dx-row) > :first-child:not(.dx-row) { padding: 8px 14px; background: #f7f9fd;
            font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
            color: #8b96a8; }

.dx-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px;
          background: #fff; border-bottom: 1px solid #f1f4f9; font-size: 13.5px; font-weight: 400;
          text-transform: none; letter-spacing: 0; color: #16203a; }
.dx-row:last-child { border-bottom: none; }
.dx-row:hover { background: #f7f9fd; }
.dx-row form { display: flex; align-items: center; gap: 6px; margin: 0; }
.dx-row-main { flex: 1 1 260px; min-width: 0; }
.dx-row-title { display: block; font-weight: 600; color: #16203a; text-decoration: none; }
a.dx-row-title:hover { color: #0E5FD8; text-decoration: underline; }
.dx-row-meta { display: block; margin-top: 2px; color: #8b96a8; font-size: 11.5px; word-break: break-word; }
.dx-row-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #6b7789; }

/* The modifiers carry the pill shape as well, so a badge written with only
   .dx-status-draft on it still reads as a badge. */
.dx-status, .dx-status-draft, .dx-status-published { display: inline-block; padding: 3px 9px;
            border-radius: 20px; background: #eef2f8; color: #5b6879; font-size: 11px;
            font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.dx-status-draft { background: #fdf0dc; color: #8a5200; }
.dx-status-published { background: #e7f6ec; color: #1a7f4f; }

.dx-form { display: grid; gap: 13px; align-content: start; }
.dx-field { min-width: 0; }
.dx-label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: .05em; color: #5b6879; }
.dx-label span { margin-left: 6px; font-weight: 400; text-transform: none; letter-spacing: 0;
                 color: #8b96a8; }
.dx-input, .dx-textarea, .dx-select { width: 100%; padding: 9px 12px; font: inherit; color: #16203a;
            background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; }
.dx-input:focus, .dx-textarea:focus, .dx-select:focus { outline: 2px solid #0E5FD8;
            outline-offset: 1px; border-color: #0E5FD8; }
/* Monospaced because the long one holds markdown: pipe tables and list
   indentation are unreadable in a proportional face. */
.dx-textarea { min-height: 96px; resize: vertical; font-size: 13px; line-height: 1.6; tab-size: 2;
               font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Sized to its options rather than the form width: a two-option status select
   stretched across the editor reads as a text field. */
.dx-select { width: auto; min-width: 170px; max-width: 100%; }
.dx-help { margin-top: 5px; color: #6b7789; font-size: 12px; }
.dx-help b { color: #45506a; }
.dx-help code { background: #f1f4f9; border-radius: 4px; padding: 1px 4px;
                font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dx-err { margin-top: 5px; color: #a12626; font-size: 12px; font-weight: 600; }
.dx-field:has(.dx-err) .dx-input, .dx-field:has(.dx-err) .dx-textarea,
.dx-field:has(.dx-err) .dx-select, [aria-invalid="true"].dx-input,
[aria-invalid="true"].dx-textarea, [aria-invalid="true"].dx-select { border-color: #e2a8a8;
            background: #fffbfb; }

.dx-btn, .dx-btn-ghost, .dx-btn-danger { display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 16px; background: #0E5FD8; color: #fff; border: 1px solid transparent;
            border-radius: 8px; font: inherit; font-weight: 600; line-height: 1.4; cursor: pointer;
            text-decoration: none; }
.dx-btn:hover { background: #0A47A3; }
.dx-btn-ghost { background: #fff; border-color: #cbd5e1; color: #16203a; }
.dx-btn-ghost:hover { background: #f7f9fd; border-color: #9fb3cd; }
.dx-btn-danger { background: #fff; border-color: #f0c9c9; color: #a12626; }
.dx-btn-danger:hover { background: #fdecec; border-color: #e0a1a1; }
.dx-btn:disabled, .dx-btn-ghost:disabled, .dx-btn-danger:disabled { opacity: .55; cursor: default; }

.dx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
            align-items: start; }
@media (max-width: 1000px) { .dx-split { grid-template-columns: 1fr; } }

/* The preview pane holds exactly the bare-tag HTML the help site renders, so it
   needs its own prose rules — tighter than .hp-prose, because it is half a
   console screen wide. */
.dx-preview { background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; padding: 14px 16px;
              max-height: 70vh; overflow: auto; font-size: 13.5px; line-height: 1.6; }
.dx-preview > :first-child { margin-top: 0; }
.dx-preview p, .dx-preview ul, .dx-preview ol, .dx-preview pre,
.dx-preview blockquote { margin: 0 0 .9em; }
.dx-preview h2 { margin: 1.5em 0 .5em; font-size: 16px; line-height: 1.3; }
.dx-preview h3 { margin: 1.3em 0 .4em; font-size: 14px; line-height: 1.35; }
.dx-preview ul, .dx-preview ol { padding-left: 1.3em; }
.dx-preview li { margin-bottom: .3em; }
.dx-preview a { color: #0E5FD8; }
.dx-preview img { display: block; max-width: 100%; height: auto; margin: 1em 0;
                  border: 1px solid #e3e8f0; border-radius: 8px; }
.dx-preview hr { border: 0; border-top: 1px solid #e3e8f0; margin: 1.4em 0; }
.dx-preview blockquote { padding-left: 12px; border-left: 3px solid #d8e2f0; color: #45506a; }
.dx-preview code { background: #f1f4f9; border-radius: 4px; padding: 1px 4px; font-size: 12.5px;
                   font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dx-preview pre { background: #f1f4f9; border-radius: 6px; padding: 9px 11px; overflow-x: auto; }
.dx-preview pre code { background: none; padding: 0; }
.dx-preview table { display: block; width: max-content; max-width: 100%; margin: 0 0 .9em;
                    overflow-x: auto; border-collapse: collapse; font-size: 12.5px; }
.dx-preview th { text-align: left; padding: 7px 10px; border-bottom: 1px solid #e3e8f0;
                 font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
                 color: #8b96a8; }
.dx-preview td { padding: 7px 10px; border-bottom: 1px solid #f1f4f9; vertical-align: top; }

.dx-images { display: grid; gap: 10px;
             grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
.dx-image { padding: 6px; background: #fff; border: 1px solid #e3e8f0; border-radius: 9px;
            font-size: 11px; color: #6b7789; }
.dx-image img { display: block; width: 100%; height: 84px; object-fit: cover; border-radius: 5px;
                background: #f1f4f9; }
.dx-image span, .dx-image small, .dx-image code { display: block; margin-top: 5px; line-height: 1.4;
                word-break: break-all; }
/* user-select: all so one click selects the whole snippet — it is meant to be
   copied straight into the body field. */
.dx-snippet { display: block; margin-top: 8px; padding: 8px 10px; background: #f1f4f9;
              border-radius: 6px; font-size: 12px; white-space: pre; overflow-x: auto;
              user-select: all; color: #16203a;
              font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dx-drop { display: block; padding: 16px; text-align: center; background: #fbfcfe;
           border: 1px dashed #cbd5e1; border-radius: 10px; color: #6b7789; font-size: 12.5px; }
label.dx-drop { cursor: pointer; }
.dx-drop:hover, .dx-drop:focus-within { background: #f5f9ff; border-color: #0E5FD8; }
.dx-drop input[type="file"] { display: block; max-width: 100%; margin: 8px auto 0; font: inherit;
                              font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   Setup catalogue (/admin/setup). Also inside the console shell, so it reuses
   .cx-card and the .dx- header bar; what it adds is the step block, which is a
   dense label/value layout rather than a form.

   Every step carries the same six rows in the same order, so the eye can run
   down the page comparing one step against the next. That is the whole reason
   the labels are a fixed-width column instead of inline bold text — ragged
   labels turn 27 blocks into 27 different shapes.
   ══════════════════════════════════════════════════════════════════════════ */

.sx-intro p { margin-bottom: 9px; max-width: 86ch; }
.sx-intro p:last-child { margin-bottom: 0; }
.sx-intro code, .cx-card .sx-rule code, .sx-tools code, .sx-id, .sx-retired code,
.sx-rationale code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.sx-group { margin: 26px 0 12px; font-size: 13px; font-weight: 700; }
.sx-group .dx-count { margin-left: 6px; font-weight: 400; }

.sx-step { scroll-margin-top: 16px; }
.sx-hd { display: flex; align-items: baseline; gap: 11px; }
/* Tabular figures so a two-digit number does not shunt the titles sideways. */
.sx-num { flex: none; min-width: 26px; color: #8b96a8; font-size: 12px; font-weight: 700;
          font-variant-numeric: tabular-nums; }
.sx-hd-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.sx-hd h3 { font-size: 15px; line-height: 1.35; }
.sx-id { color: #6b7789; font-size: 11.5px; word-break: break-all; }

.sx-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 11px 37px; }
.sx-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; background: #eef2f8;
            color: #5b6879; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sx-b-key { background: #e7f0ff; color: #1457c4; }
.sx-b-good { background: #e7f6ec; color: #1a7f4f; }
.sx-b-warn { background: #fdf0dc; color: #8a5200; }
.sx-b-stop { background: #fdecec; color: #a12626; }

/* The label column. It drops to its own line below 640px, where a 104px gutter
   leaves the value squeezed into about twenty characters. */
.sx-ask, .sx-why, .sx-rule, .sx-rec, .sx-tools, .sx-tools-none, .sx-block, .sx-options {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 12px;
  margin: 0 0 9px 37px; font-size: 13.5px; }
.sx-label { color: #8b96a8; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .05em; padding-top: 3px; }
.sx-ask { color: #16203a; }
.sx-why, .sx-rule, .sx-tools-none { color: #45506a; font-size: 13px; }
.sx-rule code { color: #16203a; font-size: 12.5px; }

.sx-tools ol { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sx-tools li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; font-size: 12.5px; }
.sx-tools li code { color: #16203a; font-weight: 600; }
.sx-acc { color: #8b96a8; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
          letter-spacing: .03em; }
/* A write is the only thing on a step that changes the customer's account, and
   it is read off this page the same way it is read off the audit panel. */
.sx-acc-write { color: #a35a00; }
.sx-acc-missing { color: #a12626; text-transform: none; letter-spacing: 0; font-size: 11px; }
.sx-ep { color: #6b7789; font-size: 12px;
         font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.sx-block { color: #7a4a00; background: #fffbf5; border: 1px solid #f0dcc0; border-radius: 9px;
            padding: 8px 11px; font-size: 12.5px; line-height: 1.5; }
.sx-block .sx-label { color: #8a5200; }

.sx-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 5px; }
.sx-opt-trade { min-width: 74px; color: #6b7789; font-size: 11.5px; font-weight: 700; }
.sx-chip { display: inline-block; padding: 2px 9px; border: 1px solid #d8e2f0; border-radius: 20px;
           background: #fff; font-size: 11.5px; color: #45506a; }

.sx-notes { margin: 0 0 9px 37px; }
.sx-notes summary { color: #6b7789; font-size: 12px; font-weight: 600; cursor: pointer; }
.sx-notes summary:hover { color: #0E5FD8; }
.sx-notes p { margin-top: 6px; padding: 9px 11px; background: #f7f9fd; border-radius: 9px;
              color: #45506a; font-size: 12.5px; line-height: 1.55; }

.sx-rec { margin-bottom: 0; }
.sx-rec-chip { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border-radius: 6px;
               background: #eef2f8; color: #5b6879; font-size: 11px; white-space: nowrap; }
.sx-rec-done { background: #e7f6ec; color: #1a7f4f; }
.sx-rec-skip { background: #f1f4f9; color: #6b7789; }
.sx-rec-none { margin: 0 0 0 37px; color: #c3cbd8; font-size: 11.5px; }

/* The progress table is the one thing here with a fixed set of columns, so it
   gets its own scroller rather than letting a long email widen the page. */
.sx-scroll { max-width: 100%; overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
/* .cx-table assumes its rows open something — the conversations list is the only
   other user of it. These rows go nowhere, so take the hand cursor back off. */
.sx-scroll .cx-table tbody tr { cursor: default; }
.sx-retired { margin-top: 10px; }

.sx-rationale summary { font-size: 13px; font-weight: 700; cursor: pointer; }
.sx-rationale summary:hover { color: #0E5FD8; }
.sx-rationale h3 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase;
                   letter-spacing: .04em; color: #6b7789; }
/* pre-wrap, because this prose is stored with its own paragraph breaks in it. */
.sx-prose { white-space: pre-wrap; max-width: 86ch; color: #45506a; font-size: 13px;
            line-height: 1.6; }

@media (max-width: 640px) {
  .sx-ask, .sx-why, .sx-rule, .sx-rec, .sx-tools, .sx-tools-none, .sx-block, .sx-options {
    grid-template-columns: minmax(0, 1fr); margin-left: 0; }
  .sx-badges, .sx-notes, .sx-rec-none { margin-left: 0; }
}