/* Tradin help center, foundation.
   Loads on every page. Three layers live here:
     1  foundation   tokens, reset, typography, base elements, icons, .wrap
     2  content      everything an article body uses, so it renders anywhere
     3  shared       Knowledge markup that appears on more than one template
   A template only carries what it alone renders. Anything a second page could
   need belongs in this file. */

/* ---------------------------------------------------------- 1. foundation */
@media (max-width: 1023px){
body.drw-open .rl::-webkit-scrollbar{width: 0;}
}
@media (max-width: 1023px){
body.drw-open .rl{transform: none;}
}
@media (max-width: 1023px){
body:not(.drw-open) .ovl{display: none;}
}
@media print{
body{background: #fff !important; color: #000 !important;}
}
/* Tradin help center, shared foundation and header.
   Self contained: no external stylesheet. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
:root{--bg:#050505; --bg2:#0a0f16; --bg3:#111823;
 --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
 --fg:#fff; --fg2:#c3c8d0; --muted:#85878a;
 --accent:#fff; --accent-ink:#a6b0c0; --good:#4fd0ae;
 --label:#a6b0c0;
 --sel:rgba(255,255,255,.20);
 --btn-bg:#efeff0; --btn-fg:#070b12;
 --glow:radial-gradient(88% 44% at 50% 26%,rgba(0,79,185,.40),transparent 68%);
 --r:16px;
 --dsp:'General Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
 --bdy:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 --mno:'Roboto Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
 --art-bg:#0c121b; --art-wash:rgba(0,86,200,.42); --art-grid:rgba(255,255,255,.05);
 --art-ink:#e8edf5; --art-soft:rgba(232,237,245,.36); --art-line:rgba(255,255,255,.18);
 --lift-1:0 1px 2px rgba(0,0,0,.6), 0 10px 26px -12px rgba(0,0,0,.85);
 --lift-2:0 2px 4px rgba(0,0,0,.6), 0 22px 44px -16px rgba(0,0,0,.9);
 --lift-edge:rgba(255,255,255,.20); --lift-face:rgba(255,255,255,.042);
 --lift-ring:rgba(255,255,255,.07);}
::selection{background:var(--sel)}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--dsp);font-weight:600;letter-spacing:-.022em;line-height:1.14;margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--bg2);padding:12px 18px;z-index:99;border-radius:0 0 10px 0}
.skip:focus{left:0}
body.at-home .rl{display:none}
body.at-home .wrap{display:block}
body.at-home .mn{max-width:1120px;padding-top:0;margin-left:0}
.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.13em}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
th,td{text-align:left;padding:10px 15px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--mno);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--label);
 font-weight:400;white-space:nowrap}
tbody th{font-weight:550;color:var(--fg);white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td{color:var(--fg2)}
body.rail-off .rt{left:24px}
body.rail-off .rl{display:none}
body.at-home .rt{display:none}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
}
.visibility-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
 white-space:nowrap}
.skip-navigation{position:absolute;left:-9999px;top:0;padding:10px 16px;background:var(--btn-bg);
 color:var(--btn-fg);border-radius:0 0 10px 0;z-index:100;font-weight:600}
.skip-navigation:focus{left:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:flex-start}
@media (max-width:1023px){
.wrap{display:block}
}
@media (max-width:719px){
.wrap,.ft-in{padding:0 16px}
}
body.rail-off .wrap{max-width:1440px}
body.rail-off .mn{margin-left:52px;max-width:none}

/* ------------------------------------------------------------- 2. content */
.cal-warn{border-left:3px solid var(--line2)}
.cal-warn::before{background-color:var(--accent);
 --ci:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.9 3.1 19.6h17.8z'/%3E%3Cpath d='M12 9.6v4'/%3E%3Ccircle cx='12' cy='16.6' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.pop{position:absolute;z-index:60;max-width:310px;background:var(--bg2);border:1px solid var(--line2);
 border-radius:12px;padding:12px 14px;box-shadow:0 18px 44px rgba(0,0,0,.36);font-size:13.6px;line-height:1.55;
 color:var(--fg2)}
.pop[hidden]{display:none}
.pop strong{display:block;font-family:var(--dsp);font-size:14.5px;color:var(--fg);margin-bottom:4px;letter-spacing:-.015em}
.sh{margin:22px 0 30px;padding:2px 0 2px 20px;border-left:3px solid var(--fg)}
.sh-l{font-family:var(--mno);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink);
 display:block;margin-bottom:7px}
