/* The development guides, the pages of Malipo, Bonga and Kweepa Identity (services/guide.html, fragments/guide.html), drawn to one design
   (2026-10-30: asked for, "redesign the developer pages to be like actual development guides, use our factual process"). Until then each
   was drawn to the landing design (a hero, who it is for, what you get, what it connects to, a closing band), whose stylesheet went with
   the last of its pages.

   What a developer reading a guide needs is to know where they are and what to copy: a hero with the way in; from 64rem a column at the
   left that stays in view, the contents of this guide (each guide stands on its own page: no list of the others, 2026-10-30), which
   site.js makes follow the reader (below 64rem a bar under the top bar that says where they are and opens the list); and beside it the
   sections, numbered, the first of which begins with the facts a developer looks for first (where it is, how a call is signed, what it
   speaks), as a list of terms under "At a glance" (they were a card in the hero until 2026-10-31); the blocks are what a guide
   is made of: a paragraph, a numbered process, code (a frame with its language and a Copy button, tabs where there are several
   languages), a table (a card for each row in a column under 36rem), terms, a note, a flow (what happens, in order, as a timeline). The page works
   without a script: code in several languages stands one language after another, each with its name over it.

   Its type is typography.md's: every text takes one of its roles, set in the Type roles block below and nowhere else. The space between
   rows, columns and items is 20px at the most (--gap-max, site.css): blocks are a gap apart where a heading, a line or a card does not
   say otherwise; a painted band or card has the room it needs inside itself. Everything is scoped to .gd, and its colours are the site's
   own tokens, which have their dark values already; the few it adds are set again for the dark theme. */

.gd {
    color: var(--md-on-surface);

    /* the surface of code and of the bar over it, and of a table's head: the site's own tonal containers */
    --gd-code: var(--md-surface-container-low);
    --gd-code-bar: var(--md-surface-container);
    --gd-inline: var(--md-surface-container);

    /* a warning: an amber that has both its themes, as what a status says does on the other pages */
    --gd-warn-bg: #fff6df;
    --gd-warn-line: #9a5b00;
    --gd-warn-ink: #7a4800;

    /* what a search found: the words in a result and in the block it leads to, and the block itself while it is pointed out */
    --gd-mark-bg: #ffe49a;
    --gd-mark-ink: #1f1f1f;
    --gd-found: var(--md-surface-container-high);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gd {
        --gd-warn-bg: #2d2411;
        --gd-warn-line: #f2b84b;
        --gd-warn-ink: #f6c968;
        --gd-mark-bg: #6b5410;
        --gd-mark-ink: #fff1c7;
    }
}

:root[data-theme="dark"] .gd {
    --gd-warn-bg: #2d2411;
    --gd-warn-line: #f2b84b;
    --gd-warn-ink: #f6c968;
    --gd-mark-bg: #6b5410;
    --gd-mark-ink: #fff1c7;
}

/* ------------------------------------------------------------------ */
/* Type roles (typography.md, 3)                                        */
/* ------------------------------------------------------------------ */

/* The page's texts take typography.md's roles (section 3) here, and only here: the rules below set none of their family, size, weight,
   line height, letter spacing or case. A heading's tag gives it its role (site.css's base) unless it is listed here, taking another
   level's style; the rest are listed by their roles. The title is the page's h1, which the base gives its role; code and a table's
   cells take theirs from the base too (code 15px, a cell 14px). */

/* H3: sans 500 (a section's heading, the question that ends a page) */
.gd-section__title,
.gd-closing__title {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    letter-spacing: 0;
}

