/*
    Hands the configurator widget the site's own colors.

    The widget is deliberately self-contained and themeable: everything it draws reads from five
    CSS custom properties, with its own defaults as var() fallbacks. The C1 embed control sets
    only --bxc-accent, so on our pages the widget was drawing its text in its default #222222
    while the site sets #000000 - close enough to look like a mistake rather than a choice, which
    is the worst kind of near-miss.

    Setting the properties here rather than in the widget keeps the widget neutral for everyone
    else who embeds it: the Axion page is a standalone HTML file that never loads this stylesheet
    and keeps its own red accent and defaults.

    Scoped to .bxc, the widget's own root class, so this file does nothing on pages without it.
*/

.bxc {
    --bxc-text: #000000;      /* the site's body color; the widget defaults to #222222 */
    --bxc-muted: #777777;     /* same value the theme uses for .text-muted */
    --bxc-border: #dddddd;    /* the theme's border grey, rather than the widget's #cccccc */
    --bxc-bg: #ffffff;
}

/*
    The widget sets line-height 1.4 for its own compact form layout, against the site's 1.8. That
    is left alone on purpose - 1.8 through a dense grid of inputs and labels spaces the controls
    so far apart that the groups stop reading as groups. Prose spacing and form spacing are
    different problems and the widget is right about its own.

    The section descriptions are the exception. They are the only real PROSE the widget puts on
    the page - full sentences, sitting where our own body copy would sit - and the widget styles
    them as it styles its field hints: 0.85em in muted grey. Next to 18px black body text that
    does not read as a quieter register, it reads as a different website. They are set in the
    site's own text color and size here, and only here: field labels, table headers and the
    supporting pixel-rate line stay muted, because those genuinely are secondary.
*/
.bxc .bxc-hint {
    color: var(--bxc-text, #000000);
    font-size: 1em;
    line-height: 1.6;
}

.bxc .bxc-bandwidth {
    line-height: 1.6;
}

/* The section titles are headings and should carry the weight of one. */
.bxc .bxc-sectiontitle {
    font-size: 1.25em;
}

.bxc .bxc-label {
    font-size: 1.05em;
}