/* 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. */
:root { --hp-measure: 68ch; --hp-toc: 15rem; --hp-ink2: #45506a; --hp-faint: #8b96a8;
        /* Trak's orange, read off the official logo SVG. The generic blue this
           page shipped with was the reason it did not look like Trak.
           Two shades, because the brand orange is only 3.36:1 against white and
           anything carrying words needs 4.5:1. --hp-brand is for identity and
           decoration — the hero wash, the rule under a category, a focus ring.
           --hp-brand-d (5.04:1) is for text and for anything with text on it. */
        --hp-brand: #F3582D; --hp-brand-d: #c93d16; --hp-brand-dd: #b03410;
        --hp-brand-wash: #fff4f0;
        --hp-ink: #16203a; --hp-line: #e6eaf2; }

.hp-body { background: #fff; color: var(--ink); font-size: 1.0625rem; line-height: 1.65; }
.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 #d9c3ba; 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: #f6c3b2; 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. */
.hp-video { position: relative; aspect-ratio: 16 / 9; width: 100%; margin: 18px 0;
            background: #0d1526; border-radius: 10px; overflow: hidden; }
.hp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.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: #0f1830; }
.hp-prose em { font-style: italic; }
.hp-prose code { background: #f1f4f9; 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: #f1f4f9; 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 #d8e2f0;
                       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 #f1f4f9; 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: #e7f0ff; border-color: #b9cdf0; }

.hp-empty { text-align: center; padding: clamp(32px, 7vw, 64px) 20px; background: var(--bg);
            border: 1px dashed #d8e2f0; 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; }