/* H4 (card title): sans 500 (a subheading, a step's name, a question) */
.gd-sub,
.gd-step__title,
.gd-faq__question {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* Body: sans 400 (the lead, the paragraphs, the lists, what a term and a note say, the answers) */
.gd-lead,
.gd-section__intro,
.gd-text,
.gd-list,
.gd-terms dd,
.gd-note__text,
.gd-status__text,
.gd-faq__answer,
.gd-closing__text {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Small, captions: sans 400 (what a step of a flow says, the captions of code and tables, the sections and the parts in the contents, what a
   search found and how many) */
.gd-meta,
.gd-flow__text,
.gd-flow__caption,
.gd-flow__ends-label,
.gd-table__caption,
.gd-code__caption,
.gd-toc__link,
.gd-toc__part,
.gd-find__where,
.gd-find__what,
.gd-find__count {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Form labels: sans 500 (the names of terms, a note's title, the name of a step of a flow, the language of code, a tab, Copy, Expand all,
   where the reader is, in the bar of a phone) */
.gd-terms dt,
.gd-note__title,
.gd-status__title,
.gd-flow__title,
.gd-code__lang,
.gd-code__tab,
.gd-code__copy,
.gd-toc__all,
.gd-toc__bar-now {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Buttons and navigation links: sans 500 (the trail, the buttons, the link to the Markdown) */
.gd-crumbs__list,
.gd-btn,
.gd-link {
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    line-height: var(--lh-button);
    letter-spacing: 0;
}

/* Eyebrow labels and tags: mono 500, uppercase (the labels, the numbers of the sections, of the steps and of a flow, the names of what a flow ends in) */
.gd-eyebrow,
.gd-label,
.gd-toc__bar-label,
.gd-toc__link::before,
.gd-section__title::before,
.gd-step::before,
.gd-flow__node::before,
.gd-flow__end-title {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* The hero                                                            */
/* ------------------------------------------------------------------ */

.gd-hero {
    padding-block: 0.5rem 1.75rem;
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-low);
}

.gd-crumbs {
    margin: 0 0 0.5rem;
}

.gd-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--md-on-surface-variant);
}

.gd-crumbs__list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
}

.gd-crumbs__list li + li::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-top: 1.5px solid currentcolor;
    border-right: 1.5px solid currentcolor;
    opacity: 0.65;
    rotate: 45deg;
}

.gd-crumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    color: inherit;
    text-decoration: none;
}

.gd-crumbs__link:hover {
    color: var(--md-primary-ink);
    text-decoration: underline;
}

.gd-crumbs__list [aria-current="page"] {
    color: var(--md-on-surface);
}

.gd-eyebrow {
    margin: 0 0 0.5rem;
    color: var(--md-primary-ink);
}

.gd-title {
    margin: 0 0 0.75rem;
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

.gd-lead {
    margin: 0;
    max-width: 46rem;
    color: var(--md-on-surface);
    text-wrap: pretty;
}

/* who a guide is for, when it was checked and how long it takes to read, under its lead (guides for buyers, 2026-11-01) */
.gd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 0.75rem 0 0;
    color: var(--md-on-surface-variant);
}

.gd-meta__dot {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.gd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.25rem;
}

.gd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        border-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.gd-btn:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, 200ms, var(--press-in);
}

/* the icons are drawn as lines: site.css's .icon fills with currentColor, and each icon's name is a class so that an arrow moves the
   way it points */
.gd-icon {
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gd-btn .gd-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.gd-btn--filled {
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.gd-btn--filled:hover {
    background: var(--md-primary-hover);
    color: var(--md-on-primary);
}

.gd-btn--outlined {
    border-color: var(--md-outline);
    background: var(--md-surface);
    color: var(--md-primary-ink);
}

.gd-btn--outlined:hover {
    background: var(--md-surface-container);
    color: var(--md-primary-ink);
}

.gd-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--md-primary-ink);
    text-decoration: none;
}

.gd-link:hover {
    text-decoration: underline;
}

.gd-link .gd-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

/* whether the platform can be used yet, where it cannot */
.gd-status {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    max-width: 46rem;
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--gd-warn-line);
    border-radius: var(--radius-md);
    background: var(--gd-warn-bg);
}

.gd-status .gd-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gd-warn-ink);
}

.gd-status__body {
    min-width: 0;
}

.gd-status__title,
.gd-status__text {
    margin: 0;
    color: var(--md-on-surface);
}

.gd-label {
    margin: 0 0 0.5rem;
    color: var(--md-on-surface-variant);
}

/* ------------------------------------------------------------------ */
/* The page: the contents at the side and the guide                    */
/* ------------------------------------------------------------------ */

.gd-layout {
    display: grid;
    gap: var(--gap-max);
    padding-block: var(--gap-max);
}

.gd-aside {
    min-width: 0;
}

