/* The currency picker: the pill beside the avatar, and the grid of cards the
   dialog opens. partials/currency_picker.html draws it and js/currency-picker.js
   runs it; this is the third part, which was in base.html. */

/* The currency picker sits with the avatar and has to read as one of
   the small controls there, not as a call to action. */
.bt-currency-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 1px solid var(--border-color);
    border-radius: 999px; padding: 4px 11px 4px 10px;
    color: var(--text-secondary); cursor: pointer;
    font-size: .8rem; font-weight: 500; line-height: 1.4;
    transition: border-color .15s, color .15s;
}
.bt-currency-btn:hover {
    border-color: var(--accent-color); color: var(--text-primary);
}
.bt-currency-btn img {
    width: 17px; height: 17px; border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.bt-currency-code { letter-spacing: .02em; }

/* A confirm box is 420px wide; a grid of twenty cards is not. Scoped
   to this dialog so every other modal keeps the size it was built for. */
.bt-modal:has(.bt-cur-wrap) { max-width: 560px; }
.bt-cur-wrap { padding: 4px 20px 18px; }
.bt-cur-search {
    width: 100%; padding: 8px 12px; margin-bottom: 12px;
    border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: .85rem;
}
.bt-cur-search:focus {
    outline: none; border-color: var(--accent-color);
}
/* As tall as what the search leaves in it, up to a cap, so two results
   do not sit at the top of an empty box. */
.bt-cur-grid {
    display: grid; gap: 8px; overflow-y: auto;
    max-height: clamp(230px, 46vh, 420px);
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    padding: 2px;
}
.bt-cur-grid.is-choosing { opacity: .55; pointer-events: none; }
.bt-cur-card {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 6px 10px; cursor: pointer;
    background: var(--bg-primary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 12px;
    transition: border-color .12s, background .12s, transform .12s;
}
/* `display: flex` above beats the browser's own `[hidden]`. */
.bt-cur-card[hidden] { display: none; }
.bt-cur-card:hover {
    border-color: var(--accent-color); transform: translateY(-1px);
}
.bt-cur-card.is-current {
    background: var(--accent-alpha); border-color: var(--accent-color);
}
.bt-cur-flag {
    width: 30px; height: 30px; border-radius: 50%; margin-bottom: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.bt-cur-code { font-weight: 600; font-size: .8rem; letter-spacing: .02em; }
.bt-cur-name {
    font-size: .68rem; color: var(--text-muted); text-align: center;
    line-height: 1.25; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-cur-sample {
    margin-top: 3px; font-size: .74rem; font-weight: 600; min-height: 1.3em;
    font-variant-numeric: tabular-nums; color: var(--text-primary);
}
/* Inside the grid, where it is the only thing left once the search
   has hidden every card. */
.bt-cur-none {
    grid-column: 1 / -1;
    margin: 0; padding: 18px 0; font-size: .8rem; color: var(--text-muted);
    text-align: center;
}
.bt-cur-note {
    margin: 12px 0 0; font-size: .74rem; color: var(--text-muted);
    text-align: center;
}