.sh p{margin:0;font-size:1.14rem;line-height:1.56;letter-spacing:-.012em;color:var(--fg)}
.bd{font-size:16px;color:var(--fg2)}
.bd p{margin:0 0 17px}
.bd h3{font-size:1.09rem;margin:34px 0 12px;color:var(--fg);font-weight:600;letter-spacing:-.018em}
.bd ul,.bd ol{margin:0 0 18px;padding-left:22px}
.bd li{margin-bottom:8px}
.bd ul.cols{columns:2;column-gap:28px;padding-left:20px}
.bd ol.steps{list-style:none;counter-reset:s;padding-left:0}
.bd ol.steps li{counter-increment:s;position:relative;padding-left:38px;margin-bottom:13px}
.bd ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;
 font-family:var(--mno);font-size:12.5px;font-weight:500;color:var(--btn-fg);background:var(--btn-bg);
 width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.bd ol.steps li::after{content:"";position:absolute;left:11.5px;top:29px;bottom:-14px;width:1px;
 background:var(--line)}
.bd ol.steps li:last-child::after{display:none}
.bd b{color:var(--fg);font-weight:600}
.bd a[href^="mailto"]{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.fine{font-size:13.6px;color:var(--muted);line-height:1.55}
.formula{font-family:var(--mno);font-size:14px;background:var(--bg2);border:1px solid var(--line);
 border-radius:10px;padding:12px 15px;color:var(--fg);overflow-x:auto}
.tblwrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.cal{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);
 padding:14px 17px 14px 48px;margin:0 0 20px;font-size:14.5px;line-height:1.6}
.cal b{color:var(--fg)}
.cal::before{content:"";position:absolute;left:17px;top:15px;width:19px;height:19px;
 background-color:var(--muted);
 -webkit-mask:var(--ci) center/contain no-repeat;mask:var(--ci) center/contain no-repeat;
 --ci:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 11.2v4.6'/%3E%3Ccircle cx='12' cy='8.2' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.tt{background:none;border:0;padding:0;cursor:help;font:inherit;color:var(--fg);
 border-bottom:1px dotted var(--line2);line-height:inherit;vertical-align:baseline;
 letter-spacing:inherit;text-align:left}
.tt:hover{border-bottom-color:var(--accent);border-bottom-style:solid}
@media (max-width:719px){
.bd ul.cols{columns:1}
}
/* ── tables inside the article body ────────────────────────────────────────
   The rules in header.hbs are correct, but Knowledge normalises tables when it
   saves an article: it can add a border attribute, inline cell borders,
   cellpadding and cellspacing. Those beat a plain class rule, which is why a
   pasted table comes back with gridlines and a double outline.

   So strip whatever the editor added, then re-apply the design. Scoped to
   .bd so it cannot reach the tables Knowledge renders on its own pages.       */
.bd table{border-collapse:collapse !important;border-spacing:0 !important;
 width:100%;font-size:14px;min-width:420px;background:none;border:0 !important}
.bd table[border],.bd table[cellpadding],.bd table[cellspacing]{border:0 !important}
.bd table th,.bd table td{border:0 !important;
 border-bottom:1px solid var(--line) !important;
 padding:10px 15px !important;
 text-align:left;vertical-align:top;background:none}
.bd thead th{font-family:var(--mno);font-size:11.5px;letter-spacing:.11em;
 text-transform:uppercase;color:var(--label);font-weight:400;white-space:nowrap}
.bd tbody th{font-weight:550;color:var(--fg);white-space:nowrap}
.bd tbody tr:last-child td,.bd tbody tr:last-child th{border-bottom:0 !important}
.bd tr{background:none !important}
/* the rounded frame, whether or not the wrapper survived the paste */
.bd .tblwrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);
 border-radius:var(--r);background:var(--bg2)}