/* The contents: a link to each section and, under it, to its subheadings and steps. Without a script it is a card of the sections' links,
   two to a row (three where the card is wide). With one (the section on the guides in site.js) it is a list that follows the reader: the
   section being read is open and marked, and so is the part, a bar shows how far through the guide they are, a field searches it, and
   a button opens every section's parts. Below 64rem it is a bar that stays under the top bar, saying where the reader is, and opens the
   whole list over the guide. */
.gd-toc {
    container: gd-toc / inline-size;
    position: relative;
    --gd-row: 2.75rem;
    padding: 1rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--md-surface-container-low);
}

.gd-toc__bar,
.gd-toc__progress {
    display: none;
}

.gd-toc__body {
    min-width: 0;
}

.gd-toc__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 0.5rem;
    margin-bottom: 0.5rem;
}

.gd-toc__head .gd-label {
    margin: 0;
}

.gd-toc__all {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--md-primary-ink);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.gd-toc__all[hidden] {
    display: none;
}

.gd-toc__all:hover {
    background: var(--md-surface-container-high);
}

.gd-toc__all:active {
    scale: var(--press-scale);
    transition-duration: 200ms, var(--press-in);
}

/* how far through the guide the reader is */
.gd-toc__progress {
    height: 3px;
    margin-bottom: 0.75rem;
    border-radius: var(--radius-full);
    background: var(--md-outline-variant);
    overflow: hidden;
}

.gd-toc__fill {
    display: block;
    height: 100%;
    background: var(--md-primary);
    transform: scaleX(var(--gd-progress, 0));
    transform-origin: left center;
    transition: transform 200ms var(--ease-standard);
}

.gd-toc.is-ready .gd-toc__progress {
    display: block;
}

/* the field that searches the guide, and what it found */
.gd-find {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin-bottom: 0.5rem;
    padding-inline: 0.75rem 0.25rem;
    border: 1px solid var(--md-outline);
    border-radius: var(--radius-full);
    background: var(--md-surface);
    color: var(--md-on-surface-variant);
    transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}

.gd-find[hidden] {
    display: none;
}

.gd-find:focus-within {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 1px var(--md-primary);
}

.gd-find > .gd-icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
}

.gd-find__input {
    flex: 1;
    min-width: 0;
    height: 2.5rem;
    border: 0;
    background: transparent;
    color: var(--md-on-surface);
    appearance: none;
}

.gd-find__input::placeholder {
    color: var(--md-on-surface-variant);
    opacity: 1;
}

.gd-find__input:focus-visible {
    outline: none;
}

.gd-find__input::-webkit-search-cancel-button {
    appearance: none;
}

.gd-find__clear {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--md-on-surface-variant);
    cursor: pointer;
}

.gd-find__clear[hidden] {
    display: none;
}

.gd-find__clear:hover {
    background: var(--md-surface-container-high);
    color: var(--md-on-surface);
}

.gd-find__clear .gd-icon {
    width: 1rem;
    height: 1rem;
}

.gd-find__count {
    margin: 0 0 0.25rem;
    padding-inline: 0.75rem;
    color: var(--md-on-surface-variant);
}

.gd-find__count[hidden],
.gd-find__results[hidden] {
    display: none;
}

.gd-find__results {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gd-find__result {
    display: grid;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: background-color 200ms var(--ease-standard);
}

.gd-find__result:hover,
.gd-find__results li.is-active > .gd-find__result {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

.gd-find__where {
    color: var(--md-on-surface-variant);
}

.gd-find__result:hover .gd-find__where,
.gd-find__results li.is-active .gd-find__where {
    color: inherit;
}

.gd-find mark,
.gd-find__result mark {
    padding: 0 0.0625rem;
    border-radius: 2px;
    background: var(--gd-mark-bg);
    color: var(--gd-mark-ink);
}

/* the words that were searched for, in the block the reader was led to (the CSS Custom Highlight API, where the browser has it) */
.gd ::highlight(gd-find) {
    background-color: var(--gd-mark-bg);
    color: var(--gd-mark-ink);
}

/* the sections, then, once the script has run, a button that shows the parts of one and the parts themselves */
.gd-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: gd-toc;
}

.gd-toc__list[hidden] {
    display: none;
}

.gd-toc__item {
    min-width: 0;
    counter-increment: gd-toc;
}

.gd-toc__link {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    min-height: var(--gd-row);
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--md-on-surface-variant);
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.gd-toc__link::before {
    content: counter(gd-toc, decimal-leading-zero);
    flex: none;
    color: var(--md-primary-ink);
}

.gd-toc__link:hover {
    background: var(--md-surface-container);
    color: var(--md-on-surface);
}

.gd-toc__link:focus-visible {
    border-radius: var(--radius-sm);
}

.gd-toc__link:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, var(--press-in);
}

