/* Hosted Fields tokenization flow — an embeddable widget.

   Every selector is scoped to .hf-flow and every element carries its own hf- class: the widget is
   dropped into someone else's page, where a bare `pre` or `code` selector would fight the host
   theme over specificity. For the same reason the colour tokens are declared on the root of the
   widget, not on :root — names like --card or --line are exactly what a page theme declares for
   itself, and an inherited token would repaint the widget silently.

   The dark palette is picked up two ways: from the host theme, which marks the document with
   class="dark" or data-color-mode="dark", and from the system preference, for the demo page that
   lives outside the docs. */

.hf-flow {
    --hf-panel     : #ffffff;
    --hf-ink       : #1f2937;
    --hf-ink-dim   : #6b7280;
    --hf-line      : #d7dde5;

    /* cargo colours: what travels along the arrow */
    --hf-plain     : #2563eb;
    --hf-card      : #dc2626;
    --hf-ephemeral : #d97706;
    --hf-payment   : #059669;

    /* the code block stays dark in both themes, so its highlight shades are fixed */
    --hf-code-bg   : #0f172a;
    --hf-code-ink  : #e2e8f0;
    --hf-hl-card   : #fecaca;
    --hf-hl-ephemeral: #fde68a;
    --hf-hl-payment: #a7f3d0;
    --hf-hl-auth   : #93c5fd;

    --hf-node      : #ffffff;
    --hf-node-outer: #fbfcfd;
    --hf-node-hf   : #fdf7ee;
    --hf-note-bg   : #f1f5f9;
    --hf-plain-bg  : #f1f3f6;
    --hf-on-cargo  : #ffffff;
    --hf-btn-hover : #9aa4b2;
    --hf-visited   : #b6c0cc;

    /* halo behind svg labels: the colour of whatever they lie on */
    --hf-halo      : #ffffff;

    /* the diagram never grows taller than this; the script turns it into a width limit,
       knowing the aspect ratio of the diagram */
    --hf-diagram-height: 380px;

    display           : grid;
    grid-template-rows: auto auto auto auto auto;
    gap               : 12px;

    /* the layout is calibrated for 14px: an article that sets 1rem/1.75 must not leak in */
    color      : var(--hf-ink);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size  : 14px;
    line-height: 1.45;
    text-align : left;
}

:is(html.dark, html[data-color-mode="dark"]) .hf-flow {
    --hf-panel     : #171a1f;
    --hf-ink       : #e6e8ea;
    --hf-ink-dim   : #9aa3ad;
    --hf-line      : #333941;

    --hf-plain     : #60a5fa;
    --hf-card      : #f87171;
    --hf-ephemeral : #fbbf24;
    --hf-payment   : #34d399;

    --hf-node      : #1c2027;
    --hf-node-outer: #15181d;
    --hf-node-hf   : #24211a;
    --hf-note-bg   : #1b2027;
    --hf-plain-bg  : #20242b;
    --hf-on-cargo  : #10131a;
    --hf-btn-hover : #5b646f;
    --hf-visited   : #4a525c;
    --hf-halo      : #171a1f;
}

/* the same palette once more: a media query and a selector cannot be joined into one rule, and
   this is the only way for the widget to follow both the theme switch of the docs and the system
   preference of a page that has no switch at all — the demo page, for one */
@media (prefers-color-scheme: dark) {
    html:not(.light):not([data-color-mode="light"]) .hf-flow {
        --hf-panel     : #171a1f;
        --hf-ink       : #e6e8ea;
        --hf-ink-dim   : #9aa3ad;
        --hf-line      : #333941;

        --hf-plain     : #60a5fa;
        --hf-card      : #f87171;
        --hf-ephemeral : #fbbf24;
        --hf-payment   : #34d399;

        --hf-node      : #1c2027;
        --hf-node-outer: #15181d;
        --hf-node-hf   : #24211a;
        --hf-note-bg   : #1b2027;
        --hf-plain-bg  : #20242b;
        --hf-on-cargo  : #10131a;
        --hf-btn-hover : #5b646f;
        --hf-visited   : #4a525c;
        --hf-halo      : #171a1f;
    }
}

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

