@charset "UTF-8";
/*-----------------------------------------------------------------------------------

	PeopleForward — Documentation
	documentation/assets/css/docs.css

	The stylesheet of this guide only: the template's own styles are in its
	style.css. Same palette and typefaces as the theme, in light and dark,
	following the reader's system setting. Mobile-first; from 992px the
	contents stay in view beside the guide.

	Table of Contents
	1. Fonts
	2. Tokens
	3. Base
	4. Top Bar
	5. Layout
	6. Contents
	7. Intro
	8. Text
	9. Code
	10. Tables
	11. Notes
	12. Footer
	13. Print

-----------------------------------------------------------------------------------*/

/* ================================================================
	1. Fonts
================================================================ */

/* The theme's variable fonts (Latin subset), copied here so the guide opens
   on its own. Not preloaded: from file://, Chrome blocks a font preload. */
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/red-hat-display-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Text";
  src: url("../fonts/red-hat-text-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
	2. Tokens
================================================================ */

/* Colours hold a light and a dark value, picked by the system setting. The
   values are the theme's default Blue scheme. */
:root {
  color-scheme: light dark;

  --d-page: light-dark(#ffffff, #10182b);
  --d-surface: light-dark(#f4f6fb, #0b1222);
  --d-tint: light-dark(#e9efff, #1a2650);
  --d-ink: light-dark(#0c1838, #eef2fb);
  --d-text: light-dark(#17213d, #dde3f0);
  --d-text-2: light-dark(#4a5470, #aeb8cf);
  --d-line: light-dark(#e1e6f0, #263254);
  --d-line-strong: light-dark(#c8d0e2, #36446c);
  --d-primary: light-dark(#1f4be0, #8eaaff);
  --d-primary-fill: #1f4be0;
  --d-deep: #0c1838;
  --d-accent: #ff6b4a;
  --d-accent-light: #ffb8a6;
  --d-accent-ink: light-dark(#b8341b, #ff9e88);
  --d-mint-soft: light-dark(#dcf5ea, #11362a);
  --d-mint-ink: light-dark(#12704b, #74dfb1);
  --d-sun-soft: light-dark(#fff1d1, #3b2e0e);
  --d-sun-ink: light-dark(#8a5a00, #f4c766);
  --d-intro-edge: light-dark(transparent, #263254);
  --d-code-bg: light-dark(#0c1838, #070c18);
  --d-code-text: #e3e9f6;
  --d-code-label: #9fb0d6;
  --d-inline-bg: light-dark(#eef1f8, #1b2647);

  --font-display: "Red Hat Display", "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Red Hat Text", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --top-h: 4rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --measure: 46rem;
  --radius: 0.875rem;
}

/* Browsers without light-dark() get the light values. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light;
    --d-page: #ffffff;
    --d-surface: #f4f6fb;
    --d-tint: #e9efff;
    --d-ink: #0c1838;
    --d-text: #17213d;
    --d-text-2: #4a5470;
    --d-line: #e1e6f0;
    --d-line-strong: #c8d0e2;
    --d-primary: #1f4be0;
    --d-accent-ink: #b8341b;
    --d-mint-soft: #dcf5ea;
    --d-mint-ink: #12704b;
    --d-sun-soft: #fff1d1;
    --d-sun-ink: #8a5a00;
    --d-intro-edge: transparent;
    --d-code-bg: #0c1838;
    --d-inline-bg: #eef1f8;
  }
}

/* ================================================================
	3. Base
================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Anchor links stop below the top bar, which is sticky from 992px. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--d-page);
  color: var(--d-text);
  font: 400 1.0625rem / 1.65 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--d-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--d-primary);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ----------------------------------------------------------------
	Skip Link
---------------------------------------------------------------- */

.doc-skip {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 20;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  background: var(--d-primary-fill);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.doc-skip:focus {
  transform: none;
}

/* ================================================================
	4. Top Bar
================================================================ */

.doc-top {
  border-bottom: 1px solid var(--d-line);
  background: var(--d-page);
}

.doc-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 84rem;
  min-height: var(--top-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ----------------------------------------------------------------
	Logo
---------------------------------------------------------------- */

/* The theme's logo without its icon font: the two chevrons are borders of
   rotated squares, the accent dot a circle on the tile's corner. */
.doc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--d-ink);
  text-decoration: none;
}

.doc-brand__mark {
  position: relative;
  display: block;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: var(--d-primary-fill);
}

.doc-brand__mark::before,
.doc-brand__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 0.15625rem solid #ffffff;
  border-right: 0.15625rem solid #ffffff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.doc-brand__mark::before {
  left: 37%;
}

.doc-brand__mark::after {
  left: 60%;
}

.doc-brand__dot {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--d-page);
  border-radius: 50%;
  background: var(--d-accent);
}

.doc-brand__name {
  font: 800 1.375rem / 1 var(--font-display);
  letter-spacing: -0.03em;
}

.doc-brand__name span {
  color: var(--d-primary);
}

.doc-top__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--d-text-2);
  font: 700 0.8125rem / 1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-top__label span {
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  background: var(--d-tint);
  color: var(--d-primary);
  letter-spacing: 0;
  text-transform: none;
}

/* Below 400px the label keeps the version only, so the logo has room. */
@media (max-width: 399.98px) {
  .doc-top__label {
    font-size: 0;
  }

  .doc-top__label span {
    font-size: 0.8125rem;
  }
}

/* ================================================================
	5. Layout
================================================================ */

.doc-shell {
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.doc-main {
  min-width: 0;
  padding-bottom: 4rem;
}

@media (min-width: 992px) {
  html {
    scroll-padding-top: calc(var(--top-h) + 1.5rem);
  }

  .doc-top {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .doc-shell {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ================================================================
	6. Contents
================================================================ */

/* On phones and tablets the contents are a box at the top of the guide, in
   two columns from 576px; from 992px a column that stays in view and
   scrolls by itself when it is taller than the window. */
.doc-nav {
  margin-block: 1.5rem 0;
  padding: 1.25rem 1.25rem 0.5rem;
  border: 1px solid var(--d-line);
  border-radius: var(--radius);
  background: var(--d-surface);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.doc-nav__title {
  margin: 0 0 1rem;
  color: var(--d-ink);
  font: 800 1.125rem / 1.2 var(--font-display);
}

.doc-nav ul {
  margin: 0;
  padding: 0;
  list-style-type: "";
}

.doc-nav__group {
  padding-bottom: 1rem;
  break-inside: avoid;
}

.doc-nav__heading {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--d-text-2);
  font: 700 0.75rem / 1.4 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-nav a {
  display: block;
  margin-inline: -0.625rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.5rem;
  color: var(--d-text);
  text-decoration: none;
}

.doc-nav a:hover {
  background: var(--d-tint);
  color: var(--d-primary);
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .doc-nav__groups {
    columns: 2;
    column-gap: 2rem;
  }
}

@media (min-width: 992px) {
  .doc-nav {
    position: sticky;
    top: calc(var(--top-h) + 1.5rem);
    align-self: start;
    max-height: calc(100vh - var(--top-h) - 3rem);
    margin-block: 1.5rem 3rem;
    padding: 1rem 0.75rem 0.5rem 0;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: none;
    scrollbar-width: thin;
  }

  .doc-nav__title {
    display: none;
  }

  .doc-nav a {
    margin-inline: 0;
  }
}

/* ================================================================
	7. Intro
================================================================ */

.doc-intro {
  margin-top: 1.5rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border: 1px solid var(--d-intro-edge);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 100% 0%, rgb(255 107 74 / 0.24), transparent 45%),
    radial-gradient(circle at 0% 100%, rgb(31 75 224 / 0.45), transparent 55%),
    var(--d-deep);
  color: #ffffff;
}

.doc-intro__kicker {
  margin: 0 0 0.75rem;
  color: var(--d-accent-light);
  font: 700 0.8125rem / 1.2 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doc-intro__title {
  margin: 0;
  font: 800 clamp(2.25rem, 1.5rem + 3vw, 3.5rem) / 1.05 var(--font-display);
  letter-spacing: -0.03em;
}

.doc-intro__lead {
  max-width: 40rem;
  margin: 1rem 0 0;
  color: rgb(255 255 255 / 0.82);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

.doc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.75rem;
  margin: 2rem 0 0;
}

.doc-facts div {
  padding: 0.875rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.05);
}

.doc-facts dt {
  color: var(--d-accent-light);
  font: 700 0.75rem / 1.3 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-facts dd {
  margin: 0.25rem 0 0;
  font-weight: 500;
  line-height: 1.4;
}

/* ================================================================
	8. Text
================================================================ */

.doc-section {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--d-line);
}

.doc-h2 {
  margin: 0 0 1.25rem;
  color: var(--d-ink);
  font: 800 clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
}

.doc-h3 {
  margin: 2.25rem 0 0.75rem;
  color: var(--d-ink);
  font: 700 1.25rem / 1.3 var(--font-display);
  letter-spacing: -0.01em;
}

.doc-h2 + .doc-h3 {
  margin-top: 0;
}

.doc-main p {
  max-width: var(--measure);
  margin: 0 0 1rem;
}

/* ----------------------------------------------------------------
	Lists
---------------------------------------------------------------- */

.doc-list,
.doc-steps {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  padding: 0;
}

.doc-list li,
.doc-steps li {
  margin-bottom: 0.5rem;
}

.doc-list {
  padding-inline-start: 1.25rem;
}

.doc-list li {
  padding-inline-start: 0.25rem;
}

.doc-list li::marker {
  color: var(--d-primary);
}

/* Numbered steps: the number in a tinted circle. An empty marker string
   rather than none keeps the list a list for Safari's screen reader. */
.doc-steps {
  list-style-type: "";
  counter-reset: step;
}

.doc-steps li {
  position: relative;
  padding-inline-start: 2.5rem;
  counter-increment: step;
}

.doc-steps li::before {
  content: counter(step);
  position: absolute;
  top: 0.0625rem;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--d-tint);
  color: var(--d-primary);
  font: 700 0.875rem / 1 var(--font-display);
}

/* ----------------------------------------------------------------
	Changelog
---------------------------------------------------------------- */

.doc-changelog {
  max-width: var(--measure);
  margin: 0;
}

.doc-changelog div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--d-line);
}

.doc-changelog dt {
  min-width: 8rem;
  color: var(--d-ink);
  font-weight: 700;
}

.doc-changelog dd {
  margin: 0;
}

/* ================================================================
	9. Code
================================================================ */

code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

:not(pre) > code {
  padding: 0.125em 0.375em;
  border-radius: 0.375rem;
  background: var(--d-inline-bg);
  color: var(--d-accent-ink);
  overflow-wrap: anywhere;
}

kbd {
  padding: 0.0625em 0.375em;
  border: 1px solid var(--d-line-strong);
  border-bottom-width: 2px;
  border-radius: 0.375rem;
  background: var(--d-page);
  color: var(--d-ink);
  font-size: 0.8125em;
  white-space: nowrap;
}

/* ----------------------------------------------------------------
	Code Blocks
---------------------------------------------------------------- */

/* Dark in both themes. Long lines wrap rather than scroll, so a block never
   needs its own scrollbar or a place in the tab order. */
.doc-code {
  max-width: 100%;
  margin: 0 0 1.5rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--d-code-bg);
}

.doc-code figcaption {
  padding: 0.625rem 1.125rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  color: var(--d-code-label);
  font: 700 0.75rem / 1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-code pre {
  margin: 0;
  padding: 1rem 1.125rem 1.125rem;
  color: var(--d-code-text);
  font: 400 0.8125rem / 1.65 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.doc-code code {
  font-size: inherit;
}

/* ================================================================
	10. Tables
================================================================ */

.doc-table {
  margin: 0 0 2rem;
}

.doc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.doc-table caption {
  padding: 0 0 0.625rem;
  color: var(--d-text-2);
  font-size: 0.875rem;
  text-align: start;
  caption-side: top;
}

.doc-table th,
.doc-table td {
  padding: 0.6875rem 0.75rem;
  border-bottom: 1px solid var(--d-line);
  text-align: start;
  vertical-align: top;
}

.doc-table thead th {
  border-bottom-color: var(--d-line-strong);
  background: var(--d-surface);
  color: var(--d-text-2);
  font: 700 0.75rem / 1.3 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc-table tbody th {
  color: var(--d-ink);
  font-weight: 600;
}

/* A page's file, under its name. */
.doc-file {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
}

/* The blocks a page is made of, under its description. */
.doc-blocks {
  display: block;
  margin-top: 0.375rem;
  color: var(--d-text-2);
  font-size: 0.8125rem;
}

/* A colour swatch before a value. */
.doc-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-inline-end: 0.5rem;
  border: 1px solid var(--d-line-strong);
  border-radius: 0.3125rem;
  vertical-align: -0.2em;
}

/* Paths break only where the build allows it (after a slash, before a #),
   so a column never shrinks to a word cut in two. */
.doc-table code {
  overflow-wrap: break-word;
}

/* From 768px the first column of the page list keeps to about a third, and
   the short names that head the other tables (tokens, keys) stay whole. */
@media (min-width: 768px) {
  .doc-table--pages tbody th {
    width: 32%;
  }

  .doc-table:not(.doc-table--pages) tbody th code {
    white-space: nowrap;
  }
}

/* Below 768px each row is a card: its first cell as the title, then each
   cell under the name of its column (data-label, written by the build). */
@media (max-width: 767.98px) {
  .doc-table table,
  .doc-table caption,
  .doc-table tbody,
  .doc-table tr,
  .doc-table th,
  .doc-table td {
    display: block;
  }

  .doc-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .doc-table tr {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--d-line);
  }

  .doc-table th,
  .doc-table td {
    padding: 0;
    border: 0;
  }

  .doc-table tbody th {
    font-size: 1rem;
  }

  .doc-table td {
    margin-top: 0.5rem;
  }

  .doc-table code {
    overflow-wrap: anywhere;
  }

  .doc-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--d-text-2);
    font: 700 0.6875rem / 1.5 var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* ================================================================
	11. Notes
================================================================ */

.doc-note {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  padding: 0.875rem 1.125rem;
  border-inline-start: 4px solid var(--d-primary);
  border-radius: 0.625rem;
  background: var(--d-tint);
}

.doc-main .doc-note p {
  margin: 0;
}

.doc-note strong {
  color: var(--d-primary);
}

.doc-note--tip {
  border-color: var(--d-mint-ink);
  background: var(--d-mint-soft);
}

.doc-note--tip strong {
  color: var(--d-mint-ink);
}

.doc-note--warn {
  border-color: var(--d-sun-ink);
  background: var(--d-sun-soft);
}

.doc-note--warn strong {
  color: var(--d-sun-ink);
}

/* ================================================================
	12. Footer
================================================================ */

.doc-foot {
  border-top: 1px solid var(--d-line);
  background: var(--d-surface);
  color: var(--d-text-2);
  font-size: 0.9375rem;
}

.doc-foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  max-width: 84rem;
  margin-inline: auto;
  padding: 1.5rem var(--gutter);
}

.doc-foot p {
  margin: 0;
}

/* ================================================================
	13. Print
================================================================ */

/* On paper: light colours, no top bar or contents, and the intro without
   its dark panel (printers drop backgrounds). */
@media print {
  :root {
    color-scheme: light;
  }

  .doc-skip,
  .doc-top,
  .doc-nav {
    display: none;
  }

  .doc-shell {
    display: block;
  }

  .doc-intro {
    padding: 0;
    border: 0;
    background: none;
    color: var(--d-ink);
  }

  .doc-intro__kicker,
  .doc-facts dt {
    color: var(--d-text-2);
  }

  .doc-intro__lead {
    color: var(--d-text);
  }

  .doc-facts div {
    border-color: var(--d-line);
  }

  .doc-code {
    break-inside: avoid;
  }
}