.gd-toc__link.is-current {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

.gd-toc__link.is-current::before {
    color: inherit;
}

.gd-toc__toggle,
.gd-toc__panel {
    display: none;
}

.gd-toc.is-ready .gd-toc__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
}

.gd-toc.is-ready .gd-toc__item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: start;
}

.gd-toc.is-ready .gd-toc__link {
    grid-column: 2;
    grid-row: 1;
}

.gd-toc.is-ready .gd-toc__toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: var(--gd-row);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--md-on-surface-variant);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard);
}

.gd-toc.is-ready .gd-toc__toggle[hidden] {
    display: none;
}

.gd-toc__toggle:hover {
    background: var(--md-surface-container);
    color: var(--md-on-surface);
}

.gd-toc__toggle .gd-icon {
    width: 1rem;
    height: 1rem;
    transition: rotate var(--spring-quick) var(--ease-spring);
}

.gd-toc__toggle[aria-expanded="true"] .gd-icon {
    rotate: 90deg;
}

/* the parts open to their height, and while they are shut nothing in them is reached by the keyboard or read out */
.gd-toc.is-ready .gd-toc__panel {
    display: grid;
    grid-column: 2;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--spring) var(--ease-spring), visibility 0s linear var(--spring);
}

.gd-toc.is-ready .gd-toc__item.is-open > .gd-toc__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 0s;
}

.gd-toc__parts {
    display: grid;
    min-height: 0;
    margin: 0 0 0 1.25rem;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.gd-toc__part {
    display: flex;
    align-items: center;
    min-height: var(--gd-row);
    padding: 0.4375rem 0.5rem 0.4375rem 0.75rem;
    border-left: 2px solid var(--md-outline-variant);
    color: var(--md-on-surface-variant);
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}

.gd-toc__part:hover {
    background: var(--md-surface-container);
    color: var(--md-on-surface);
}

.gd-toc__part:focus-visible {
    outline-offset: -2px;
}

.gd-toc__part.is-current {
    border-left-color: var(--md-primary);
    color: var(--md-primary-ink);
}

/* the card of sections that a page without a script has: the number of columns follows its own width, in rem, so that it follows the
   text's size too (a media query in rem does not see a text that is enlarged): one under 14rem, two, three from 30rem */
@container gd-toc (max-width: 14rem) {
    .gd-toc__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container gd-toc (min-width: 30rem) {
    .gd-toc__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* A phone, once the script has run (mobile first; the column at the side takes over from 64rem): the contents are a bar that stays under
   the top bar, saying where the reader is, and it opens the list over the guide. The layout is a block so that the bar, which is sticky
   in its parent, stays through the whole guide and not only through its own row. */
.gd-layout.is-ready {
    display: block;
}

.gd-layout.is-ready > .gd-article {
    margin-top: var(--gap-max);
}

.gd-aside.is-ready {
    position: sticky;
    top: var(--top-bar-h);
    z-index: 40;
}

/* a jump, a search result and the reading leave what they lead to clear of the bar: the page says the bar's height (site.js) */
@media (max-width: 63.999rem) {
    :root:has(.gd-aside.is-ready) {
        scroll-padding-top: calc(var(--top-bar-h) + var(--gd-bar, 3.25rem) + 0.75rem);
    }
}

.gd-toc.is-ready {
    padding: 0;
    background: var(--md-surface);
}

.gd-toc.is-ready .gd-toc__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.5rem 0.75rem 0.625rem 1rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: none;
    color: var(--md-on-surface);
    text-align: left;
    cursor: pointer;
}

.gd-toc__bar-words {
    display: grid;
    min-width: 0;
}

.gd-toc__bar-label {
    color: var(--md-on-surface-variant);
}

.gd-toc__bar-now {
    overflow-wrap: anywhere;
}

.gd-toc__bar .gd-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    transition: rotate var(--spring-quick) var(--ease-spring);
}

.gd-toc.is-open .gd-toc__bar .gd-icon {
    rotate: 180deg;
}

.gd-toc.is-ready .gd-toc__progress {
    position: absolute;
    right: 1rem;
    bottom: 0.25rem;
    left: 1rem;
    margin: 0;
}

.gd-toc.is-ready .gd-toc__body {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    left: 0;
    max-height: min(70dvh, 32rem);
    padding: 0.75rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--md-surface);
    /* a soft shadow, wide and faint: the text just under the list stays as legible as the text over it */
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.1);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gd-toc.is-open .gd-toc__body {
    display: block;
}