/* a grid item does not shrink below its content on its own, and the diagram card with a sideways
   scroll would then push the whole page wider */
.hf-flow > * { min-width: 0; }

/* ---------- legend ---------- */

.hf-flow .hf-legend {
    display  : flex;
    gap      : 14px;
    flex-wrap: wrap;
    color    : var(--hf-ink-dim);
    font-size: 12px;
}

.hf-flow .hf-swatch {
    display       : inline-block;
    width         : 10px;
    height        : 10px;
    margin-right  : 5px;
    border-radius : 2px;
    vertical-align: baseline;
}

.hf-flow .hf-swatch--plain     { background: var(--hf-plain); }
.hf-flow .hf-swatch--card      { background: var(--hf-card); }
.hf-flow .hf-swatch--ephemeral { background: var(--hf-ephemeral); }
.hf-flow .hf-swatch--payment   { background: var(--hf-payment); }

/* ---------- diagram ---------- */

.hf-flow .hf-diagram {
    /* the card hugs the diagram: otherwise on a wide screen the diagram drowns in empty
       margins. Its max-width, in the diagram's aspect ratio, is set by the script */
    position     : relative;
    width        : 100%;
    margin       : 0 auto;
    background   : var(--hf-panel);
    border       : 1px solid var(--hf-line);
    border-radius: 10px;
    padding      : 8px;
}

/* width leads: height follows from it by the diagram's aspect ratio and reaches
   --hf-diagram-height no sooner than the diagram has enough width. That way the card keeps no
   empty margins anywhere: neither at the sides on a wide screen nor above and below on a phone */
.hf-flow .hf-scheme {
    display  : block;
    width    : 100%;
    height   : auto;
    max-width: 100%;
}

/* below this width the diagram would shrink past reading size: it keeps a size at which the
   labels still read and the card scrolls sideways instead. overscroll-behavior keeps the swipe
   from turning into a page back */
@media (max-width: 700px) {
    .hf-flow .hf-diagram {
        overflow-x           : auto;
        overscroll-behavior-x: contain;
    }

    .hf-flow .hf-scheme {
        min-width: 720px;
        max-width: none;
    }
}

