/* The best-rate widget (templates/site/hooks/_best_rate.html, assets/lp/js/hooks/best_rate.js).
   Built on the kit (bx-capture.css, bx-hooks.css): the glass card, the field, the chips, the list, the skeleton,
   the note and the site's own buttons are the kit's. This file only lays them out and adds what the kit has no
   class for: the search popover, the hero comparison and the ranked rows. Banrox palette only: the blue ramp for
   the best rate, white at opacities for everything it is compared with, green for "you already have it", red
   only for an error. Motion on the kit's one curve, and none when the system asks for less. */

.brt { position: relative; border-radius: var(--bx-r-card); padding: 32px; }
.brt :focus-visible { outline: 2px solid var(--bx-peri); outline-offset: 2px; }
.brt .bxc-input:focus-visible { outline: none; }

/* ---------- head ---------- */
.brt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 34px; }
.brt-head .bxc-kicker svg { width: 16px; height: 16px; }
.brt-title { margin-top: 18px; }
.brt-lede { margin-top: 8px; max-width: 640px; }

/* ---------- two columns: the question and its answer, then the top five behind the gate ---------- */
.brt-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 28px; }
.brt-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.brt-side { min-width: 0; }
.brt-side__head { margin: 2px 0 12px; }
.brt-side__head span { font-variant-numeric: tabular-nums; }

/* ---------- the bank field and its popover ---------- */
.brt-field { margin: 0; }
.brt-search { position: relative; }
.brt-search__ico { position: absolute; left: 18px; top: 18px; width: 20px; height: 20px; color: rgba(255, 255, 255, .5); pointer-events: none; }
.brt-search__ico svg { display: block; width: 20px; height: 20px; }
.brt .brt-input { padding-left: 48px; padding-right: 52px; text-overflow: ellipsis; }
.brt .brt-input.is-picked { border-color: rgba(133, 133, 233, .7); }
/* the clear button is the kit's round .bxc-x, set inside the 56px field instead of a card's corner */
.brt .brt-clear { top: 6px; right: 6px; padding: 0; transition: background .3s var(--bx-ease), transform 75ms var(--bx-ease); }
.brt .brt-clear:active { transform: scale(.94); }
.brt .brt-clear[hidden] { display: none; }

.brt-menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; padding: 6px; border-radius: 16px;
    background: rgba(12, 16, 44, .98); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 28px 60px -18px rgba(0, 0, 0, .8), 0 12px 32px -16px rgba(38, 75, 255, .4);
    -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
    max-height: min(380px, 60vh); overflow-y: auto; overscroll-behavior: contain; animation: brt-pop .24s var(--bx-ease) both; }
.brt-menu[hidden] { display: none; }
@keyframes brt-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.brt-menu__title { padding: 10px 12px 6px; }
.brt-menu__list { list-style: none; margin: 0; padding: 0; }
.brt-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 12px; cursor: pointer; transition: background .2s var(--bx-ease); }
.brt-opt.is-active, .brt-opt:hover { background: rgba(255, 255, 255, .07); }
.brt-opt.is-active { box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .35); }
.brt-opt:active { background: rgba(255, 255, 255, .1); }
.brt-av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font: 600 13px/1 var(--bx-font-numbers); color: var(--bx-peri); background: rgba(38, 75, 255, .18); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .28); }
.brt-opt__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* the name is what the visitor is looking for, and the charter and city under it are how they know it is theirs:
   both get two lines before either is cut ("JPMorgan Chase Bank, National Association · Columbus, OH" on a phone) */