/* where a search or the contents lead, the block is pointed out for a moment */
.gd-found {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--md-primary);
    outline-offset: 0.25rem;
    background-color: var(--gd-found);
}

.gd-table tr.gd-found > * {
    background-color: var(--gd-found);
}

/* a row is outlined inside its own edges: outside them the line would run along the foot of the caption over the first row of a table on a phone */
.gd-table tr.gd-found {
    outline-offset: -2px;
}

.gd-code.gd-found {
    outline: 0;
    background: none;
}

.gd-code.gd-found .gd-code__frame {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px var(--md-primary);
}

@media (prefers-reduced-motion: no-preference) {
    .gd-found {
        animation: gd-found 2.4s var(--ease-standard) both;
    }

    @keyframes gd-found {
        0%,
        55% {
            outline-color: var(--md-primary);
            background-color: var(--gd-found);
        }

        100% {
            outline-color: transparent;
            background-color: transparent;
        }
    }
}

/* ------------------------------------------------------------------ */
/* The sections                                                        */
/* ------------------------------------------------------------------ */

/* the sections are numbered by a counter, the number a tag before the heading; one has a line over it where another comes before it, and
   the room either side of the line is the limit's */
.gd-article {
    min-width: 0;
    counter-reset: gd-section;
}

.gd-section {
    padding-bottom: var(--gap-max);
    counter-increment: gd-section;
}

.gd-section + .gd-section {
    padding-top: var(--gap-max);
    border-top: 1px solid var(--md-outline-variant);
}

