/* Who's calling (templates/site/hooks/_whos_calling.html, assets/lp/js/hooks/whos_calling.js).
   One card: the question and the field on one side, what people told the FTC on the other (one column in a
   blog column and on a phone). The count is the hero: the one red when a number is reported a lot, the brand
   blue when it is reported at all, white at an opacity when the last 90 days hold nothing. Banrox palette
   only; the kit draws the type, the field, the buttons, the list and the banner. */
.wc { container: wc / inline-size; }
.wc-card { position: relative; border-radius: 24px; padding: 20px; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.wc [hidden] { display: none !important; }
.wc-ask { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wc-ask .bxc-kicker { align-self: flex-start; font-size: 15px; }
.wc-ask .bxc-h2 { margin-top: 4px; }
.wc-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.wc-inputwrap { position: relative; }
.wc-inputwrap .bxc-input { padding-right: 88px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.wc-paste { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 0 12px; border-radius: 10px; }
.wc-paste:hover { background: rgba(255, 255, 255, .06); }
.wc-paste:active { transform: translateY(-50%) scale(.97); }
.wc-form .bxc-err { margin: -2px 0 0; }
.wc-out { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wc-result { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wc-gate { grid-column: 1 / -1; min-width: 0; }

@container wc (min-width: 860px) {
    .wc-card { padding: 32px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; row-gap: 28px; align-items: stretch; }
    .wc-out { border-radius: 20px; padding: 24px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); justify-content: center; }
    .wc-gate { padding-top: 28px; box-shadow: inset 0 1px 0 var(--bx-line-8); }
}
@container wc (min-width: 600px) and (max-width: 859.98px) {
    .wc-card { padding: 28px; }
}

/* empty: what the lookup rests on, before there is a number */
.wc-idle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 8px 4px; }
.wc-orb { width: 80px; height: 80px; border-radius: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; color: #FFFFFF;
    background: radial-gradient(90% 90% at 30% 20%, rgba(133, 133, 233, .5), rgba(38, 75, 255, .28));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 40px -16px rgba(38, 75, 255, .85); }
.wc-orb svg { width: 34px; height: 34px; }
.wc-idle .bxc-small { max-width: 38ch; }
.wc-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.wc-checks span { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px;
    color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.wc-checks svg { width: 15px; height: 15px; color: var(--bx-peri); flex: none; }
@container wc (max-width: 859.98px) {
    .wc-idle { flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; padding: 0; }
    .wc-orb { width: 48px; height: 48px; border-radius: 16px; margin: 0; flex: none; }
    .wc-orb svg { width: 22px; height: 22px; }
    .wc-idle .bxc-h3, .wc-checks { display: none; }
}

/* the count */
.wc-verdict { display: flex; align-items: center; gap: 18px; animation: wc-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wc-big { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -0.03em; flex: none;
    font-variant-numeric: tabular-nums; }
.wc-verdict__txt { min-width: 0; }
.wc-verdict__txt b { display: block; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 20px; line-height: 25px; letter-spacing: -0.01em; }
.wc-verdict__txt span { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--bx-text-2); }
.wc-verdict--many .wc-big { color: #FF4242; }
.wc-verdict--some .wc-big { color: #5A87FC; }
.wc-verdict--none .wc-big { color: rgba(255, 255, 255, .5); font-size: 40px; }
/* the list has not been read yet: a dash, not a number, because we have no number to give */
.wc-verdict--unready .wc-big { color: rgba(255, 255, 255, .38); font-size: 40px; }
.wc-num { font-variant-numeric: tabular-nums; }

/* the rows under it: last reported, recorded messages, states */
.wc-rows { margin-top: 2px; }
.wc-rows .bxc-li__txt b { font-weight: 500; }
.wc-mark { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--bx-peri); background: rgba(133, 133, 233, .16); }
.wc-mark svg { width: 15px; height: 15px; }
.wc-mark--hot { color: #FF4242; background: rgba(255, 66, 66, .16); }

/* behind the gate: what the calls were about, who reported, the busiest days */
.wc-full { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@container wc (min-width: 720px) { .wc-full { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; } }
.wc-full__part { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* in two narrow columns the kit's section head reads better stacked than side by side */
.wc-full .bxc-sectionhead { flex-direction: column; align-items: flex-start; gap: 2px; }
.wc-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; line-height: 20px; }
.wc-bar b { font-weight: 500; font-variant-numeric: tabular-nums; }
.wc-bar__track { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.wc-bar__track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #264BFF, #8585E9); }
.wc-bars { display: flex; flex-direction: column; gap: 12px; }
.wc-daysHead { margin-top: 6px; }
.wc-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--bx-line-8); font-size: 14px; }
.wc-kv span { color: var(--bx-text-2); }
.wc-kv b { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

/* waiting, and when the lookup could not be made */
.wc-sk { display: flex; flex-direction: column; gap: 16px; }
.wc-sk__row { display: flex; align-items: center; gap: 18px; }
.wc-sk__big { width: 96px; height: 56px; border-radius: 14px; }
.wc-sk__lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wc-sk__l1 { height: 18px; width: 70%; border-radius: 8px; }
.wc-sk__l2 { height: 14px; width: 45%; border-radius: 8px; }
.wc-sk__list { height: 92px; border-radius: 14px; }
.wc-fail { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

@media (prefers-reduced-motion: reduce) {
    .wc-verdict { animation: none; }
}