/* ==========================================================================
   CREOSON function reference (functions.html)
   --------------------------------------------------------------------------
   This page used to run on Bootstrap 4 + theme.css + select2 + Prism, which is
   a different design system to the rest of the site. It now uses creoson.css /
   public.css like index.html, and this file covers the three things unique to
   it:

     1. the searchable function picker
     2. the spec tables generated by assets/creoson_stuff/creson_helpDocTable.js
     3. the Nitro promo banner emitted by assets/js/nitro-promos.js

   For (2) and (3) the markup is produced by JS we are not rewriting, so the
   selectors below match the class names those scripts already emit. The
   Bootstrap utility classes they also emit (.table, .table-sm, .d-none,
   .d-md-table ...) are intentionally left undefined - undefined means the
   tables simply render as tables, instead of being hidden on small screens
   the way the old Bootstrap build had them.

   .is-hidden comes from public.css.
   ========================================================================== */

/* ---------- Function picker ---------------------------------------------- */
.fnref-picker {
    max-width: 34rem;
    margin: 1.1rem auto 0;
    text-align: left;
}

.fnref-picker__hint {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-faint);
    text-align: center;
}

.fnref-combo {
    position: relative;
}

.fnref-combo__icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    color: var(--text-faint);
    pointer-events: none;
}

.fnref-field {
    width: 100%;
    /* Room for the search icon on the left and the clear button on the right */
    padding: 0.7rem 2.5rem 0.7rem 2.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease);
}

.fnref-field::placeholder {
    color: var(--text-faint);
}

.fnref-field:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

.fnref-combo__clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: -0.875rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--text-faint);
    cursor: pointer;
    transition: background var(--speed) var(--ease),
        color var(--speed) var(--ease);
}

.fnref-combo__clear:hover {
    background: var(--bg-inset);
    color: var(--text);
}

.fnref-combo__clear svg {
    width: 0.875rem;
    height: 0.875rem;
}