.gd-section__title {
    margin: 0 0 0.75rem;
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

.gd-section__title::before {
    content: counter(gd-section, decimal-leading-zero);
    display: block;
    margin-bottom: 0.25rem;
    color: var(--md-primary-ink);
}

/* what lies in a section or in a step: a block, and the next a gap under it; a heading is closer to what it heads (the selectors are
   written long so that a block's own margin, which is only ever the one below it or none, never takes the gap away) */
.gd .gd-section > * + *,
.gd .gd-step__body > * + * {
    margin-top: var(--gap-max);
}

.gd .gd-section > .gd-section__title + *,
.gd .gd-section > .gd-sub + *,
.gd .gd-step__body > .gd-sub + * {
    margin-top: 0.5rem;
}

.gd .gd-section > .gd-section__intro + * {
    margin-top: var(--gap-max);
}

.gd-section__intro,
.gd-text {
    margin-bottom: 0;
    color: var(--md-on-surface);
    max-width: 70ch;
    text-wrap: pretty;
}

.gd-sub {
    margin-bottom: 0;
    color: var(--md-on-surface);
}

.gd-list {
    margin-bottom: 0;
    padding-left: 1.5rem;
    max-width: 70ch;
    color: var(--md-on-surface);
}

.gd-list li + li {
    margin-top: 0.5rem;
}

.gd-list li {
    overflow-wrap: anywhere;
}

/* what is said in a few words is code: the base gives it its role, here its look */
.gd code {
    padding: 0.0625em 0.25em;
    border-radius: var(--radius-xs);
    background: var(--gd-inline);
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

.gd pre code {
    padding: 0;
    border-radius: 0;
    background: none;
}

/* ------------------------------------------------------------------ */
/* A numbered process                                                   */
/* ------------------------------------------------------------------ */

.gd-steps {
    display: grid;
    gap: var(--gap-max);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: gd-step;
}

.gd-step {
    position: relative;
    min-width: 0;
    counter-increment: gd-step;
}

/* the number, in a disc, and the line that joins one step to the next */
.gd-step::before {
    content: counter(gd-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.gd-step__title {
    margin: 0;
    min-height: 2rem;
    padding: 0.25rem 0 0 2.75rem;
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

.gd-step__body {
    min-width: 0;
    margin-top: 0.5rem;
}

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

.gd-code {
    margin: 0;
    min-width: 0;
}

.gd-code__caption {
    margin: 0 0 0.5rem;
    color: var(--md-on-surface-variant);
}

.gd-code__frame {
    overflow: hidden;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-md);
    background: var(--gd-code);
}

/* the bar wraps, so that with the text larger the Copy button goes under the name or the tabs and is never pushed out of the frame */
.gd-code__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding-inline: 1rem 0.5rem;
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--gd-code-bar);
}

.gd-code__lang {
    margin: 0;
    color: var(--md-on-surface-variant);
}

.gd-code__lang--panel {
    padding: 0.5rem 1rem 0;
}

.gd-code__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
}

.gd-code__tabs[hidden] {
    display: none;
}

.gd-code__tab {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.75rem;
    border-bottom: 2px solid transparent;
    color: var(--md-on-surface-variant);
    text-decoration: none;
    transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}

.gd-code__tab:hover {
    color: var(--md-on-surface);
}

.gd-code__tab[aria-selected="true"] {
    border-bottom-color: var(--md-primary);
    color: var(--md-primary-ink);
}

.gd-code__copy {
    display: inline-flex;
    flex: none;
    margin-inline-start: auto;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: none;
    color: var(--md-on-surface-variant);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.gd-code__copy[hidden] {
    display: none;
}

.gd-code__copy:hover {
    background: var(--md-surface-container-high);
    color: var(--md-on-surface);
}

.gd-code__copy:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, var(--press-in);
}

.gd-code__copy .gd-icon {
    width: 1rem;
    height: 1rem;
}

.gd-code__copy.is-done {
    color: var(--md-tertiary);
}

.gd-code__panel[hidden] {
    display: none;
}

/* the code is plain text and wraps: a long line is never off to the side of the page */
.gd-code__pre {
    margin: 0;
    padding: 0.875rem 1rem;
    color: var(--md-on-surface);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
}

.gd-code__lang--panel + .gd-code__pre {
    padding-top: 0.5rem;
}

/* before the script has run, code in several languages is one language after another with the name over each: no bar, no choice yet */
.gd-code[data-tabs]:not(.is-ready) .gd-code__bar {
    display: none;
}

.gd-code[data-tabs]:not(.is-ready) .gd-code__panel + .gd-code__panel {
    border-top: 1px solid var(--md-outline-variant);
}

@media (scripting: enabled) {
    .gd-code[data-tabs]:not(.is-ready) .gd-code__panel ~ .gd-code__panel {
        display: none;
    }
}

.gd-code[data-tabs].is-ready .gd-code__lang--panel {
    display: none;
}

/* ------------------------------------------------------------------ */
/* A table                                                             */
/* ------------------------------------------------------------------ */

.gd-table {
    min-width: 0;
    /* a row is a card where the table's own column is narrower than 36rem, which follows the text's size where a media query on the
       window does not (2026-11-01: the check of the guides for buyers at 200% text found a four-column table 100px wider than a 768px window) */
    container: gd-table / inline-size;
}

.gd-table table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-md);
    background: var(--md-surface);
}

.gd-table__caption {
    padding-bottom: 0.5rem;
    color: var(--md-on-surface-variant);
    text-align: left;
    caption-side: top;
}

/* under a heading that says the same, the caption is for a screen reader alone */
.gd-sub + .gd-table .gd-table__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.gd-table thead th {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-low);
    color: var(--md-on-surface-variant);
    vertical-align: bottom;
}

.gd-table tbody tr + tr > * {
    border-top: 1px solid var(--md-outline-variant);
}