.hf-flow .hf-node        { fill: var(--hf-node); stroke: var(--hf-line); stroke-width: 1.5; }
.hf-flow .hf-node--outer { fill: var(--hf-node-outer); stroke: var(--hf-line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hf-flow .hf-node--hf    { fill: var(--hf-node-hf); }

.hf-flow .hf-n-title { font: 600 19px -apple-system, "Segoe UI", Roboto, Arial, sans-serif; fill: var(--hf-ink); }
.hf-flow .hf-n-sub   { font: 400 15px ui-monospace, "SF Mono", Menlo, Consolas, monospace; fill: var(--hf-ink-dim); }
.hf-flow .hf-n-frame { font: 600 15px -apple-system, "Segoe UI", Roboto, Arial, sans-serif; fill: var(--hf-ink-dim); letter-spacing: .3px; }

.hf-flow .hf-field-value {
    font      : 600 18px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    fill      : var(--hf-card);
    opacity   : 0;
    transition: opacity .25s;
}

.hf-flow .hf-scheme.hf-filled .hf-field-value { opacity: 1; }

/* value travelling along the arrow */
.hf-flow .hf-flow-text {
    font             : 600 17px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    fill             : var(--hf-card);
    dominant-baseline: central;
    opacity          : 0;
    paint-order      : stroke;
    stroke           : var(--hf-halo);
    stroke-width     : 3.7;
    stroke-linejoin  : round;
}

/* arrow heads: one per cargo colour, because a marker does not inherit stroke */
.hf-flow .hf-head-fill--idle      { fill: var(--hf-line); }
.hf-flow .hf-head-fill--plain     { fill: var(--hf-plain); }
.hf-flow .hf-head-fill--card      { fill: var(--hf-card); }
.hf-flow .hf-head-fill--ephemeral { fill: var(--hf-ephemeral); }
.hf-flow .hf-head-fill--payment   { fill: var(--hf-payment); }

/* arrows: dimmed by default, the active one is coloured and has a running dash */

.hf-flow .hf-arrow path {
    fill        : none;
    stroke      : var(--hf-line);
    stroke-width: 2;
    marker-end  : var(--hf-head-idle);
}

.hf-flow .hf-arrow-label {
    font           : 600 17px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    fill           : var(--hf-ink);
    opacity        : 0;
    paint-order    : stroke;
    stroke         : var(--hf-halo);
    stroke-width   : 4.4;
    stroke-linejoin: round;
}

.hf-flow .hf-arrow.hf-is-done path {
    stroke    : var(--hf-cargo);
    marker-end: var(--hf-cargo-head);
    opacity   : .35;
}

.hf-flow .hf-arrow.hf-is-active path {
    stroke          : var(--hf-cargo);
    marker-end      : var(--hf-cargo-head);
    stroke-width    : 3.5;
    stroke-dasharray: 9 6;
    animation       : hf-dash 900ms linear infinite;
}

.hf-flow .hf-arrow.hf-is-active .hf-arrow-label {
    opacity: 1;
    fill   : var(--hf-cargo);
}

@keyframes hf-dash { to { stroke-dashoffset: -30; } }

.hf-flow .hf-cargo--plain     { --hf-cargo: var(--hf-plain);     --hf-cargo-head: var(--hf-head-plain); }
.hf-flow .hf-cargo--card      { --hf-cargo: var(--hf-card);      --hf-cargo-head: var(--hf-head-card); }
.hf-flow .hf-cargo--ephemeral { --hf-cargo: var(--hf-ephemeral); --hf-cargo-head: var(--hf-head-ephemeral); }
.hf-flow .hf-cargo--payment   { --hf-cargo: var(--hf-payment);   --hf-cargo-head: var(--hf-head-payment); }

/* ---------- expand ---------- */

.hf-flow .hf-expand {
    position     : absolute;
    top          : 10px;
    right        : 10px;
    width        : 28px;
    height       : 28px;
    padding      : 0;
    border       : 1px solid var(--hf-line);
    border-radius: 6px;
    background   : var(--hf-panel);
    color        : var(--hf-ink-dim);
    font         : 600 14px/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    cursor       : pointer;
    opacity      : .55;
    transition   : opacity .15s, border-color .15s;
}

.hf-flow .hf-expand:hover,
.hf-flow .hf-expand:focus-visible { opacity: 1; border-color: var(--hf-btn-hover); }

/* the expanded widget covers the article: the diagram is limited by the column width, not by
   its own settings, and on a narrow column that is the only way to read the labels */
.hf-flow.hf-expanded {
    position  : fixed;
    inset     : 0;
    z-index   : 9999;
    /* whatever the article limited the widget to stays behind: the point of the expanded view is
       the width the column could not give */
    width     : auto;
    max-width : none;
    margin    : 0;
    padding   : 16px 20px 12px;
    overflow  : auto;
    background: var(--hf-panel);
    --hf-diagram-height: 62vh;
}

.hf-flow.hf-expanded .hf-diagram { overflow-x: visible; }
.hf-flow.hf-expanded .hf-scheme  { min-width: 0; }

/* ---------- content panel ---------- */

.hf-flow .hf-panel {
    overflow     : auto;
    background   : var(--hf-panel);
    border       : 1px solid var(--hf-line);
    border-radius: 10px;
    padding      : 14px 16px 18px;
}

.hf-flow .hf-step-head {
    display    : flex;
    align-items: baseline;
    gap        : 10px;
    flex-wrap  : wrap;
    margin     : 0 0 4px;
}

.hf-flow .hf-step-no {
    font-size  : 16px;
    font-weight: 700;
}

.hf-flow .hf-route {
    font : 600 14px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--hf-cargo, var(--hf-ink));
}

.hf-flow .hf-chip {
    padding      : 2px 8px;
    border-radius: 999px;
    font-size    : 11px;
    font-weight  : 600;
    color        : var(--hf-on-cargo);
    background   : var(--hf-cargo, var(--hf-ink-dim));
}

.hf-flow .hf-step-title {
    margin: 2px 0 12px;
    color : var(--hf-ink-dim);
}

.hf-flow .hf-block { margin: 0 0 14px; }

.hf-flow .hf-block-h {
    margin        : 0 0 5px;
    font-size     : 12px;
    font-weight   : 600;
    color         : var(--hf-ink-dim);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* white-space is spelled out: a docs theme that sets pre-wrap would break the aligned
   comment columns in the examples */
.hf-flow .hf-code {
    margin       : 0;
    padding      : 11px 13px;
    overflow-x   : auto;
    background   : var(--hf-code-bg);
    color        : var(--hf-code-ink);
    border-radius: 8px;
    font         : 400 12.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space  : pre;
    tab-size     : 4;
}

.hf-flow .hf-code--plain {
    background: var(--hf-plain-bg);
    color     : var(--hf-ink);
}

.hf-flow .hf-note {
    margin       : 0;
    padding      : 10px 13px;
    background   : var(--hf-note-bg);
    border-left  : 3px solid var(--hf-cargo, var(--hf-plain));
    border-radius: 0 6px 6px 0;
    line-height  : 1.5;
    color        : var(--hf-ink);
}

.hf-flow .hf-note code {
    padding    : 0;
    background : none;
    border     : 0;
    color      : inherit;
    font       : 400 12.5px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* cargo highlighting inside code */

/* on a light background the saturated cargo colour reads best, on the dark code block — a light shade */
.hf-flow .hf-code--plain .hf-hl--card,      .hf-flow .hf-note .hf-hl--card,      .hf-flow .hf-step-title .hf-hl--card      { color: var(--hf-card); }
.hf-flow .hf-code--plain .hf-hl--ephemeral, .hf-flow .hf-note .hf-hl--ephemeral, .hf-flow .hf-step-title .hf-hl--ephemeral { color: var(--hf-ephemeral); }
.hf-flow .hf-code--plain .hf-hl--payment,   .hf-flow .hf-note .hf-hl--payment,   .hf-flow .hf-step-title .hf-hl--payment   { color: var(--hf-payment); }

.hf-flow .hf-hl--card      { color: var(--hf-hl-card); }
.hf-flow .hf-hl--ephemeral { color: var(--hf-hl-ephemeral); }
.hf-flow .hf-hl--payment   { color: var(--hf-hl-payment); }
.hf-flow .hf-hl--auth      { color: var(--hf-hl-auth); }

/* ---------- step switcher ---------- */

.hf-flow .hf-stepper {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 6px;
    flex-wrap      : wrap;
}

.hf-flow .hf-tabs {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 6px;
    flex-wrap      : wrap;
}

.hf-flow .hf-btn {
    min-width    : 40px;
    height       : 34px;
    padding      : 0 10px;
    border       : 1px solid var(--hf-line);
    border-radius: 8px;
    background   : var(--hf-panel);
    color        : var(--hf-ink);
    font         : 600 14px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    cursor       : pointer;
}

.hf-flow .hf-btn:hover:not(:disabled) { border-color: var(--hf-btn-hover); }

.hf-flow .hf-btn:disabled {
    opacity: .4;
    cursor : default;
}

.hf-flow .hf-btn.hf-current {
    border-color: transparent;
    background  : var(--hf-ink);
    color       : var(--hf-panel);
}

.hf-flow .hf-btn.hf-visited:not(.hf-current) { border-color: var(--hf-visited); }

.hf-flow .hf-sep {
    width     : 1px;
    height    : 22px;
    background: var(--hf-line);
    margin    : 0 4px;
}

.hf-flow .hf-hint {
    color      : var(--hf-ink-dim);
    font-size  : 11.5px;
    text-align : center;
    line-height: 1.5;
}

/* a running dash and a value sliding along a line are exactly what this asks to switch off */
@media (prefers-reduced-motion: reduce) {
    .hf-flow .hf-arrow.hf-is-active path { animation: none; }
    .hf-flow .hf-field-value             { transition: none; }
}

@media print {
    .hf-flow .hf-stepper,
    .hf-flow .hf-expand { display: none; }

    .hf-flow .hf-panel { overflow: visible; height: auto; }
}