.bd .tblwrap table{min-width:420px}
.bd > table{display:block;overflow-x:auto;margin:0 0 20px;border:1px solid var(--line) !important;
 border-radius:var(--r);background:var(--bg2)}
/* ── glossary popover ──────────────────────────────────────────────────────
   A chip is <abbr class="tt" data-term="..." title="definition">. The title
   is moved to a data attribute on load so the browser's own tooltip never
   fires, and this card is shown instead. Without JavaScript the title is left
   alone and the native tooltip still works, so the definition is never lost. */
.bd .tt{border-bottom:1px dotted var(--line2);cursor:help;text-decoration:none;
 color:var(--fg);transition:border-color .14s}
.bd .tt:hover,.bd .tt:focus{border-bottom-color:var(--fg);border-bottom-style:solid;
 outline:none}
/* Scrollbars. The rail hides its own: it is navigation, and the default light
   bar sat badly on the dark chrome. Tables and code keep theirs, since a wide
   table has to show that there is more to the right, but restyled so nothing
   renders in the browser default. */
.bd .tblwrap,.bd > table,.bd pre{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.bd .tblwrap::-webkit-scrollbar,.bd > table::-webkit-scrollbar, .bd pre::-webkit-scrollbar{height:8px;width:8px}
.bd .tblwrap::-webkit-scrollbar-track,.bd > table::-webkit-scrollbar-track, .bd pre::-webkit-scrollbar-track{background:transparent}
.bd .tblwrap::-webkit-scrollbar-thumb,.bd > table::-webkit-scrollbar-thumb, .bd pre::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.bd .tblwrap:hover::-webkit-scrollbar-thumb,.bd > table:hover::-webkit-scrollbar-thumb, .bd pre:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}

/* --------------------------------------------- 3. shared components */
/* ==========================================================================
   2. Category and section pages
   Reached from the home cards and from every sidebar heading, so they need
   to look finished even though they were not part of the four.
   ========================================================================== */
.category-container, .section-container{max-width: 1280px; margin: 0 auto; padding: 40px 24px 90px;}
.category-title, .section-title{font-family: var(--dsp); font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.14;}
.category-description, .section-description{color: var(--muted); font-size: 15.5px; margin-top: 10px;
  max-width: 70ch;}
.section-tree, .category-content{margin-top: 34px;}
.section-tree .section{margin-bottom: 30px; padding-bottom: 26px;
  border-bottom: 1px solid var(--line);}
.section-tree .section:last-child{border-bottom: 0;}
.section-tree h3, .section-tree .section-name{font-family: var(--dsp); font-size: 1.05rem; font-weight: 550;
  letter-spacing: -.014em; margin-bottom: 12px;}
.section-tree h3 a{color: var(--fg); text-decoration: none;}
.section-tree h3 a:hover{color: var(--accent);}
.article-list{list-style: none; padding: 0; margin: 0;}
.article-list-item{border-bottom: 1px solid rgba(255, 255, 255, .055);}
.article-list-item:last-child{border-bottom: 0;}
.article-list-item a{display: block; padding: 11px 0; color: var(--fg2);
  text-decoration: none; font-size: 14.6px;}
.article-list-item a:hover{color: var(--accent);}
.see-all-articles{display: inline-block; margin-top: 12px; font-family: var(--mno);
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--label);
  text-decoration: none;}
.see-all-articles:hover{color: var(--accent);}
/* ==========================================================================
   4. Forms
   The request form, contributions and profile pages. Zendesk renders the
   markup, so this only restyles it.
   ========================================================================== */
.form{max-width: 720px; margin: 0 auto; padding: 40px 24px 90px;}
.form-field{margin-bottom: 20px;}
.form-field label{display: block; font-size: 14px; font-weight: 550; margin-bottom: 7px;}
.form-field .form-field-hint{color: var(--muted); font-size: 13px; margin-bottom: 7px;}
.zd-field, .form-field input[type=text], .form-field input[type=email], .form-field input[type=password], .form-field textarea, .form-field select{width: 100%; padding: 11px 14px; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--line2); border-radius: 11px; font: inherit; font-size: 14.5px;
  outline: none; -webkit-appearance: none; appearance: none;}
