/* ---------------------------------------------------------------------------
   Frooition Help Centre - public front end.

   Standalone: these pages do not load the app chrome, so there is no theme to
   fight with and no need to scope defensively. Class names are still kb*
   prefixed because article bodies carry author HTML from Scribe and similar,
   which brings its own classes along.
   --------------------------------------------------------------------------- */

:root {
  --navy:      #031120;
  --red:       #ed1c24;
  --red-hi:    #ff2d35;
  --ink:       #031120;
  --ink-84:    rgba(3, 17, 32, .84);
  --ink-68:    rgba(3, 17, 32, .68);
  --ink-55:    rgba(3, 17, 32, .55);
  --line:      rgba(3, 17, 32, .10);
  --line-soft: rgba(3, 17, 32, .07);
  --wash:      #f4f4f5;
  --green:     #0f8a4a;
}

* { box-sizing: border-box; }

body.kbpub {
  margin: 0;
  background: var(--wash);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Links inherit their colour from whatever component they sit in, and this
   rule is deliberately (0,0,1). The stylesheet only loads on help centre
   pages so it needs no body qualifier - and with one it sat at (0,1,2) and
   silently beat every single-class component rule below, which turned the
   Contact support button red-on-red and the popular chips black-on-navy.
   Article prose gets the red treatment explicitly, further down. */
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }   /* same reason: .kbart-body h1 needs to win */
.kb-spacer { flex: 1; }
.kbcap { font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--ink-55); }

