/* State rank (templates/site/hooks/_state_rank.html, assets/lp/js/hooks/state_rank.js). One hero, the rank
   dial; everything else is the kit's type, list row, stat tiles and gate. The card lays itself out by its own
   width (a container query): two columns in a page section, one on a phone. Palette: the brand blue family and
   white at opacities; red only for a state in the FTC's top ten, and for the error state. */

.bxsr { container-type: inline-size; }
.bxsr-card { position: relative; border-radius: 24px; padding: 32px 28px; overflow: hidden; }
.bxsr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.bxsr-grid[hidden], .bxsr-state[hidden], .bxsr-change[hidden] { display: none !important; }

/* ---------- words ---------- */
.bxsr-kicker { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 5px 14px 5px 12px; margin: 0 0 16px; border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 15px; line-height: 20px; color: #FFFFFF; }
.bxsr-kicker svg { width: 16px; height: 16px; color: var(--bx-peri); flex: none; }
.bxsr-title { margin: 0 0 10px; text-wrap: balance; }
.bxsr-title em { font-style: normal; color: var(--bx-peri); }
.bxsr-sub { max-width: 600px; }
.bxsr-sub b { font-weight: 500; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.bxsr-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; margin: 0 0 14px; border-radius: 999px;
    font-size: 12px; line-height: 1; letter-spacing: 0; color: #FFFFFF; background: rgba(255, 66, 66, .12); box-shadow: inset 0 0 0 1px rgba(255, 66, 66, .45); }
.bxsr-pill i { width: 6px; height: 6px; border-radius: 50%; background: #FF4242; box-shadow: 0 0 8px rgba(255, 66, 66, .8); }
.bxsr-pill--calm { background: rgba(38, 75, 255, .14); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .42); }
.bxsr-pill.is-empty { visibility: hidden; }
.bxsr-pill--calm i { background: #8585E9; box-shadow: 0 0 8px rgba(133, 133, 233, .8); }

/* where the state came from, and the picker that changes it */
.bxsr-where { display: flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--bx-text-2); }
.bxsr-where__txt { min-width: 0; }
.bxsr-where__ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(38, 75, 255, .18); color: var(--bx-peri); }
.bxsr-where__ico svg { width: 16px; height: 16px; }
.bxsr-where__txt b { font-weight: 500; color: #FFFFFF; }
.bxsr-change { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; cursor: pointer; font-weight: 500; color: var(--bx-peri);
    border-radius: 8px; transition: color .3s var(--bx-ease); }
.bxsr-change:hover { color: #FFFFFF; }
.bxsr-change select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; -webkit-appearance: none; appearance: none; }
/* the list a browser draws for the hidden select (Chrome on Windows paints it with the select's own colours) */
.bxsr-change select option { color: #141C24; }
.bxsr-change:focus-within { outline: 2px solid var(--bx-peri); outline-offset: 2px; }

/* a picked state loads over the old one: the card dims, keeps its shape, and comes back */
.bxsr-grid { transition: opacity .3s var(--bx-ease); }
.bxsr.is-refresh .bxsr-grid { opacity: .5; pointer-events: none; }

/* ---------- the dial ---------- */
.bxsr-dialcol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bxsr-dialcol .bxsr-pill { margin: 0; }
.bxsr-dial { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1 / 1; }
.bxsr-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bxsr-tick { stroke: rgba(255, 255, 255, .13); stroke-width: 4; stroke-linecap: round;
    transition: stroke .5s var(--bx-ease), opacity .5s var(--bx-ease); transition-delay: calc(var(--i) * 11ms); }
.bxsr-tick.is-on { stroke: var(--sr-c, #5A87FC); }
.bxsr[data-view="loading"] .bxsr-tick { animation: bxsr-breathe 1.4s var(--bx-ease) infinite; animation-delay: calc(var(--i) * 18ms); }
@keyframes bxsr-breathe { 0%, 100% { stroke: rgba(255, 255, 255, .10); } 50% { stroke: rgba(255, 255, 255, .22); } }
.bxsr-mark { transform-box: view-box; transform-origin: 130px 130px; transform: rotate(120deg); opacity: 0; transition: transform .9s var(--bx-ease), opacity .3s var(--bx-ease); }
.bxsr-mark.is-on { opacity: 1; }
.bxsr-mark__line { stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(133, 133, 233, .9)); }
.bxsr-mark__dot { fill: #8585E9; filter: drop-shadow(0 0 6px rgba(133, 133, 233, .9)); }
.bxsr-mark.is-hot .bxsr-mark__line { filter: drop-shadow(0 0 7px rgba(255, 66, 66, .85)); }
.bxsr-mark.is-hot .bxsr-mark__dot { fill: #FF4242; filter: drop-shadow(0 0 7px rgba(255, 66, 66, .9)); }
.bxsr-end { font: 500 12px/1 var(--bx-font); letter-spacing: 0; fill: rgba(255, 255, 255, .45); }
.bxsr-read { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-align: center; white-space: nowrap; pointer-events: none; }
.bxsr-num { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 68px; line-height: 70px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.bxsr-num sup { font-size: 24px; line-height: 1; letter-spacing: -0.01em; vertical-align: top; position: relative; top: 10px; margin-left: 2px; color: rgba(255, 255, 255, .86); }
.bxsr-num--rate { font-size: 56px; }
.bxsr-of { font-size: 14px; line-height: 20px; color: var(--bx-text-3); }

/* ---------- the kinds of identity theft ---------- */
.bxsr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.bxsr-head b { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 18px; line-height: 22px; }
.bxsr-head span { font-size: 13px; line-height: 18px; color: var(--bx-text-3); text-align: right; }
.bxsr-bars { display: flex; flex-direction: column; gap: 16px; }
.bxsr-bar__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 15px; line-height: 20px; }
.bxsr-bar__label { flex: 1; min-width: 0; font-weight: 500; color: #FFFFFF; }
.bxsr-bar__n { font-size: 13px; color: var(--bx-text-3); font-variant-numeric: tabular-nums; }
.bxsr-bar__pct { min-width: 40px; text-align: right; font-family: var(--bx-font-numbers); font-weight: 500; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.bxsr-bar.is-sk .bxsr-bar__top { justify-content: space-between; }
.bxsr-bar__track { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bxsr-bar__track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--bx-ramp);
    box-shadow: 0 0 12px rgba(38, 75, 255, .45); transition: width .8s var(--bx-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.bxsr-bar.is-sk .bxsr-bar__track i { background: rgba(255, 255, 255, .06); box-shadow: none; }

/* ---------- behind the gate ---------- */
.bxsr-more .bxg-locked { display: flex; flex-direction: column; gap: 24px; }
/* the form floats over the blurred rows as a sheet no wider than a form needs, the rows showing either side */
.bxsr-more .bxg.is-locked .bxg-form { max-width: 720px; margin-left: auto; margin-right: auto; }
.bxsr-more .bxsr-bars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bxsr-metro .bxc-li { min-height: 64px; }
.bxsr-metro .bxc-ico svg { width: 16px; height: 16px; }
.bxsr-metro__n { text-align: right; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 17px; line-height: 22px; font-variant-numeric: tabular-nums; }
.bxsr-metro__n span { display: block; font-family: var(--bx-font); font-weight: 400; font-size: 12px; line-height: 16px; color: var(--bx-text-3); }
.bxsr-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bxsr-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.bxsr-stat b { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bxsr-stat span { font-size: 13px; line-height: 18px; color: var(--bx-text-2); }
.bxsr-stat span b { font-family: var(--bx-font); font-size: inherit; line-height: inherit; font-weight: 500; letter-spacing: 0; color: #FFFFFF; }
.bxsr-src { color: var(--bx-text-3); }
.bxsr-src a { white-space: nowrap; }

/* ---------- skeletons, in the final shape ---------- */
/* a skeleton line sits in its text's own line box (an inline block), so a skeleton paragraph is exactly as tall
   as the words that replace it, and nothing under the widget moves when they arrive */
.bxsr-sk { display: inline-block; vertical-align: middle; height: 24px; margin: 0; border-radius: 8px; }
.bxsr-title .bxsr-sk { height: 26px; }
.bxsr-sk--s { height: 16px; }
.bxsr-sk--xs { height: 12px; border-radius: 6px; }
.bxsr-sk--num { display: block; width: 96px; height: 56px; border-radius: 14px; margin: 7px auto; }
.bxsr-bar__top { min-height: 20px; }
.bxsr-bar.is-sk .bxsr-bar__top { align-items: center; }
/* as many skeleton lines as the words take at each width: --m lines only below 860px of card, --n only on a phone */
@container (min-width: 421px) { .bxsr-sk--n { display: none; } }
@container (min-width: 860px) { .bxsr-sk--m { display: none; } }
/* the locked rows fill the gate's window (gate.css shows 190px of them) before the numbers come, as after */
.bxsr-more .bxg.is-locked .bxg-locked { min-height: 190px; }

/* ---------- empty and error ---------- */
.bxsr-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 8px 20px; }
.bxsr-state .bxc-sub { max-width: 440px; margin-bottom: 8px; }
.bxsr-state__ico { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
    background: rgba(38, 75, 255, .18); color: var(--bx-peri); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .3); }
.bxsr-state__ico svg { width: 24px; height: 24px; }
.bxsr-state__ico--err { background: rgba(255, 66, 66, .10); color: #FF4242; box-shadow: inset 0 0 0 1px rgba(255, 66, 66, .32); }
.bxsr-select { position: relative; display: block; width: 100%; max-width: 320px; }
.bxsr-select select { cursor: pointer; padding-right: 48px; -webkit-appearance: none; appearance: none; font-size: 16px; }
.bxsr-select select option { color: #141C24; }
.bxsr-select i { position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: rgba(255, 255, 255, .7); pointer-events: none; }
.bxsr-select i svg { width: 18px; height: 18px; display: block; }
.bxsr .btn_border { min-width: 160px; }

/* ---------- the card at width: two columns, the dial on the right ---------- */
@container (min-width: 640px) {
    .bxsr-card { padding: 36px 40px; }
    .bxsr-more .bxsr-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .bxsr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 860px) {
    .bxsr-card { padding: 44px 48px 36px; }
    .bxsr-grid { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "intro dial" "types dial" "more more" "src src"; column-gap: 64px; row-gap: 28px; }
    .bxsr-intro { grid-area: intro; }
    .bxsr-dialcol { grid-area: dial; align-self: center; }
    .bxsr-types { grid-area: types; }
    .bxsr-more { grid-area: more; }
    .bxsr-src { grid-area: src; }
    .bxsr-dial { max-width: 300px; }
    .bxsr-title { font-size: 32px; line-height: 38px; }
    /* at this width the title and the line under it take one line each: so does their skeleton */
    .bxsr-title .bxsr-sk { height: 32px; }
    .bxsr-sub .bxsr-sk + .bxsr-sk { display: none; }
}
@container (max-width: 420px) {
    .bxsr-card { padding: 24px 18px 20px; }
    .bxsr-dial { max-width: 248px; }
    .bxsr-num { font-size: 60px; line-height: 62px; }
    .bxsr-head { flex-direction: column; align-items: flex-start; gap: 2px; }
    .bxsr-head span { text-align: left; }
    .bxsr-stat { padding: 14px 16px; gap: 4px; }
    .bxsr-stat b { font-size: 24px; line-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .bxsr-tick, .bxsr-mark, .bxsr-bar__track i, .bxsr-change { transition: none !important; }
    .bxsr[data-view="loading"] .bxsr-tick { animation: none; }
}