/* =============================================================================
   BsApiTools.css — the three Behnke-Station tools embedded in wiki pages.

   These are instruments, not prose: they sit inside an article but must read as
   a device panel, so they get their own framed surface and a monospace face
   wherever the content is a command, a URL or an event.
   ============================================================================= */

.bs-tool {
    margin: calc(1.5 * var(--behnke-basic)) 0;
    border: 1px solid #dbe2ea;
    border-radius: calc(0.5 * var(--behnke-basic));
    background: #fbfcfd;
    overflow: hidden;
}

.bs-tool__title {
    margin: 0;
    padding: calc(0.7 * var(--behnke-basic)) var(--behnke-basic);
    border-bottom: 1px solid #dbe2ea;
    background: #f2f5f8;
    font-size: calc(0.95 * var(--behnke-normal-font-size));
    font-weight: 600;
    color: var(--behnke-black, #1f2937);
}

.bs-tool__connect,
.bs-tool__body {
    padding: var(--behnke-basic);
    display: flex;
    flex-direction: column;
    gap: calc(0.7 * var(--behnke-basic));
}

.bs-tool__connect {
    border-bottom: 1px solid #e6ebf0;
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(0.6 * var(--behnke-basic));
}

@media (min-width: 45rem) {
    .bs-tool__connect {
        grid-template-columns: 2fr 0.7fr 2fr;
        align-items: end;
    }
    /* The guided steps, the hint and the status each own a full row. */
    .bs-tool__steps,
    .bs-tool__connect .bs-hint,
    .bs-tool__connect .bs-status { grid-column: 1 / -1; }
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

.bs-field {
    display: flex;
    flex-direction: column;
    gap: calc(0.2 * var(--behnke-basic));
    min-width: 0;
}

.bs-field label,
.bs-tool .bs-toggle {
    font-size: 0.76rem;
    font-weight: 600;
    color: #4b5563;
}

.bs-field input,
.bs-field select {
    padding: calc(0.35 * var(--behnke-basic)) calc(0.5 * var(--behnke-basic));
    border: 1px solid #cfd8e3;
    border-radius: calc(0.25 * var(--behnke-basic));
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: #1f2937;
    min-width: 0;
}

.bs-field input:focus-visible,
.bs-field select:focus-visible {
    outline: 2px solid var(--behnke-design, #0066cc);
    outline-offset: 1px;
}

.bs-field--wide { grid-column: 1 / -1; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.bs-tool__steps,
.bs-run-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.5 * var(--behnke-basic));
}

.bs-tool .bs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: calc(0.35 * var(--behnke-basic)) calc(0.8 * var(--behnke-basic));
    border: 1px solid var(--behnke-design, #0066cc);
    border-radius: calc(0.25 * var(--behnke-basic));
    background: var(--behnke-design, #0066cc);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.bs-tool .bs-btn--ghost {
    background: #fff;
    color: var(--behnke-design, #0066cc);
}

.bs-tool .bs-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.bs-tool .bs-btn:not(:disabled):hover {
    filter: brightness(0.95);
}

/* Step number in front of the guided actions. */
.bs-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1.35em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-size: 0.78em;
}

.bs-btn--ghost .bs-step {
    background: color-mix(in srgb, var(--behnke-design, #0066cc) 14%, #ffffff);
}

/* ── Presets and filters ─────────────────────────────────────────────────── */

.bs-presets,
.bs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.35 * var(--behnke-basic));
}

.bs-tool .bs-chip {
    padding: calc(0.2 * var(--behnke-basic)) calc(0.55 * var(--behnke-basic));
    border: 1px solid #cfd8e3;
    border-radius: 999px;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: #33475b;
    cursor: pointer;
}

.bs-tool .bs-chip:hover {
    border-color: var(--behnke-design, #0066cc);
    color: var(--behnke-design, #0066cc);
}

.bs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    cursor: pointer;
}

/* ── URL row ─────────────────────────────────────────────────────────────── */

.bs-url-row {
    display: flex;
    align-items: center;
    gap: calc(0.5 * var(--behnke-basic));
    min-width: 0;
}

.bs-tool .bs-url {
    flex: 1;
    min-width: 0;
    padding: calc(0.3 * var(--behnke-basic)) calc(0.5 * var(--behnke-basic));
    border: 1px dashed #cfd8e3;
    border-radius: calc(0.25 * var(--behnke-basic));
    background: #f6f8fa;
    font-size: 0.76rem;
    color: #33475b;
    overflow-x: auto;
    white-space: nowrap;
}

/* ── Hints and status ────────────────────────────────────────────────────── */

.bs-tool .bs-hint {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: #6b7280;
}

.bs-status {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4b5563;
    min-height: 1.2em;
}

.bs-status--ok    { color: #15803d; }
.bs-status--warn  { color: #b45309; }
.bs-status--error { color: #b91c1c; }

/* ── Result ──────────────────────────────────────────────────────────────── */

.bs-result {
    border: 1px solid #dbe2ea;
    border-radius: calc(0.25 * var(--behnke-basic));
    overflow: hidden;
}

.bs-result__status {
    padding: calc(0.35 * var(--behnke-basic)) calc(0.6 * var(--behnke-basic));
    background: #eef2f6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #33475b;
}

.bs-result__status--ok    { background: #e7f6ec; color: #15803d; }
.bs-result__status--warn  { background: #fdf6e3; color: #8a6100; }
.bs-result__status--error { background: #fdecec; color: #b91c1c; }

.bs-tool .bs-result__body {
    margin: 0;
    padding: calc(0.5 * var(--behnke-basic)) calc(0.6 * var(--behnke-basic));
    max-height: 22rem;
    background: #fff;
    border: 0;
    border-radius: 0;
    font-size: 0.76rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow: auto;
}

/* ── Device panel (builder) ──────────────────────────────────────────────── */

.bs-device {
    padding: calc(0.6 * var(--behnke-basic));
    border: 1px solid #dbe2ea;
    border-radius: calc(0.25 * var(--behnke-basic));
    background: #fff;
}

.bs-device h4 {
    margin: 0 0 calc(0.4 * var(--behnke-basic));
    font-size: 0.8rem;
    font-weight: 600;
}

.bs-device__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15em 0.8em;
    margin: 0;
    font-size: 0.76rem;
}

.bs-device__list dt { color: #6b7280; }
.bs-device__list dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #1f2937;
    overflow-wrap: anywhere;
}

/* ── Picker columns ──────────────────────────────────────────────────────── */

/* Section → option → detail, read left to right. Each column scrolls on its
   own so a station with hundreds of options does not push the URL and the run
   buttons off the screen. */
.bs-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(0.6 * var(--behnke-basic));
}

@media (min-width: 52rem) {
    .bs-picker { grid-template-columns: 0.8fr 1.2fr 1fr; align-items: start; }
}

.bs-col {
    display: flex;
    flex-direction: column;
    gap: calc(0.3 * var(--behnke-basic));
    min-width: 0;
}

.bs-col__head {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.bs-tool .bs-filter {
    padding: calc(0.3 * var(--behnke-basic)) calc(0.45 * var(--behnke-basic));
    border: 1px solid #cfd8e3;
    border-radius: calc(0.25 * var(--behnke-basic));
    font-size: 0.78rem;
}

.bs-tool .bs-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid #dbe2ea;
    border-radius: calc(0.25 * var(--behnke-basic));
    background: #fff;
}

.bs-list__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6em;
    padding: calc(0.28 * var(--behnke-basic)) calc(0.5 * var(--behnke-basic));
    border-bottom: 1px solid #f0f3f6;
    font-size: 0.77rem;
    cursor: pointer;
}

.bs-list__item:last-child { border-bottom: 0; }
.bs-list__item:hover      { background: #f2f7fc; }

.bs-list__item.is-active {
    background: color-mix(in srgb, var(--behnke-design, #0066cc) 10%, #ffffff);
    box-shadow: inset 3px 0 0 var(--behnke-design, #0066cc);
}

.bs-list__item:focus-visible {
    outline: 2px solid var(--behnke-design, #0066cc);
    outline-offset: -2px;
}

.bs-list__name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

/* The option's current value, shown right of its name — the single most useful
   thing to see while choosing. */
.bs-list__hint {
    flex-shrink: 0;
    max-width: 45%;
    color: #6b7280;
    font-size: 0.94em;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-list__empty {
    padding: calc(0.4 * var(--behnke-basic)) calc(0.5 * var(--behnke-basic));
    color: #9ca3af;
    font-size: 0.76rem;
    font-style: italic;
}

.bs-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2em 0.7em;
    margin: 0;
    font-size: 0.77rem;
}

.bs-detail dt { color: #6b7280; }
.bs-detail dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #1f2937;
    overflow-wrap: anywhere;
}

/* ── Raw responses ───────────────────────────────────────────────────────── */

.bs-raw summary {
    font-size: 0.76rem;
    color: #6b7280;
    cursor: pointer;
}

.bs-tool .bs-raw__body {
    margin: calc(0.3 * var(--behnke-basic)) 0 0;
    padding: calc(0.4 * var(--behnke-basic));
    max-height: 14rem;
    border: 1px solid #dbe2ea;
    border-radius: calc(0.25 * var(--behnke-basic));
    background: #f6f8fa;
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow: auto;
}

/* ── SSE console ─────────────────────────────────────────────────────────── */

.bs-tool .bs-console {
    margin: 0;
    padding: calc(0.5 * var(--behnke-basic)) calc(0.6 * var(--behnke-basic));
    height: 18rem;
    border: 1px solid #26303b;
    border-radius: calc(0.25 * var(--behnke-basic));
    /* The one dark surface in the article, because a live event log is read
       like a terminal and the eye needs the lines to stand apart. */
    background: #131a22;
    color: #cbd5e1;
    font-size: 0.74rem;
    line-height: 1.6;
    white-space: pre;
    overflow: auto;
}

.bs-console__line { display: block; }
.bs-console__line--welcome   { color: #7dd3a0; }
.bs-console__line--keepalive { color: #64748b; }
.bs-console__line--bye       { color: #fbbf24; }
.bs-console__line--error     { color: #fca5a5; }

.bs-sse-count {
    font-size: 0.76rem;
    color: #6b7280;
}

/* A live instrument is meaningless on paper. */
@media print {
    .bs-tool { display: none; }
}