/*
 * Knowledge base guides: the components a guide is built from.
 *
 * Shared by the public help centre, the signed-in portal and the guide wizard's preview in the
 * agent workspace, so what an agent previews is exactly what a customer reads. Modelled on the
 * product guides Triniteq sends venues as PDFs: orange step badges, numbered orange steps,
 * captioned screenshots, dark-headed tables and tinted callouts.
 *
 * The palette below is the document's own: on the portal and in the wizard preview a guide is
 * always on white, because that is how it prints and how the customer is reading it beside the
 * screen it describes.
 *
 * The public help centre is the exception, and the block after the tokens is where it is handled.
 * That site carries a theme toggle, and a reader who chose dark got a white document shouting in
 * the middle of a dark page, with the body copy and step headings left dark-on-dark. There the
 * --g- tokens are answered by the public site's own --ps- ones, which are already themed; the
 * light values are identical, so nothing about the light rendering changes. Everything after that
 * is a colour that could not be a token -- a tint, a band, a shadow.
 */
.kb-guide {
  --g-ink: #1d2128;
  --g-text: #3a414c;
  --g-muted: #697180;
  --g-line: #e4e8ef;
  --g-paper: #ffffff;
  --g-wash: #f5f7fb;
  --g-orange: #ff751a;
  --g-orange-deep: #e5590c;
  --g-gradient: linear-gradient(120deg, #ff8a1c 0%, #ff6a1f 45%, #f9483a 100%);
  --g-head: #2b2f36;
  /* The mixed colours: a wash or a hatching rather than a named ink. Only these are restated for
     the public site's dark theme, which is why they are tokens and not literals below. */
  --g-check-tint: #fff1e6;
  --g-check-ring: #ffb37d;
  --g-row-even: #fafbfd;
  --g-missing-line: #ffc49b;
  --g-missing-wash-a: #fff8f2;
  --g-missing-wash-b: #fff3e8;
  --g-tip-line: #bfe6d3; --g-tip-wash: #ecf8f2; --g-tip-ink: #127052;
  --g-important-line: #f8d2ae; --g-important-wash: #fff5ec; --g-important-ink: #b4510c;
  --g-warning-line: #f4c3c3; --g-warning-wash: #fdeeee; --g-warning-ink: #b42326;
  --g-note-line: #cdd8f3; --g-note-wash: #f0f4fd; --g-note-ink: #2d4ea3;
  color-scheme: light;
  color: var(--g-text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.kb-guide * { box-sizing: border-box; }
.kb-guide p { margin: 0 0 14px; }
.kb-guide strong { color: var(--g-ink); font-weight: 700; }
.kb-guide a { color: var(--g-orange-deep); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/*
 * The public help centre, where the reader picks the theme.
 *
 * Scoped to .ps-page: the portal and the wizard preview deliberately stay on white. Inside
 * `screen` because paper has no dark mode -- without that, printing from a dark page would put
 * pale grey text on white.
 *
 * The named colours are answered by the public site's own tokens, which public-site.css has
 * already themed, so no rule in this file is written twice. The mixed ones -- a tint, a hatching,
 * a callout wash -- cannot be anything but literal, so they become tokens here with their light
 * value as the default, and the two blocks below restate only those.
 */
@media screen {
  .ps-page .kb-guide {
    --g-ink: var(--ps-ink);
    --g-text: var(--ps-text);
    --g-muted: var(--ps-muted);
    --g-line: var(--ps-line);
    --g-paper: var(--ps-paper);
    --g-wash: var(--ps-wash);
    --g-orange-deep: var(--ps-orange-deep);
    /* The band behind a table's header row is the band the rest of the site uses. */
    --g-head: var(--ps-dark-band);
    --g-check-tint: var(--ps-orange-wash);
    color-scheme: inherit;
  }

  /* Shadows are drawn for white paper; on a dark page they have to be shadows, not haze. */
  .ps-page .kb-guide-toc { box-shadow: var(--ps-shadow-sm); }
  .ps-page .kb-figure img { box-shadow: var(--ps-shadow-md); }
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ps-page .kb-guide { 
    --g-check-ring: #94571f;
    --g-row-even: #20242b;
    --g-missing-line: #7a4420;
    --g-missing-wash-a: #2a1d14;
    --g-missing-wash-b: #241a12;
    --g-tip-line: #23523f; --g-tip-wash: #15241f; --g-tip-ink: #57d3a6;
    --g-important-line: #5d3b1b; --g-important-wash: #26190e; --g-important-ink: #ffa963;
    --g-warning-line: #612b2c; --g-warning-wash: #271516; --g-warning-ink: #ff9191;
    --g-note-line: #2f3d68; --g-note-wash: #161d2e; --g-note-ink: #94adf2;
  }
}
@media screen {
  :root[data-theme="dark"] .ps-page .kb-guide {
    --g-check-ring: #94571f;
    --g-row-even: #20242b;
    --g-missing-line: #7a4420;
    --g-missing-wash-a: #2a1d14;
    --g-missing-wash-b: #241a12;
    --g-tip-line: #23523f; --g-tip-wash: #15241f; --g-tip-ink: #57d3a6;
    --g-important-line: #5d3b1b; --g-important-wash: #26190e; --g-important-ink: #ffa963;
    --g-warning-line: #612b2c; --g-warning-wash: #271516; --g-warning-ink: #ff9191;
    --g-note-line: #2f3d68; --g-note-wash: #161d2e; --g-note-ink: #94adf2;
  }
}

/* Cover. On the web article page the page's own header plays this part, so it is hidden there;
   in the wizard preview and in print it is the guide's front page. */
.kb-guide-cover {
  position: relative;
  overflow: hidden;
  margin: 0 0 28px;
  padding: 44px 40px 46px;
  border-radius: 18px;
  color: #fff;
  background: var(--g-gradient);
}
.kb-guide-cover::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -170px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.kb-guide-eyebrow {
  position: relative;
  margin: 0 0 10px !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .92;
}
.kb-guide-cover-title {
  position: relative;
  margin: 0 !important;
  max-width: 640px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.kb-guide-lead { margin: 0 0 24px !important; color: var(--g-text); font-size: 19px; line-height: 1.6; }

/* "In this guide" */
.kb-guide-toc {
  margin: 0 0 40px;
  padding: 22px 26px;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-paper);
  box-shadow: 0 10px 30px rgba(30, 38, 52, .06);
}
.kb-guide-toc-label {
  margin: 0 0 10px !important;
  color: var(--g-orange-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* The <ol> is the shape articles saved before the marks were written into the list. */
.kb-guide-toc ol,
.kb-guide-toc ul {
  margin: 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 36px;
  color: var(--g-ink);
  font-size: 14.5px;
  font-weight: 600;
}
.kb-guide-toc ul { padding-left: 0; list-style: none; }
.kb-guide-toc li { margin: 0 0 6px; break-inside: avoid; }
.kb-guide-toc li::marker { color: var(--g-muted); font-weight: 600; }
/* The mark sits in a column of its own so the names line up, whether the mark is a number or a
   word. kb.js wraps the row in an anchor, so the anchor lays the row out too. */
.kb-guide-toc ul li,
.kb-guide-toc ul li > a { display: flex; gap: 8px; align-items: baseline; }
/* Wide enough for the widest mark, which is the word Start, so the names line up under each
   other whether their row is numbered or not. */
.kb-guide-toc-mark { flex: none; min-width: 38px; color: var(--g-muted); font-weight: 700; }
.kb-guide-toc a { color: inherit; font-weight: inherit; text-decoration: none; }
.kb-guide-toc a:hover { color: var(--g-orange-deep); text-decoration: underline; }
.kb-guide-toc a:hover .kb-guide-toc-mark { color: inherit; }

/* A section: one step, the checklist, or the questions. */
.kb-guide-section { margin: 0 0 48px; scroll-margin-top: 96px; }
.kb-step-badge {
  display: inline-block;
  margin: 0 0 10px !important;
  padding: 5px 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--g-gradient);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}
.kb-guide .kb-step-title {
  margin: 0 0 14px;
  color: var(--g-ink);
  font-size: clamp(23px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
}

/* Numbered instructions: orange discs, like the PDF. */
.kb-steps { margin: 6px 0 22px; padding: 0; list-style: none; counter-reset: kb-step; }
.kb-steps > li {
  position: relative;
  margin: 0 0 12px;
  padding: 2px 0 0 44px;
  min-height: 30px;
  counter-increment: kb-step;
}
.kb-steps > li::before {
  content: counter(kb-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--g-orange);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

/* Bullets under a paragraph. Plain dots on purpose: the ticks belong to Before you start, where
   they mean "have this ready", and the discs belong to steps, where they mean "do this in order".
   A list inside an information article -- the changes in a release, the codes a setting takes --
   means neither, so it says neither. */
.kb-bullets { margin: 2px 0 18px; padding: 0; list-style: none; }
.kb-bullets > li {
  position: relative;
  margin: 0 0 8px;
  padding: 0 0 0 20px;
}
.kb-bullets > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-orange);
}
.kb-bullets > li:last-child { margin-bottom: 0; }

/* Before you start */
.kb-checklist { margin: 4px 0 20px; padding: 0; list-style: none; }
.kb-checklist > li {
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 0 32px;
}
.kb-checklist > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--g-check-tint);
  box-shadow: inset 0 0 0 1.5px var(--g-check-ring);
}
.kb-checklist > li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 6px;
  height: 10px;
  border: solid var(--g-orange-deep);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Screenshots */
.kb-figure { margin: 22px 0 26px; text-align: center; }
.kb-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--g-line);
  border-radius: 12px;
  background: var(--g-paper);
  box-shadow: 0 14px 34px rgba(30, 38, 52, .10);
}
.kb-figure figcaption { margin-top: 10px; color: var(--g-muted); font-size: 13.5px; line-height: 1.5; }
.kb-figure-missing {
  min-height: 150px;
  padding: 24px;
  border: 2px dashed var(--g-missing-line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--g-orange-deep);
  background: repeating-linear-gradient(135deg, var(--g-missing-wash-a) 0 12px, var(--g-missing-wash-b) 12px 24px);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Tables: dark header band, as in the PDF. */
.kb-guide .kb-table-title { margin: 26px 0 10px; color: var(--g-ink); font-size: 18px; font-weight: 800; }
.kb-table-wrap {
  margin: 0 0 24px;
  overflow-x: auto;
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-paper);
}
.kb-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.kb-table th {
  padding: 12px 16px;
  color: #fff;
  background: var(--g-head);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.kb-table td { padding: 12px 16px; border-top: 1px solid var(--g-line); vertical-align: top; }
.kb-table td:first-child { color: var(--g-ink); font-weight: 700; }
.kb-table tbody tr:nth-child(even) td { background: var(--g-row-even); }

/* Callouts */
.kb-callout {
  margin: 22px 0 26px;
  padding: 16px 20px;
  border: 1px solid;
  border-radius: 14px;
}
.kb-callout p { margin: 0 0 8px; }
.kb-callout p:last-child { margin-bottom: 0; }
.kb-callout .kb-callout-title { margin: 0 0 6px; font-size: 14px; font-weight: 800; letter-spacing: .01em; }
.kb-callout-tip, .kb-callout-help { border-color: var(--g-tip-line); background: var(--g-tip-wash); }
.kb-callout-tip .kb-callout-title, .kb-callout-help .kb-callout-title { color: var(--g-tip-ink); }
.kb-callout-important { border-color: var(--g-important-line); background: var(--g-important-wash); }
.kb-callout-important .kb-callout-title { color: var(--g-important-ink); }
.kb-callout-warning { border-color: var(--g-warning-line); background: var(--g-warning-wash); }
.kb-callout-warning .kb-callout-title { color: var(--g-warning-ink); }
.kb-callout-note { border-color: var(--g-note-line); background: var(--g-note-wash); }
.kb-callout-note .kb-callout-title { color: var(--g-note-ink); }

/* Questions and troubleshooting */
.kb-faq { display: grid; gap: 4px; }
.kb-faq-item { padding: 14px 0 12px; border-bottom: 1px solid var(--g-line); }
.kb-faq-item:last-child { border-bottom: 0; }
.kb-guide .kb-faq-question { margin: 0 0 6px; color: var(--g-ink); font-size: 16.5px; font-weight: 750; line-height: 1.4; }
.kb-faq-item p { margin-bottom: 6px; }

@media (max-width: 640px) {
  .kb-guide { font-size: 15.5px; }
  .kb-guide-cover { padding: 30px 24px 32px; border-radius: 14px; }
  .kb-guide-toc { padding: 18px 20px; }
  .kb-guide-toc ol,
  .kb-guide-toc ul { columns: 1; }
  .kb-guide-lead { font-size: 17px; }
  .kb-table { font-size: 13.5px; }
  .kb-table th, .kb-table td { padding: 10px 12px; }
}

/*
 * Print, and "Save as PDF". Laid out like the PDF guides: the cover fills the first page, and
 * each step starts a new page with its badge at the top.
 */
@media print {
  @page { size: A4; margin: 16mm 15mm 18mm; }
  .kb-guide { font-size: 11pt; line-height: 1.55; }
  .kb-guide, .kb-guide * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kb-guide-cover {
    display: block !important;
    min-height: 92mm;
    margin: -2mm 0 10mm;
    padding: 26mm 14mm 16mm;
    border-radius: 0 0 6mm 6mm;
  }
  .kb-guide-cover-title { font-size: 30pt; }
  .kb-guide-toc { box-shadow: none; break-inside: avoid; }
  .kb-guide-section { break-before: page; margin: 0; }
  .kb-figure, .kb-callout, .kb-table-wrap, .kb-faq-item, .kb-steps > li { break-inside: avoid; }
  .kb-figure img { box-shadow: none; max-height: 120mm; }
  .kb-guide a { color: var(--g-orange-deep); text-decoration: none; }
}

/*
 * Video in an article.
 *
 * Deliberately outside the .kb-guide scope: an article imported from Freshdesk renders as plain
 * prose in the help centre, the portal and the agent workspace, and the video has to look right
 * in all three rather than only inside a wizard-written guide.
 *
 * What is in the markup is a poster image wrapped in a link to the video -- never a frame. The
 * play button is drawn here rather than baked into the picture, so it stays sharp and keeps its
 * colour whatever thumbnail YouTube published. kb.js swaps the whole thing for the real player
 * when it is clicked; with no JavaScript the link simply opens the video.
 */
.kb-video {
  --v-orange: #ff751a;
  margin: 24px 0 28px;
  max-width: 760px;
}

.kb-video-play {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #1d2128;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(20, 24, 31, 0.16);
}

.kb-video-poster {
  width: 100%;
  height: 100%;
  /* hqdefault is 4:3 with black bars, maxresdefault is 16:9. Cropping to fill means the two
     sizes look the same in the page instead of one of them sitting in a letterbox. */
  object-fit: cover;
  display: block;
  border: 0;
  box-shadow: none;
}

/* No poster could be stored, so the link carries its own words rather than being an empty box. */
.kb-video-label {
  display: flex;
  /* Below the play button rather than behind it, which is where centring put it. */
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding: 0 24px 26px;
  color: #ffffff;
  font-weight: 650;
  text-align: center;
}

.kb-video-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--v-orange);
  box-shadow: 0 6px 20px rgba(20, 24, 31, 0.4);
  transition: transform 140ms ease, background 140ms ease;
}

.kb-video-play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  /* The triangle is nudged right of centre: an optical centre, not a geometric one. */
  transform: translate(-40%, -50%);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 22px solid #ffffff;
}

.kb-video-play:hover::before,
.kb-video-play:focus-visible::before { transform: translate(-50%, -50%) scale(1.07); background: #e5590c; }
.kb-video-play:focus-visible { outline: 3px solid var(--v-orange); outline-offset: 3px; }

/* The real player, once a reader has pressed play. */
.kb-video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  background: #1d2128;
}

@media (max-width: 640px) {
  .kb-video-play::before { width: 60px; height: 60px; }
  .kb-video-play::after { border-top-width: 11px; border-bottom-width: 11px; border-left-width: 18px; }
}

/* On paper a play button is a lie, so the poster prints as a plain picture with its address. */
@media print {
  .kb-video-play { box-shadow: none; }
  .kb-video-play::before { display: none; }
  .kb-video-play::after {
    content: " (" attr(href) ")";
    display: block;
    position: static;
    transform: none;
    border: 0;
    width: auto;
    height: auto;
    color: #697180;
    font-size: 10pt;
    word-break: break-all;
  }
}