.gd-table tbody th,
.gd-table tbody td {
    padding: 0.625rem 0.875rem;
    color: var(--md-on-surface);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.gd-table__key {
    width: 34%;
    min-width: 12rem;
}

/* in a column under 36rem a row is a card: its name over its cells, each cell under the name of its column */
@container gd-table (max-width: 35.99rem) {
    .gd-table table,
    .gd-table tbody,
    .gd-table tr,
    .gd-table tbody th,
    .gd-table tbody td {
        display: block;
        width: auto;
        min-width: 0;
    }

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

    .gd-table tbody tr + tr {
        border-top: 1px solid var(--md-outline-variant);
    }

    .gd-table tbody tr + tr > * {
        border-top: 0;
    }

    .gd-table tbody tr {
        padding: 0.625rem 0;
    }

    .gd-table tbody th,
    .gd-table tbody td {
        padding: 0.25rem 0.875rem;
    }

    .gd-table__caption {
        display: block;
        padding: 0.625rem 0.875rem 0;
    }

    .gd-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--md-on-surface-variant);
    }

    .gd-table tbody td:empty {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Terms                                                               */
/* ------------------------------------------------------------------ */

/* a term and what it means, in a frame, a line between two rows; side by side from 40rem */
.gd-terms {
    margin: 0;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-md);
    background: var(--md-surface);
    overflow: hidden;
}

.gd-terms__row {
    display: grid;
    gap: 0.25rem 1.25rem;
    padding: 0.875rem 1rem;
}

.gd-terms__row + .gd-terms__row {
    border-top: 1px solid var(--md-outline-variant);
}

.gd-terms dt {
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

.gd-terms dd {
    margin: 0;
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* A note                                                              */
/* ------------------------------------------------------------------ */

.gd-note {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border: 1px solid var(--md-outline-variant);
    border-left: 4px solid var(--md-primary);
    border-radius: var(--radius-md);
    background: var(--md-surface-container-low);
}

.gd-note .gd-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
    color: var(--md-primary-ink);
}

.gd-note--warn {
    border-color: var(--gd-warn-line);
    background: var(--gd-warn-bg);
}

.gd-note--warn .gd-icon {
    color: var(--gd-warn-ink);
}

.gd-note__body {
    min-width: 0;
}

.gd-note__title,
.gd-note__text {
    margin: 0;
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

.gd-note__title + .gd-note__text {
    margin-top: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* A flow                                                              */
/* ------------------------------------------------------------------ */

.gd-flow {
    padding: 1rem 1.25rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--md-surface-container-low);
}

.gd-flow__caption {
    margin: 0 0 0.75rem;
    color: var(--md-on-surface-variant);
}

.gd-flow__steps {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: gd-flow;
}

.gd-flow__node {
    position: relative;
    min-width: 0;
    padding-left: 2.5rem;
    counter-increment: gd-flow;
}

.gd-flow__node::before {
    content: counter(gd-flow);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

.gd-flow__node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2rem;
    bottom: -0.5rem;
    left: calc(0.875rem - 1px);
    width: 2px;
    background: var(--md-outline-variant);
}

.gd-flow__title,
.gd-flow__text,
.gd-flow__end-title {
    margin: 0;
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

.gd-flow__title {
    min-height: 1.75rem;
    padding-top: 0.125rem;
}

.gd-flow__text {
    margin-top: 0.125rem;
    color: var(--md-on-surface-variant);
}

.gd-flow__ends-label {
    margin: 1rem 0 0.5rem;
    color: var(--md-on-surface-variant);
}

.gd-flow__ends {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gd-flow__end {
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-md);
    background: var(--md-surface);
}

.gd-flow__end-title {
    color: var(--md-primary-ink);
}

.gd-flow__end .gd-flow__text {
    margin-top: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* The questions                                                       */
/* ------------------------------------------------------------------ */

/* a line between two questions and none over the first or under the last */
.gd-faq__list {
    display: grid;
}

.gd-faq__item + .gd-faq__item {
    border-top: 1px solid var(--md-outline-variant);
}

.gd-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
    padding-block: 0.625rem;
    color: var(--md-on-surface);
    cursor: pointer;
    list-style: none;
}

.gd-faq__question::-webkit-details-marker {
    display: none;
}

.gd-faq__question span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.gd-faq__question .icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--md-on-surface-variant);
    transition: rotate var(--spring-quick) var(--ease-spring);
}

.gd-faq__item[open] .gd-faq__question .icon {
    rotate: 180deg;
}

.gd-faq__answer {
    padding-bottom: 0.625rem;
}

.gd-faq__answer p {
    margin: 0;
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

.gd-faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--spring) var(--ease-spring), content-visibility var(--spring) allow-discrete;
}

.gd-faq__item[open]::details-content {
    block-size: auto;
}

