/* Pyxis Learning Center. Scoped under .pxl; colours and type follow the pyxis
   theme's --sk-* tokens, with fallbacks so the pages still read correctly if
   the theme changes. The theme header is position: fixed, hence the top
   padding on the first block of every view. */
.pxl {
  --pxl-citron: var(--sk-color-one, #b4b239);
  --pxl-citron-dark: var(--sk-color-one-dark, #97951f);
  --pxl-navy: var(--sk-color-three, #000637);
  --pxl-teal: var(--sk-color-two, #072824);
  --pxl-surface: var(--sk-color-six, #f7f7f7);
  --pxl-line: rgba(7, 40, 36, 0.14);
  --pxl-muted: #4f625f;
  --pxl-radius: 20px;
  --pxl-header: 150px;
  color: var(--pxl-teal);
  font-family: var(--sk-font-primary, Poppins, system-ui, sans-serif);
  padding-bottom: 96px;
}
.pxl *, .pxl *::before, .pxl *::after { box-sizing: border-box; }
.pxl a { color: inherit; }

.pxl-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 15px;
  color: var(--pxl-teal);
  text-decoration: underline;
  text-decoration-color: var(--pxl-citron);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.pxl-link-arrow::after { content: "→"; color: var(--pxl-citron-dark); transition: transform 0.15s; }
.pxl-link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Hub ---------- */
.pxl-hero {
  padding: calc(var(--pxl-header) + 24px) 0 56px;
  background:
    radial-gradient(1200px 380px at 85% 0%, rgba(180, 178, 57, 0.16), transparent 60%),
    linear-gradient(180deg, #fff, var(--pxl-surface));
  border-bottom: 1px solid var(--pxl-line);
}
.pxl-hero__title {
  max-width: 900px;
  font-size: var(--sk-text--h2, clamp(30px, 4vw, 50px));
  line-height: 1.15;
  font-weight: 300;
  margin: 0 0 20px;
}
.pxl-hero__lead { max-width: 720px; font-size: 18px; line-height: 1.6; margin: 0 0 32px; color: var(--pxl-muted); }

.pxl-search { max-width: 640px; position: relative; }
.pxl-search input {
  width: 100%;
  min-height: 56px;
  padding: 14px 24px 14px 52px;
  border: 1px solid var(--pxl-line);
  border-radius: 100px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23072824' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='6.5'/%3E%3Cpath d='m14 14 4.5 4.5'/%3E%3C/svg%3E") 22px 50% no-repeat;
  font: 400 16px/1.4 var(--sk-font-primary, Poppins, sans-serif);
  color: var(--pxl-teal);
  box-shadow: 0 6px 24px rgba(0, 6, 55, 0.06);
  -webkit-appearance: none;
  appearance: none;
}
.pxl-search input:focus { outline: 2px solid var(--pxl-citron); outline-offset: 2px; }

.pxl-results { padding-top: 40px; }
.pxl-results__status { font-weight: 500; margin: 0 0 16px; }

.pxl-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding-top: 56px;
  padding-bottom: 24px;
}
.pxl-topics[hidden], .pxl-results[hidden] { display: none; }
.pxl-topic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: var(--pxl-radius);
  background: var(--pxl-surface);
}
.pxl-topic--glossary { background: var(--pxl-navy); color: #fff; }
.pxl-topic--glossary .pxl-topic__title a,
.pxl-topic--glossary .pxl-topic__desc,
.pxl-topic--glossary .pxl-link-arrow { color: #fff; }
.pxl-topic__title { font-size: 22px; line-height: 1.3; font-weight: 500; margin: 0; }
.pxl-topic__title a { text-decoration: none; }
.pxl-topic__title a:hover { color: var(--pxl-citron-dark); }
.pxl-topic__desc { margin: 0; color: var(--pxl-muted); font-size: 15px; line-height: 1.6; }
.pxl-topic__list { list-style: none; margin: 4px 0 8px; padding: 0; flex: 1; }
.pxl-topic__list li { border-top: 1px solid var(--pxl-line); }
.pxl-topic__list a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
}
.pxl-topic__list a:hover { color: var(--pxl-citron-dark); }
.pxl-topic .pxl-link-arrow { margin-top: auto; }

/* ---------- Topic / article / glossary layout ---------- */
.pxl-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 56px;
  padding-top: calc(var(--pxl-header) + 16px);
}
.pxl-main { min-width: 0; max-width: 820px; }

.pxl-sidebar {
  position: sticky;
  top: 120px;
  align-self: start;
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: 24px;
  border-radius: var(--pxl-radius);
  background: var(--pxl-surface);
  font-size: 14px;
}
.pxl-sidebar__title { margin: 0 0 12px; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.pxl-sidebar__title a { text-decoration: none; color: var(--pxl-citron-dark); }
.pxl-sidebar ul { list-style: none; margin: 0; padding: 0; }
.pxl-sidebar__topics > li { border-top: 1px solid var(--pxl-line); }
.pxl-sidebar__topic { display: block; padding: 10px 0; font-weight: 500; text-decoration: none; }
.pxl-sidebar li ul { padding: 0 0 10px 12px; border-left: 2px solid var(--pxl-line); margin-left: 2px; }
.pxl-sidebar li ul a { display: block; padding: 5px 0 5px 4px; text-decoration: none; color: var(--pxl-muted); line-height: 1.4; }
.pxl-sidebar a:hover { color: var(--pxl-citron-dark); }
.pxl-sidebar a[aria-current="page"] { color: var(--pxl-teal); font-weight: 600; }
.pxl-sidebar li ul a[aria-current="page"] { box-shadow: -14px 0 0 -12px var(--pxl-citron); }

.pxl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; font-size: 13px; color: var(--pxl-muted); }
.pxl-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--pxl-line); }
.pxl-crumbs a { text-decoration: none; }
.pxl-crumbs a:hover { color: var(--pxl-citron-dark); }

.pxl-title {
  font-size: var(--sk-text--h3, clamp(26px, 3vw, 40px));
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 20px;
}
.pxl-lead { font-size: 17px; line-height: 1.65; color: var(--pxl-muted); margin: 0 0 32px; }

.pxl-objectives {
  margin: 8px 0 36px;
  padding: 24px 28px;
  border-radius: var(--pxl-radius);
  border: 1px solid rgba(180, 178, 57, 0.45);
  background: rgba(180, 178, 57, 0.08);
}
.pxl-objectives__title { margin: 0 0 4px; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pxl-citron-dark); }
.pxl-objectives p { margin: 0 0 8px; }
.pxl-objectives ul { margin: 0; padding-left: 20px; }
.pxl-objectives li { margin: 4px 0; }

.pxl-body { font-size: 17px; line-height: 1.75; }
.pxl-body h2 { font-size: 26px; line-height: 1.3; font-weight: 500; margin: 44px 0 14px; }
.pxl-body h3 { font-size: 20px; line-height: 1.35; font-weight: 500; margin: 32px 0 10px; }
.pxl-body p, .pxl-body ul, .pxl-body ol { margin: 0 0 18px; }
.pxl-body li { margin: 6px 0; }
.pxl-body strong { font-weight: 600; }
.pxl-body a { color: var(--pxl-teal); text-decoration: underline; text-decoration-color: var(--pxl-citron); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.pxl-body a:hover { color: var(--pxl-citron-dark); }
.pxl-body code { font-size: 0.88em; padding: 2px 6px; border-radius: 6px; background: var(--pxl-surface); word-break: break-word; }
.pxl-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; display: block; overflow-x: auto; }
.pxl-body th, .pxl-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--pxl-line); vertical-align: top; }
.pxl-body th { font-weight: 600; background: var(--pxl-surface); }
.pxl-body blockquote, .pxl-body .pxl-note {
  margin: 0 0 24px;
  padding: 18px 22px;
  border-left: 4px solid var(--pxl-citron);
  border-radius: 0 12px 12px 0;
  background: var(--pxl-surface);
}
.pxl-body .pxl-note p:last-child { margin-bottom: 0; }