/* --- header -------------------------------------------------------------- */
.kbh { background: var(--navy); color: #fff; }
.kbh-bar {
  max-width: 1180px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.kbh-brand { display: flex; align-items: flex-end; color: #fff; }
.kbh-brand:hover { color: #fff; }
.kbh-brand b { font: 700 19px/1 Archivo, sans-serif; letter-spacing: -.03em; }
.kbh-brand i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin: 0 8px 2px 3px; }
.kbh-brand em {
  font-style: normal; font: 600 11px/1 'JetBrains Mono', monospace;
  letter-spacing: .13em; color: rgba(255,255,255,.72); padding-bottom: 2px;
}
.kbh-link { font: 500 13px/1 Archivo, sans-serif; color: rgba(255,255,255,.72); }
.kbh-link:hover { color: #fff; }
.kbh-btn {
  font: 600 12.5px/1 Archivo, sans-serif; border-radius: 8px; padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff;
}
.kbh-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.kbh-btn.cta { background: var(--red); border-color: var(--red); }
.kbh-btn.cta:hover { background: var(--red-hi); }

/* --- hero + search ------------------------------------------------------- */
.kbhero { background: var(--navy); padding: 34px 20px 46px; text-align: center; position: relative; }
.kbhero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kbhero-glow::after {
  content: ''; position: absolute; left: 50%; top: -140px;
  width: 620px; height: 320px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(237,28,36,.22), transparent 70%);
}
.kbhero h1 {
  position: relative; font: 700 32px/1.15 Archivo, sans-serif;
  letter-spacing: -.03em; color: #fff; text-wrap: balance;
}
.kbhero p {
  position: relative; margin: 9px auto 22px; max-width: 52ch;
  font: 400 14.5px/1.55 Archivo, sans-serif; color: rgba(255,255,255,.72); text-wrap: pretty;
}
@media (max-width: 640px) { .kbhero h1 { font-size: 25px; } }

.kbsearch { position: relative; max-width: 640px; margin: 0 auto; }
.kbsearch svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity: .65; }
.kbsearch input {
  width: 100%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); border-radius: 11px; color: #fff;
  font: 400 15px/1 Archivo, sans-serif; padding: 16px 16px 16px 46px;
  -webkit-appearance: none; appearance: none;
}
.kbsearch input::placeholder { color: rgba(255,255,255,.55); }
.kbsearch input:focus { outline: none; border-color: var(--red); background: rgba(255,255,255,.13); }

.kbsug {
  position: absolute; left: 0; right: 0; top: calc(100% + 7px);
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 14px 34px rgba(3,17,32,.22); overflow: hidden; text-align: left; z-index: 20;
}
.kbsug a {
  display: flex; align-items: center; gap: 11px; padding: 12px 15px;
  border-bottom: 1px solid var(--line-soft); color: var(--ink);
  font: 500 13.5px/1.3 Archivo, sans-serif;
}
.kbsug a:last-child { border-bottom: none; }
.kbsug a:hover, .kbsug a.kbon { background: #fafafa; color: var(--red); }
.kbsug a span {
  margin-left: auto; font: 500 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .06em; color: var(--ink-55); white-space: nowrap;
}

.kbchips { position: relative; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.kbchips b { font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .09em; color: rgba(255,255,255,.55); align-self: center; }
.kbchips a {
  font: 500 12px/1 Archivo, sans-serif; border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85); border-radius: 999px; padding: 7px 12px;
}
.kbchips a:hover { background: rgba(255,255,255,.12); color: #fff; }

/* --- page ---------------------------------------------------------------- */
.kbpage { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }
.kbsec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; flex-wrap: wrap; }
.kbsec-head h2 { font: 600 17px/1.2 Archivo, sans-serif; }

.kbcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 500 12px/1 Archivo, sans-serif; color: var(--ink-68); margin-bottom: 14px;
}
.kbcrumb a { color: var(--ink-68); }
.kbcrumb a:hover { color: var(--red); }
.kbcrumb span { color: rgba(3,17,32,.3); }

/* --- category grid ------------------------------------------------------- */
.kbgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.kbcat {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; gap: 9px; color: var(--ink);
}
.kbcat:hover { border-color: var(--navy); box-shadow: 0 8px 22px rgba(3,17,32,.08); color: var(--ink); }
.kbcat-i {
  width: 34px; height: 34px; border-radius: 9px; background: #f0f0f1;
  display: flex; align-items: center; justify-content: center;
}
.kbcat:hover .kbcat-i { background: rgba(237,28,36,.09); color: var(--red); }
.kbcat h3 { font: 600 15px/1.25 Archivo, sans-serif; }
.kbcat p { margin: 0; font: 400 12.5px/1.5 Archivo, sans-serif; color: var(--ink-68); text-wrap: pretty; }
.kbcat-n {
  margin-top: auto; padding-top: 8px;
  font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .07em; color: var(--ink-55);
}

/* --- article rows -------------------------------------------------------- */
.kbcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.kbrow {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft); color: var(--ink);
}
.kbrow:last-child { border-bottom: none; }
.kbrow:hover { background: #fafafa; color: var(--ink); }
.kbrow-i {
  flex: none; width: 30px; height: 30px; border-radius: 8px; background: #f0f0f1;
  display: flex; align-items: center; justify-content: center;
}
.kbrow:hover .kbrow-i { background: rgba(237,28,36,.09); color: var(--red); }
.kbrow-t { min-width: 0; flex: 1; }
.kbrow-t b { display: block; font: 600 13.5px/1.3 Archivo, sans-serif; }
.kbrow-t span {
  display: block; font: 400 12px/1.4 Archivo, sans-serif; color: var(--ink-68);
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kbrow-m { flex: none; font: 500 10.5px/1 'JetBrains Mono', monospace; color: var(--ink-55); white-space: nowrap; }
.kbrow-a { flex: none; color: rgba(3,17,32,.3); display: flex; }
.kbrow:hover .kbrow-a { color: var(--red); }
@media (max-width: 560px) { .kbrow-m { display: none; } }

.kbempty { padding: 40px 20px; text-align: center; }
.kbempty b { display: block; font: 600 15px/1.3 Archivo, sans-serif; margin-bottom: 6px; }
.kbempty > span { display: block; max-width: 46ch; margin: 0 auto 16px; font: 400 13px/1.55 Archivo, sans-serif; color: var(--ink-68); }
.kbempty-btns { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

/* --- article ------------------------------------------------------------- */
.kbtwo { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .kbtwo { grid-template-columns: minmax(0, 1fr); } .kbtoc { display: none; } }

.kbtoc {
  position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px;
  /* A step-by-step guide can run to 20+ entries, which is taller than most
     screens. Scroll the nav itself rather than letting it run off the page. */
  max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px;
}
.kbtoc::-webkit-scrollbar { width: 6px; }
.kbtoc::-webkit-scrollbar-thumb { background: rgba(3,17,32,.18); border-radius: 3px; }
.kbtoc .kbcap { padding: 0 10px 7px; }
.kbtoc a {
  font: 500 12.5px/1.4 Archivo, sans-serif; color: var(--ink-68);
  padding: 7px 10px; border-radius: 7px; border-left: 2px solid transparent;
}
.kbtoc a:hover { background: #fff; color: var(--ink); }
.kbtoc a.kbon { border-left-color: var(--red); color: var(--ink); font-weight: 600; background: #fff; }
.kbtoc a.kbsub { padding-left: 20px; font-size: 12px; }

/* Numbered steps: the number sits in its own column so the labels line up. */
.kbtoc a.kbstep { display: flex; gap: 8px; align-items: baseline; padding-top: 5px; padding-bottom: 5px; }
.kbtoc a.kbstep i {
  flex: none; font-style: normal; min-width: 15px;
  font: 600 10px/1.5 'JetBrains Mono', monospace; color: var(--ink-55);
}
.kbtoc a.kbstep span {
  min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
}
.kbtoc a.kbstep.kbon i { color: var(--red); }

.kbart { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px 30px 26px; }
@media (max-width: 640px) { .kbart { padding: 20px; } }
.kbart h1 { font: 700 27px/1.18 Archivo, sans-serif; letter-spacing: -.025em; text-wrap: pretty; }
.kbart-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.kbart-sub { font: 400 12px/1.5 Archivo, sans-serif; color: var(--ink-68); }
.kbtag {
  font: 600 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .07em;
  padding: 5px 7px; border-radius: 5px; background: #f0f0f1; color: var(--ink-68);
}
.kbtag.red { background: rgba(237,28,36,.08); color: var(--red); }

/* --- author body --------------------------------------------------------- */
.kbart-body { padding-top: 6px; }
.kbart-body h2 { font: 600 18px/1.3 Archivo, sans-serif; margin: 26px 0 10px; scroll-margin-top: 20px; }
.kbart-body h3 { font: 600 15.5px/1.3 Archivo, sans-serif; margin: 22px 0 8px; }
.kbart-body p { margin: 0 0 13px; font: 400 14.5px/1.68 Archivo, sans-serif; color: var(--ink-84); max-width: 70ch; text-wrap: pretty; }
.kbart-body ul, .kbart-body ol { margin: 0 0 14px; padding-left: 20px; }
.kbart-body li { font: 400 14.5px/1.68 Archivo, sans-serif; color: var(--ink-84); margin-bottom: 5px; max-width: 68ch; }
/* Screenshots, including those pasted in from Scribe with their own width. */
.kbart-body img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; margin: 6px 0 18px; }
.kbart-body table { border-collapse: collapse; width: 100%; margin: 0 0 18px; display: block; overflow-x: auto; }
.kbart-body th, .kbart-body td { border: 1px solid var(--line); padding: 8px 10px; font: 400 13.5px/1.5 Archivo, sans-serif; text-align: left; }
.kbart-body th { background: var(--wash); font-weight: 600; }
.kbart-body h1 { font: 700 22px/1.2 Archivo, sans-serif; margin: 0 0 12px; }
.kbart-body a, .kb-article a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.kbart-body a:hover, .kb-article a:hover { color: #c2151c; }

/* Frooition blocks, mirrored from the editor's content_style. */
.kb-article .froo-callout {
  border-radius: 10px; padding: 13px 15px; margin: 0 0 14px; border: 1px solid;
  font: 400 13.5px/1.55 Archivo, sans-serif;
}
.kb-article .froo-tip  { background: rgba(15,138,74,.05); border-color: rgba(15,138,74,.28); }
.kb-article .froo-warn { background: rgba(237,28,36,.04); border-color: rgba(237,28,36,.28); }
.kb-article .froo-note { background: #f7f7f8; border-color: var(--line); }
.kb-article .froo-code, .kbart-body pre {
  background: var(--navy); color: #e8eef5; border-radius: 10px; padding: 14px;
  font: 500 12.5px/1.65 'JetBrains Mono', ui-monospace, monospace;
  white-space: pre-wrap; overflow-x: auto; margin: 0 0 14px;
}

/* --- helpful ------------------------------------------------------------- */
.kbhelp {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
}
.kbhelp b { font: 600 13.5px/1 Archivo, sans-serif; }
.kbvote {
  font: 600 12.5px/1 Archivo, sans-serif; border: 1px solid rgba(3,17,32,.16);
  background: #fff; border-radius: 8px; padding: 9px 14px; cursor: pointer;
  color: var(--ink); display: inline-flex; align-items: center; gap: 7px; font-family: Archivo, sans-serif;
}
.kbvote:hover { border-color: var(--navy); }
.kbvote.kbon { background: var(--navy); color: #fff; border-color: var(--navy); }
.kbvote[disabled] { opacity: .55; cursor: default; }

.kbrel { margin-top: 24px; }
.kbrel .kbcap { display: block; margin-bottom: 9px; }

/* --- footer -------------------------------------------------------------- */
.kbf { max-width: 1180px; margin: 0 auto; padding: 0 20px 40px; }
.kbf-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.kbf-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.kbf-box.dark { background: var(--navy); border-color: var(--navy); }
.kbf-box h3 { font: 600 15.5px/1.25 Archivo, sans-serif; }
.kbf-box.dark h3 { color: #fff; }
.kbf-box p { margin: 0; font: 400 13px/1.55 Archivo, sans-serif; color: var(--ink-68); text-wrap: pretty; }
.kbf-box.dark p { color: rgba(255,255,255,.66); }
.kbf-btn {
  align-self: flex-start; margin-top: 4px; font: 600 12.5px/1 Archivo, sans-serif;
  border-radius: 8px; padding: 10px 14px; border: 1px solid rgba(3,17,32,.16);
  background: #fff; color: var(--ink);
}
.kbf-btn:hover { border-color: var(--navy); color: var(--ink); }
.kbf-btn.cta { background: var(--red); border-color: var(--red); color: #fff; }
.kbf-btn.cta:hover { background: var(--red-hi); color: #fff; }
.kbf-legal { margin: 22px 0 0; font: 400 11.5px/1 Archivo, sans-serif; color: var(--ink-55); text-align: center; }


/* --- staff preview ------------------------------------------------------- */
.kbprev {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(214,138,10,.12); border: 1px solid rgba(214,138,10,.35);
  border-radius: 10px; padding: 12px 15px; margin-bottom: 14px;
}
.kbprev b { font: 600 13px/1.3 Archivo, sans-serif; color: #7a4f03; }
.kbprev span { font: 400 12.5px/1.45 Archivo, sans-serif; color: var(--ink-68); }
.kbprev a { margin-left: auto; font: 600 12px/1 Archivo, sans-serif; color: #7a4f03; text-decoration: underline; }

/* --- related page -------------------------------------------------------- */
.kbgoto {
  display: flex; align-items: center; gap: 12px;
  background: var(--navy); color: #fff; border-radius: 10px;
  padding: 13px 16px; margin: 18px 0 4px;
}
.kbgoto:hover { background: #0a1f38; color: #fff; }
.kbgoto-t { min-width: 0; flex: 1; }
.kbgoto-t b { display: block; font: 600 13.5px/1.3 Archivo, sans-serif; }
.kbgoto-t span {
  display: block; margin-top: 3px;
  font: 500 11.5px/1.3 'JetBrains Mono', monospace; color: rgba(255,255,255,.62);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kbgoto svg { flex: none; color: rgba(255,255,255,.7); }