.fnref-combo__list {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 40;
    margin-top: 0.3rem;
    max-height: 20rem;
    overflow-y: auto;
    padding-block: 0.3rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

/* Command-group heading inside the list, e.g. "file" */
.fnref-combo__group {
    padding: 0.5rem 0.9rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.fnref-combo__group + .fnref-combo__group {
    display: none;
}

.fnref-combo__option {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
    transition: background var(--speed) var(--ease);
}

.fnref-combo__option:hover,
.fnref-combo__option.is-active {
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}

.fnref-combo__option[aria-selected="true"] {
    font-weight: 600;
}

.fnref-combo__cmd {
    flex: none;
    color: var(--text-faint);
}

.fnref-combo__empty {
    padding: 0.6rem 0.9rem;
    font-size: 0.9375rem;
    color: var(--text-faint);
}

/* ---------- Result area -------------------------------------------------- */
.fnref-status {
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.fnref-error {
    color: var(--brand);
}

/* ---------- Generated spec tables ---------------------------------------
   Emitted by creson_helpDocTable.js as
   <table class="creosonHelpTable table table-sm table-bordered d-none d-md-table">
   Styling mirrors .prose table in creoson.css so the reference reads like the
   rest of the site's documentation. */
.creosonHelpTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.creosonHelpTable th,
.creosonHelpTable td {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    color: var(--text-muted);
}

/* Column headers (name / type / description / default ...) */
.creosonHelpTable th,
.creosonHelpTable .theme-bg-helptables {
    background: var(--bg-inset);
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

/* Row labels in the overview table (Description / Command / Function) */
.creosonHelpTable .theme-bg-helptables-commands {
    width: 24%;
    background: var(--bg-alt);
    color: var(--text);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Section title row: "Request", "Response", "Special Notes", "Properties" */
.creosonHelpTable .theme-bg-helptables-title {
    background: var(--code-header-bg);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Request and response pick up the same orange/green language the code windows
   use on this page and on the home page, so the table above an example reads
   as belonging to it. Applied by functions.js from the cell's text. */
.creosonHelpTable .theme-bg-helptables-title.is-request {
    background: linear-gradient(90deg, var(--req), var(--req-dark));
}

.creosonHelpTable .theme-bg-helptables-title.is-response {
    background: linear-gradient(90deg, var(--res), var(--res-dark));
}

/* creson_helpDocTable.js puts these Bootstrap utilities on individual cells.
   Defined here so dropping Bootstrap does not change the intended alignment. */
.creosonHelpTable .text-right {
    text-align: right;
}

.creosonHelpTable .text-left {
    text-align: left;
}

/* First column of a wide table holds the parameter name - keep it intact and
   monospaced, since these are identifiers. */
.creosonHelpTable tbody td:first-child {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text);
    white-space: nowrap;
}

/* ...except in the overview table, whose first column is a label, not an
   identifier. */
.creosonHelpTable tbody td.theme-bg-helptables-commands {
    font-family: var(--font-body);
    font-size: 0.9375rem;
}

/* The notes table is a single free-text column, so it must wrap. */
.creosonHelpTable tbody td.text-left:first-child {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    white-space: normal;
    color: var(--text-muted);
}

/* Wide tables (request/response have up to 6 columns) scroll rather than
   overflow. functions.js wraps each generated table in this. */
.fnref-tablewrap {
    max-width: 100%;
    overflow-x: auto;
}

/* ---------- Examples ----------------------------------------------------- */
.fnref-example {
    margin-top: 2rem;
}

.fnref-example__title {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-muted);
}

/* Request card, arrow, response card. The arrow column is auto-width so the two
   cards share the remaining space evenly; minmax(0, 1fr) rather than 1fr so a
   long JSON line scrolls inside its own <pre> instead of widening the column.
   align-items: stretch (the default) is what keeps both cards the same height,
   so the arrow is centred by its own flexbox rather than by the grid. */
.fnref-example__flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
}

/* Each card must become a flex column so its .code-block can stretch to the
   full height the grid row gives it. */
.fnref-example__flow > .code-window {
    display: flex;
    flex-direction: column;
}

/* The card frame now lives on the .code-window wrapper, so the ring and radius
   .code-block carries for the stacked hero window on index.html would double
   up here. Drop them and let the block fill the card. */
.fnref-example__flow .code-block {
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
}

/* Fill the row height so the shorter payload still reads as a full card, and
   cap very long ones. */
.fnref-example__flow .code-block pre {
    flex: 1 1 auto;
    max-height: 26rem;
}

.fnref-example__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.fnref-example__arrow svg {
    width: 2.25rem;
    height: 2.25rem;
}

/* Two columns of JSON stop being readable well before the site's other
   breakpoints, so stack request above response early and turn the arrow to
   point down the new reading order. */
@media (max-width: 900px) {
    .fnref-example__flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }
    .fnref-example__arrow svg {
        transform: rotate(90deg);
    }
}

.fnref-objdesc {
    max-width: 70ch;
    margin-bottom: 1.25rem;
    color: var(--text-muted);
}

/* ---------- Nitro promo banner -------------------------------------------
   Emitted by assets/js/nitro-promos.js as
   .nitro-promo-banner > .nitro-promo-label + .nitro-promo-item*
   Previously styled in modern.css with hardcoded colours (#fdf0ef, #e74c3c,
   #098dcf) that did not match the brand palette; rebuilt on the tokens. */
.nitro-promo-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--brand) 6%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
    border-radius: var(--radius-sm);
}

.nitro-promo-banner .nitro-promo-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--brand);
    white-space: nowrap;
}

.nitro-promo-banner .nitro-promo-label svg {
    width: 0.875rem;
    height: 0.875rem;
}

.nitro-promo-banner .nitro-promo-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-muted);
    transition: border-color var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease), color var(--speed) var(--ease);
}

.nitro-promo-banner .nitro-promo-item:hover {
    border-color: var(--accent);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.nitro-promo-banner .nitro-promo-item img {
    height: 18px;
    width: auto;
    flex: none;
}

@media (max-width: 760px) {
    .nitro-promo-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .nitro-promo-banner .nitro-promo-item {
        width: 100%;
    }
}