.zd-field:focus, .form-field input:focus, .form-field textarea:focus, .form-field select:focus{border-color: #fff;}
.form-field textarea{min-height: 170px; resize: vertical;}
.button, [type=submit], .comment-submit{display: inline-flex; align-items: center; height: 42px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg);
  font: 600 15px/1 var(--bdy); letter-spacing: -.01em; cursor: pointer;
  text-decoration: none;}
.button:hover, [type=submit]:hover{filter: brightness(1.06);}
.button-secondary{background: none; color: var(--fg2); border: 1px solid var(--line2);}
.button-secondary:hover{color: var(--fg); border-color: var(--fg);}
.error-message, .notification-error{color: #f08d84; font-size: 13.4px; margin-top: 6px;}
.notification{padding: 13px 17px; border-radius: 12px; background: var(--bg2);
  border: 1px solid var(--line); color: var(--fg2); font-size: 14px; margin-bottom: 22px;}
/* ==========================================================================
   5. Error and empty states
   ========================================================================== */
.error-page{max-width: 720px; margin: 0 auto; padding: 90px 24px 120px; text-align: center;}
.error-page h1{font-family: var(--dsp); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 500;
  letter-spacing: -.03em;}
.error-page p{color: var(--muted); margin-top: 12px; font-size: 15.5px;}
.error-page .button{margin-top: 26px;}
/* ==========================================================================
   6. Tables inside Knowledge-rendered pages
   Article body tables are styled in article_page.hbs. This covers tables that
   appear in request lists and profile pages.
   ========================================================================== */
.table{width: 100%; border-collapse: collapse; font-size: 14px;}
.table th{font-family: var(--mno); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--label); font-weight: 400; text-align: left;
  padding: 11px 14px; background: var(--bg3);}
.table td{padding: 11px 14px; border-top: 1px solid var(--line); color: var(--fg2);}
/* ==========================================================================
   8. Pagination

   Knowledge emits a nav wrapping a list, and each link holds its label and its
   arrow as separate elements. Styling the link and the span alike turned one
   control into two boxes, and the reset never reached the list because the
   .pagination class sits on the nav rather than the ul.

   So: scope by container, reset any list inside it, style only the anchor,
   and neutralise whatever sits within the anchor.
   ========================================================================== */
.pagination, nav.pagination, .sr-page{--pg-gap: 8px;}
.pagination ul, .pagination ol, .sr-page ul, .sr-page ol{list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  padding: 0; margin: 0;}
.pagination li, .sr-page li{list-style: none; margin: 0 var(--pg-gap) var(--pg-gap) 0;}
.pagination li::marker, .sr-page li::marker{content: "";}
.pagination a, .sr-page a, .pagination .pagination-current, .sr-page .pagination-current{display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 38px; height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--fg2); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: border-color .15s, color .15s, background .15s;}
.pagination a:hover, .sr-page a:hover{border-color: var(--line2); color: var(--fg); background: var(--bg2);}
.pagination .pagination-current, .sr-page .pagination-current{background: var(--btn-bg); color: var(--btn-fg); border-color: transparent;
  font-weight: 600;}
/* the arrow inside a link is part of that link, not a control of its own */
.pagination a > *, .sr-page a > *{display: inline; min-width: 0; height: auto; margin: 0 0 0 6px; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; opacity: .55;}
/* an arrow-only control needs no left margin */
.pagination a > *:first-child, .sr-page a > *:first-child{margin-left: 0;}
.comment-form textarea,.comment-container textarea{width:100%;background:var(--bg2);
 border:1px solid var(--line);border-radius:12px;color:var(--fg);font:inherit;padding:12px 14px}
.comment{padding:16px 0;border-bottom:1px solid var(--line)}
.attachment-item a{color:var(--fg2);text-decoration:underline;text-underline-offset:3px;
 font-size:14px}
.attachment-meta-item,.meta-data{color:var(--muted);font-size:12.6px;margin-left:10px}