.brt-opt__txt i { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brt-opt__txt b { font-weight: 500; font-size: 15px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brt-opt__txt i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.brt-opt .bxc-pill { flex: none; height: 24px; font-size: 11.5px; }
.brt-menu__state { display: flex; align-items: center; gap: 12px; padding: 12px; font-size: 14px; line-height: 20px; color: var(--bx-text-2); }
.brt-menu__state[hidden] { display: none; }
.brt-menu__state .bxc-ico { flex: none; }
.brt-menu__state b { display: block; color: #FFFFFF; font-weight: 500; text-wrap: balance; }
.brt-menu__state .bxc-textbtn { margin-left: auto; flex: none; }
.brt-opt--sk { cursor: default; }
.brt-opt--sk:hover { background: none; }
.brt-ico--err { background: rgba(255, 66, 66, .12); color: var(--bx-error); }

/* ---------- the amount ---------- */
.brt-caption { margin: 0 0 8px 2px; }
.brt-chips { gap: 8px; }
.brt-chips .bxc-chip { font-variant-numeric: tabular-nums; }
.brt-other { padding: 0 16px 0 14px; gap: 1px; cursor: text; color: #FFFFFF; background: rgba(38, 75, 255, .22); box-shadow: inset 0 0 0 1.5px #8585E9, 0 8px 22px -12px rgba(38, 75, 255, .8); }
.brt-other[hidden] { display: none; }
/* as wide as what is typed in it (best_rate.js measures the text), like the chip it stands in for */
.brt-other input { width: 7ch; min-width: 3ch; max-width: 12ch; height: 40px; border: none; outline: none; background: none; padding: 0; color: #FFFFFF;
    font: 500 16px/1 var(--bx-font); letter-spacing: -0.01em; }
.brt-other input::placeholder { color: rgba(255, 255, 255, .4); }

/* ---------- the hero: one number, the sentence, the two bars ---------- */
.brt-hero { position: relative; border-radius: var(--bx-r-panel); padding: 24px; min-height: 330px;
    background: radial-gradient(120% 90% at 0% 0%, rgba(38, 75, 255, .14) 0%, rgba(38, 75, 255, 0) 60%), rgba(255, 255, 255, .025);
    box-shadow: inset 0 0 0 1px var(--bx-line-8); }
/* the skeleton is the loaded hero's own markup: text in shimmer, so it wraps and measures like the real lines */
.brt-sk-text { color: transparent; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: linear-gradient(100deg, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .04) 70%);
    background-size: 240% 100%; animation: bxc-sheen 1.2s linear infinite; }
.brt-sk-num { display: inline-block; width: 176px; height: 50px; border-radius: 14px; vertical-align: -6px; }
.brt-sk-track { display: block; height: 10px; border-radius: 5px; margin-top: 8px; }
.brt-sk-inline { display: inline-block; width: 72px; height: 11px; border-radius: 6px; vertical-align: -1px; }
.brt-sk-line { height: 12px; border-radius: 6px; margin-top: 10px; }
.brt-hero__live[hidden], .brt-hero__sk[hidden] { display: none; }
.brt-gapline { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.brt-gap { font-variant-numeric: tabular-nums; }
.brt-gap__cap { font-size: 15px; line-height: 20px; color: var(--bx-text-2); }
.brt-done { display: inline-flex; align-self: center; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center;
    background: #31A650; color: #FFFFFF; box-shadow: 0 8px 20px -8px rgba(49, 166, 80, .7); }
.brt-done svg { width: 18px; height: 18px; }
.brt-line { margin-top: 14px; font-size: 17px; line-height: 26px; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.brt-line b { font-weight: 500; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.brt-note { margin-top: 14px; }
.brt-note i { font-size: 13.5px; line-height: 19px; text-wrap: pretty; }
.brt-bars { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.brt-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.brt-bar__name { color: rgba(255, 255, 255, .86); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brt-bar__apy { flex: none; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; }
.brt-bar .fr-bar { margin-top: 8px; }
.brt-bar .fr-bar i { min-width: 4px; transition: width .6s var(--bx-ease); }
.brt-bar__sub { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--bx-text-3); text-wrap: pretty; }
.brt-bar--best .brt-bar__apy { color: var(--bx-peri); }

/* ---------- the top five ---------- */
.brt-top { list-style: none; margin: 0; padding: 0; }
.brt-row { position: relative; }
.brt-row + .brt-row::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 1px; background: var(--bx-line-8); }
.brt-row__a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; color: #FFFFFF; text-decoration: none;
    transition: background .3s var(--bx-ease), transform 75ms var(--bx-ease); }
a.brt-row__a:hover { background: rgba(255, 255, 255, .04); }
a.brt-row__a:active { background: rgba(255, 255, 255, .07); }
.brt-rank { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font: 600 13px/1 var(--bx-font-numbers); color: var(--bx-peri); background: rgba(38, 75, 255, .14); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .35); }
.brt-row:first-child .brt-rank { color: #FFFFFF; background: var(--bx-ramp); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 6px 16px -6px rgba(38, 75, 255, .8); }
.brt-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brt-row__txt b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; line-height: 20px; min-width: 0; }
.brt-row__txt b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brt-row__txt b .bxc-pill { flex: none; height: 20px; padding: 0 8px; font-size: 11px; font-style: normal; }
.brt-row--yours .brt-rank { box-shadow: inset 0 0 0 1.5px #8585E9; }
.brt-row__txt i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brt-row__n { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.brt-row__n b { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 17px; line-height: 22px; font-variant-numeric: tabular-nums; }
.brt-row__n i { font-style: normal; font-size: 12px; line-height: 16px; color: var(--bx-text-3); font-variant-numeric: tabular-nums; }
.brt-row__go { flex: none; width: 18px; height: 18px; color: rgba(255, 255, 255, .4); transition: color .3s var(--bx-ease), transform .3s var(--bx-ease); }
.brt-row__go svg { display: block; width: 18px; height: 18px; }
a.brt-row__a:hover .brt-row__go { color: var(--bx-peri); transform: translate(1px, -1px); }
.brt-row--sk .brt-row__txt, .brt-row--sk .brt-row__n { gap: 0; }
.brt-row--sk .brt-sk-line { margin-top: 5px; }
.brt-sk-rank { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.brt-top__none { padding: 18px 16px; font-size: 14px; line-height: 20px; color: var(--bx-text-2); }

/* ---------- the alert row ---------- */
.brt-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 10px; margin-top: 12px;
    padding: 14px 14px 14px 16px; border-radius: 16px; background: rgba(38, 75, 255, .08); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .26); }
.brt-alert[hidden] { display: none; }
.brt-alert .brt-alert__ico { width: 36px; height: 36px; border-radius: 10px; }
.brt-alert .brt-alert__ico svg { width: 18px; height: 18px; }
.brt-alert__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brt-alert__txt b { font-weight: 500; font-size: 15px; line-height: 20px; text-wrap: balance; }
.brt-alert__txt i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-2); font-variant-numeric: tabular-nums; }
/* one width for every label it takes (Alert Me, Setting, Try Again, Set Alert), so the line beside it never re-wraps */
.brt .brt-alert__btn { flex: none; min-width: 132px; }
.brt-alert__err { grid-column: 1 / -1; margin: 0; }
.brt-alert.is-done { background: rgba(49, 166, 80, .08); box-shadow: inset 0 0 0 1px rgba(49, 166, 80, .35); }
.brt-alert.is-done .brt-alert__ico { background: #31A650; color: #FFFFFF; }
.brt-alert.is-done .brt-alert__btn { display: none; }

/* ---------- foot, and the whole-widget states ---------- */
.brt-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 26px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--bx-line-8); }
.brt-fine { max-width: 640px; margin: 0; text-wrap: pretty; }
.brt .brt-cta { flex: none; }
/* empty and error: the icon, what happened, what to do, one action, centered the way iOS says content is unavailable */
.brt-state { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 28px; padding: 36px 24px; border-radius: var(--bx-r-panel);
    text-align: center; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.brt-state[hidden] { display: none; }
.brt-state .bxc-ico { width: 48px; height: 48px; border-radius: 14px; }
.brt-state .bxc-ico svg { width: 24px; height: 24px; }
.brt-state__txt { display: flex; flex-direction: column; align-items: center; max-width: 440px; }
.brt-state__txt b { display: block; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 18px; line-height: 24px; text-wrap: balance; }
.brt-state__txt i { display: block; margin-top: 6px; font-style: normal; font-size: 14px; line-height: 20px; color: var(--bx-text-2); text-wrap: pretty; }
.brt-state .btn { margin-top: 18px; }
.brt-state--error .bxc-ico { background: rgba(255, 66, 66, .12); color: var(--bx-error); }
.brt[data-state="empty"] .brt-grid, .brt[data-state="error"] .brt-grid,
.brt[data-state="empty"] .brt-lede, .brt[data-state="error"] .brt-lede,
.brt[data-state="empty"] .brt-fine, .brt[data-state="error"] .brt-fine { display: none; }
.brt[data-state="empty"] .brt-foot, .brt[data-state="error"] .brt-foot { justify-content: center; }

@media (max-width: 959px) {
    .brt-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .brt-hero { min-height: 0; }
}
@media (max-width: 600px) {
    .brt { padding: 22px 16px 20px; }
    .brt-title { margin-top: 16px; font-size: 24px; line-height: 30px; }
    .brt-lede { font-size: 15px; line-height: 22px; }
    .brt-grid { margin-top: 22px; gap: 24px; }
    .brt-main { gap: 18px; }
    .brt-hero { padding: 20px 18px; }
    .brt-hero .fr-big { font-size: 52px; line-height: 54px; }
    .brt-line { font-size: 16px; line-height: 24px; }
    .brt-row__a { padding: 12px 10px; gap: 10px; }
    .brt-row + .brt-row::before { left: 50px; }
    .brt-row__go { display: none; }
    .brt-alert { grid-template-columns: auto minmax(0, 1fr); }
    .brt .brt-alert__btn { grid-column: 1 / -1; width: 100%; }
    .brt-foot { flex-direction: column; align-items: stretch; }
    .brt .brt-cta { width: 100%; }
    .brt-other input { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
    .brt-menu { animation: none; }
    .brt-bar .fr-bar i, .brt-row__a, .brt-row__go, .brt-clear, .brt-opt { transition: none; }
}