/* Per-topic settings reference, rendered as a replica of the Behnke-Station
   web configuration screen. Markup emitted by ManualSettingsExtractor.php
   (EINSTELLUNGEN_*.md). */

/* Topic panel: groups many settings into one continuous form. */
.bs-config {
    background: var(--behnke-medium-black, #374151);
    border-radius: 5px;
    padding: calc(0.5 * var(--behnke-basic)) calc(2 * var(--behnke-basic));
    margin-top: var(--behnke-basic);
}

/* One setting = a two-column grid: right-aligned label | control.
   Help text / callouts flow into the control column underneath.
   Self-contained (own dark panel) so a single setting placeholder embedded
   on any page still looks right; the topic panel flattens them (below). */
.bs-config__item {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    align-items: center;
    column-gap: calc(2 * var(--behnke-basic));
    row-gap: calc(0.5 * var(--behnke-basic));
    background: var(--behnke-medium-black, #374151);
    border-radius: 5px;
    padding: calc(1.1 * var(--behnke-basic)) calc(1.5 * var(--behnke-basic));
    margin-top: var(--behnke-basic);
}

/* Inside a topic panel: drop the per-item panel and run them together as
   divider-separated rows. */
.bs-config .bs-config__item {
    background: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
}

.bs-config .bs-config__item + .bs-config__item {
    border-top: 1px solid var(--bs-config-divider, rgba(255, 255, 255, 0.12));
}

.bs-config__label {
    grid-column: 1;
    text-align: right;
    color: var(--bs-config-label, #e3e8ee);
    font-size: var(--behnke-normal-font-size, 0.95rem);
    line-height: 1.4;
}

.bs-config__label::after {
    content: ":";
}

.bs-config__control {
    grid-column: 2;
    min-width: 0;
}

/* Native-looking, non-editable controls — they document the device, they
   don't drive it (hence disabled/readonly), but they must still read as the
   real white form fields, not greyed-out ghosts. */
.bs-config__select,
.bs-config__input {
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
    padding: calc(0.5 * var(--behnke-basic)) calc(0.75 * var(--behnke-basic));
    border: 1px solid var(--bs-config-control-border, #8c9096);
    border-radius: 3px;
    background-color: #fff;
    color: #1c2733;
    font-size: var(--behnke-normal-font-size, 0.95rem);
    font-family: inherit;
    line-height: 1.4;
    opacity: 1; /* override the browser's disabled dimming */
    cursor: default;
}

/* Custom chevron so the dropdown looks like a real select across browsers. */
.bs-config__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: calc(2.5 * var(--behnke-basic));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23596570'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(0.75 * var(--behnke-basic)) center;
}

.bs-config__select:disabled {
    color: #1c2733;          /* keep selected value crisp, not greyed */
    -webkit-text-fill-color: #1c2733;
}

.bs-config__input::placeholder {
    color: var(--bs-config-placeholder, #9aa0a6);
    font-style: italic;
}

/* Help text + callouts under the control, aligned to the control column. */
.bs-config__item > p,
.bs-config__item > blockquote,
.bs-config__item > .wiki-alert {
    grid-column: 2 / 3;
    margin: 0;
    font-size: var(--behnke-small-font-size, 0.85rem);
    color: var(--bs-config-help, #c3ccd6);
    line-height: 1.5;
}

.bs-config__item > .wiki-alert {
    color: inherit;
    margin-top: calc(0.5 * var(--behnke-basic));
}

/* Stack on narrow screens, mirroring the device's responsive form. */
@media (max-width: 640px) {
    .bs-config__item {
        grid-template-columns: 1fr;
        row-gap: calc(0.4 * var(--behnke-basic));
    }
    .bs-config__label {
        grid-column: 1;
        text-align: left;
        font-weight: 600;
    }
    .bs-config__control,
    .bs-config__item > p,
    .bs-config__item > blockquote,
    .bs-config__item > .wiki-alert {
        grid-column: 1;
    }
    .bs-config__select,
    .bs-config__input {
        max-width: none;
    }
}