.bt { max-width: 800px; }
.bt-set-picker { margin: .7rem 0; color: var(--bh-ink); font-size: .9rem; }
.bt-set-picker summary { cursor: pointer; width: fit-content; text-underline-offset: .2em; }
.bt-set-picker summary:hover { text-decoration: underline; }
.bt-set-picker p { max-width: 65ch; color: var(--bh-muted); margin: .7rem 0; }
.bt-set-picker ol { list-style: none; padding: 0; margin: 0; }
.bt-set-picker li { border-bottom: 1px solid var(--bh-line); }
.bt-set-picker a { display: block; padding: .65rem 0; color: var(--bh-accent); text-underline-offset: .2em; overflow-wrap: anywhere; }
.bt-set-picker a[aria-current="page"] { color: var(--bh-ink); font-weight: 700; }
.bt-instruction { color: var(--bh-muted); font-size: .9rem; margin: .7rem 0 1rem; }
.bt-bridges { display: grid; gap: .65rem; }
.bt-bridge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 1.15fr) minmax(0, 1fr); align-items: center; gap: 1rem; }
.bt-endpoint { font-size: 1.15rem; font-weight: 680; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
.bt[data-language="de"] .bt-endpoint { hyphens: auto; }
.bt-gap { position: relative; display: flex; justify-content: center; align-items: center; gap: .5rem; min-height: 58px; width: 100%; padding: .7rem; border: 1px dashed #789393; border-radius: 12px; background: #fff; color: var(--bh-muted); }
.bt-gap::before, .bt-gap::after { content: ""; position: absolute; width: 1rem; height: 1px; background: var(--bh-line); top: 50%; }
.bt-gap::before { right: 100%; }
.bt-gap::after { left: 100%; }
.bt-gap[aria-pressed="true"] { border-style: solid; border-color: var(--bh-accent); background: var(--bh-selected); color: #085c55; }
.bt-gap.has-word { border-style: solid; font-weight: 700; color: var(--bh-ink); }
.bt-gap:disabled { cursor: default; background: var(--bh-selected); color: #085c55; border-style: solid; border-color: var(--bh-accent); }
.bt-gap-word { overflow-wrap: anywhere; }
.bt-gap i { font-size: .8rem; }
.bt-bank-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 1.4rem 0 .6rem; }
.bt-bank-heading h2 { margin: 0; font-size: .9rem; font-weight: 700; }
.bt-bank-heading > span { color: var(--bh-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.bt-bank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.bt-word { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 62px; padding: .6rem; background: #fff; color: var(--bh-ink); border: 1px solid var(--bh-line); border-radius: 12px; font-weight: 650 !important; overflow-wrap: anywhere; }
.bt-word small { display: none; font-size: .7rem; font-weight: 450; color: #305e59; }
.bt-word.is-placed { background: #edf5f2; border-color: #8eb7ac; color: #085c55; }
.bt-word.is-placed small { display: block; }
.bt-word:disabled { cursor: default; }
.bt-word:disabled:not(.is-placed) { color: var(--bh-muted); background: #f5f7f7; }
.bt-actions { margin: 1rem 0 .3rem; }
.bt-actions .bh-text-button { min-width: 76px; }
.bt-support { display: flex; justify-content: space-between; align-items: center; gap: .7rem; }
.bt-support .bh-secondary { font-size: .85rem; }
.bt-support .bh-secondary:disabled, .bt-actions .bh-text-button:disabled { color: #667775; cursor: default; }
.bt-feedback { min-height: 2.5em; }
.bt-feedback.is-check { color: #775019; }
.bt-summary { color: var(--bh-muted); font-variant-numeric: tabular-nums; }
.bt-resolution { max-width: 65ch; line-height: 1.6; }
.bt-rating { margin-top: 1.25rem !important; padding-top: 1.25rem !important; border-top: 1px solid var(--bh-line) !important; }
.bt-rating legend { text-align: left; font-size: .9rem; margin-bottom: .6rem; float: none; width: auto; }
.bt-rating > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.bt-rating button { font-size: .85rem; }
.bt-rating button[aria-pressed="true"] { background: var(--bh-selected); border-color: var(--bh-accent); color: #085c55; }
@media (hover: hover) {
    .bt-gap:not(:disabled):hover, .bt-word:not(:disabled):hover { background: #edf6f3; border-color: var(--bh-accent); }
}
@media (min-width: 541px) and (max-height: 800px) {
    .bt { margin-top: .75rem; }
    .bt .bh-modes { margin-top: .6rem; }
    .bt .bh-topline { margin: .2rem 0; }
    .bt-instruction { margin: .3rem 0 .6rem; }
    .bt-bridges { gap: .5rem; }
    .bt-gap { min-height: 50px; }
    .bt-bank-heading { margin-top: .85rem; }
    .bt-word { min-height: 54px; }
    .bt-actions { margin-top: .8rem; }
}
@media (max-width: 540px) {
    .bt .bh-header { gap: .5rem; }
    .bt .bh-header h1 { font-size: 1.5rem; }
    .bt .bh-header p { font-size: .8rem; }
    .bt .bh-modes a { padding: .5rem .55rem; font-size: .9rem; }
    .bt .bh-modes > span { max-width: 30%; }
    .bt-instruction { margin: .4rem 0 .7rem; font-size: .82rem; }
    .bt-bridge { grid-template-columns: minmax(0, 1fr) minmax(112px, 1.2fr) minmax(0, 1fr); gap: .6rem; }
    .bt-endpoint { font-size: .95rem; }
    .bt-gap { min-height: 54px; padding: .45rem; font-size: .87rem; }
    .bt-gap::before, .bt-gap::after { width: .6rem; }
    .bt-bank-heading { margin-top: 1rem; }
    .bt-bank { gap: .5rem; }
    .bt-word { min-height: 57px; font-size: .9rem !important; padding: .4rem; }
    .bt-support .bh-secondary { padding: .6rem; font-size: .8rem; }
    .bt-support .bh-text-button { font-size: .85rem; }
}