.pxl-updated { margin: 32px 0 0; font-size: 13px; color: var(--pxl-muted); }

.pxl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.pxl-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border-radius: var(--pxl-radius);
  border: 1px solid var(--pxl-line);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pxl-card:hover { border-color: var(--pxl-citron); box-shadow: 0 10px 28px rgba(0, 6, 55, 0.08); transform: translateY(-2px); }
.pxl-card__title { font-weight: 500; font-size: 16px; line-height: 1.35; }
.pxl-card__summary { font-size: 14px; line-height: 1.55; color: var(--pxl-muted); }

.pxl-related { margin-top: 56px; }
.pxl-related__title { font-size: 22px; font-weight: 500; margin: 0 0 16px; }

.pxl-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: 64px;
  padding: 40px;
  border-radius: var(--pxl-radius);
  background: var(--pxl-navy);
  color: #fff;
}
.pxl-cta > div:first-child { flex: 1 1 380px; }
.pxl-cta .sk-subheading { color: var(--pxl-citron); margin: 0 0 8px; }
.pxl-cta__title { color: #fff; font-size: 26px; line-height: 1.3; font-weight: 400; margin: 0 0 10px; }
.pxl-cta p { margin: 0; color: rgba(255, 255, 255, 0.82); }
.pxl-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.pxl-cta .pxl-link-arrow { color: #fff; }

.pxl-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.pxl-letters a {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  border-radius: 100px;
  background: var(--pxl-surface);
  font-weight: 600;
  text-decoration: none;
}
.pxl-letters a:hover { background: var(--pxl-citron); color: #fff; }
.pxl-glossary__group { scroll-margin-top: 130px; }
.pxl-glossary__letter { font-size: 22px; font-weight: 500; color: var(--pxl-citron-dark); margin: 28px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--pxl-line); }
.pxl-glossary { margin: 0; }
.pxl-glossary dt { font-weight: 600; margin-top: 14px; }
.pxl-glossary dt a { text-decoration: none; }
.pxl-glossary dt a:hover { color: var(--pxl-citron-dark); }
.pxl-glossary dd { margin: 2px 0 0; color: var(--pxl-muted); line-height: 1.6; }

@media (max-width: 1024px) {
  .pxl { --pxl-header: 110px; }
  .pxl-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* On narrow screens the topic navigation follows the content. */
  .pxl-sidebar { position: static; max-height: none; order: 2; margin-top: 48px; }
}
@media (max-width: 600px) {
  .pxl-topic { padding: 24px; }
  .pxl-cta { padding: 28px 24px; }
  .pxl-body { font-size: 16px; }
}