/* ------------------------------------------------------------------ */
/* What ends the page                                                  */
/* ------------------------------------------------------------------ */

.gd-closing {
    display: grid;
    gap: 1rem;
    margin-top: var(--gap-max);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.gd-closing__words {
    min-width: 0;
}

.gd-closing__title,
.gd-closing__text {
    margin: 0;
    color: inherit;
    overflow-wrap: anywhere;
}

.gd-closing__title {
    margin-bottom: 0.5rem;
}

.gd-closing .gd-btn--filled {
    background: var(--md-on-primary);
    color: var(--md-primary);
    justify-self: start;
}

.gd-closing .gd-btn--filled:hover {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

/* ------------------------------------------------------------------ */
/* Contrast and print                                                  */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
    .gd-hero,
    .gd-toc,
    .gd-find,
    .gd-toc__part,
    .gd-section + .gd-section,
    .gd-code__frame,
    .gd-code__bar,
    .gd-table table,
    .gd-table thead th,
    .gd-table tbody tr + tr > *,
    .gd-terms,
    .gd-terms__row + .gd-terms__row,
    .gd-note,
    .gd-flow,
    .gd-flow__end,
    .gd-faq__item + .gd-faq__item {
        border-color: var(--md-outline);
    }

    .gd-step:not(:last-child)::after,
    .gd-flow__node:not(:last-child)::after {
        background: var(--md-outline);
    }
}

/* on paper the page is the guide: no column at the side, no trail, no buttons, the hero without its band */
@media print {
    .gd-aside,
    .gd-crumbs,
    .gd-actions,
    .gd-code__copy {
        display: none;
    }

    .gd-hero {
        background: none;
    }

    .gd-layout {
        display: block;
    }

    .gd-section__title,
    .gd-sub,
    .gd-step__title {
        break-after: avoid;
    }

    .gd-note,
    .gd-flow,
    .gd-table tr,
    .gd-terms__row {
        break-inside: avoid;
    }

    .gd-closing {
        background: none;
        color: inherit;
        border: 1px solid var(--md-outline);
    }
}

/* ------------------------------------------------------------------ */
/* From 40rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 40rem) {
    .gd-hero {
        padding-bottom: 2rem;
    }

    /* the body stands beside the number, and a line joins one step to the next */
    .gd-step {
        padding-left: 3rem;
    }

    .gd-step__title {
        padding-left: 0;
    }

    .gd-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 2.375rem;
        bottom: calc(0.375rem - var(--gap-max));
        left: calc(1rem - 1px);
        width: 2px;
        background: var(--md-outline-variant);
    }

    .gd-terms__row {
        grid-template-columns: 13rem minmax(0, 1fr);
        align-items: baseline;
    }

    .gd-flow__ends {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gd-closing {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 1.5rem 2rem;
    }

    .gd-closing .gd-btn--filled {
        justify-self: end;
    }
}

/* ------------------------------------------------------------------ */
/* From 64rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 64rem) {
    .gd-layout,
    .gd-layout.is-ready {
        display: grid;
        grid-template-columns: 16rem minmax(0, 60rem);
        align-items: start;
    }

    .gd-layout.is-ready > .gd-article {
        margin-top: 0;
    }

    /* the column stays in view while the guide goes by, under the top bar, and scrolls inside itself where the window is too short */
    .gd-aside,
    .gd-aside.is-ready {
        position: sticky;
        top: calc(var(--top-bar-h) + 1.25rem);
        z-index: auto;
        max-height: calc(100dvh - var(--top-bar-h) - 2.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .gd-toc,
    .gd-toc.is-ready {
        --gd-row: 2.25rem;
        padding: 0;
        border: 0;
        background: none;
    }

    .gd-toc.is-ready .gd-toc__bar {
        display: none;
    }

    .gd-toc.is-ready .gd-toc__progress {
        position: static;
        margin: 0 0 0.75rem;
    }

    .gd-toc.is-ready .gd-toc__body {
        display: block;
        position: static;
        max-height: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    .gd-toc__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .gd-flow__ends {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) and (max-width: 72rem) {
    .gd-flow__ends {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* from 80rem the guide's column is as wide as its tables and code like */
@media (min-width: 80rem) {
    .gd-layout,
    .gd-layout.is-ready {
        grid-template-columns: 18rem minmax(0, 60rem);
    }
}