/* Has your password leaked (templates/site/hooks/_password_check.html, assets/lp/js/hooks/password_check.js).
   One card: the question and the field on one side; on the other the password's fingerprint (the first 5
   characters, the only ones that leave the device, lit; the other 35 as dots), and then the answer as the
   hero: the count in the one red, or a green check. Banrox palette only; the kit draws the type, the field,
   the buttons, the steps and the banner, and this file only what is this widget's own. */
.pc { container: pc / inline-size; }
.pc-card { position: relative; border-radius: 24px; padding: 20px; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.pc [hidden] { display: none !important; }
.pc-ask { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pc-ask .bxc-kicker { align-self: flex-start; font-size: 15px; }
.pc-ask .bxc-h2 { margin-top: 4px; }
.pc-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.pc-inputwrap { position: relative; }
.pc-inputwrap .bxc-input { padding-right: 84px; letter-spacing: .02em; }
.pc-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 0 12px; border-radius: 10px; min-width: 64px; }
.pc-show:hover { background: rgba(255, 255, 255, .06); }
.pc-show:active { transform: translateY(-50%) scale(.97); }
.pc-form .bxc-err { margin: -2px 0 0; }
.pc-out { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pc-result { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* the steps and their gate run under both columns, so the answer beside the field stays short */
.pc-gate { grid-column: 1 / -1; min-width: 0; }

@container pc (min-width: 860px) {
    .pc-card { padding: 32px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; row-gap: 28px; align-items: stretch; }
    .pc-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; }
    .pc-gate { padding-top: 28px; box-shadow: inset 0 1px 0 var(--bx-line-8); }
}
@container pc (min-width: 600px) and (max-width: 859.98px) {
    .pc-card { padding: 28px; }
}

/* the fingerprint: five lit cells that are sent, a row of dots that stays */
.pc-fp { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pc-fp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pc-fp__head b { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 18px; line-height: 22px; }
.pc-fp__head span { font-size: 12px; line-height: 16px; color: var(--bx-text-3); }
.pc-fp__row { display: flex; align-items: stretch; gap: 8px; }
.pc-fp__cells { display: flex; gap: 6px; flex: none; }
.pc-fp__cells i { width: 38px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-style: normal;
    font: 500 21px/1 var(--bx-font-numbers); color: #FFFFFF; background: rgba(38, 75, 255, .20);
    box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .55), 0 10px 24px -14px rgba(38, 75, 255, .9); transition: background .3s cubic-bezier(.2, .8, .2, 1); }
.pc-fp__cells i.is-empty { color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }
.pc-fp__cells i.is-new { animation: pc-flip .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pc-flip { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* whole dots only, spaced to fill the box: none is cut in half at either end */
.pc-fp__rest { flex: 1; min-width: 40px; height: 48px; padding: 0 8px; border-radius: 10px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .34) 1.6px, transparent 2.2px), linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .03));
    background-size: 12px 12px, auto; background-origin: content-box, padding-box; background-clip: content-box, padding-box;
    background-position: center, 0 0; background-repeat: space no-repeat, no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pc-fp__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; line-height: 18px; color: var(--bx-text-2); }
.pc-fp__legend span { display: inline-flex; align-items: center; gap: 8px; }
.pc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .34); flex: none; }
.pc-dot--sent { background: #5A87FC; box-shadow: 0 0 0 3px rgba(90, 135, 252, .22); }
.pc-fp__hint { font-size: 13px; line-height: 18px; color: var(--bx-text-3); }

/* the answer */
.pc-verdict { display: flex; align-items: center; gap: 16px; animation: pc-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pc-badge { width: 64px; height: 64px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pc-badge svg { width: 30px; height: 30px; }
.pc-verdict--bad .pc-badge { color: #FF4242; background: rgba(255, 66, 66, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 66, 66, .6), 0 16px 36px -16px rgba(255, 66, 66, .8); }
.pc-verdict--ok .pc-badge { color: #7BD394; background: rgba(49, 166, 80, .16); box-shadow: inset 0 0 0 1.5px rgba(123, 211, 148, .6), 0 16px 36px -16px rgba(49, 166, 80, .9); }
.pc-vtxt { min-width: 0; display: flex; flex-direction: column; }
.pc-vtxt .bxc-label { margin-bottom: 2px; }
.pc-num { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 44px; line-height: 46px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* the most common passwords run to tens of millions: the number keeps to the card's width on a phone */
@container pc (max-width: 520px) {
    .pc-num { font-size: min(44px, 10.5cqw); line-height: 1.05; }
}
.pc-verdict--bad .pc-num { color: #FF4242; }
.pc-vtxt span { font-size: 14px; line-height: 20px; color: var(--bx-text-2); text-wrap: pretty; }
.pc-vtxt b.pc-okt { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: -0.02em; color: #7BD394;
    text-wrap: balance; }
/* a phone: the green answer is two even lines beside a smaller badge, and no word is left alone on a line */
@container pc (max-width: 520px) {
    .pc-verdict { gap: 14px; }
    .pc-badge { width: 52px; height: 52px; }
    .pc-badge svg { width: 26px; height: 26px; }
    .pc-vtxt b.pc-okt { font-size: 24px; line-height: 28px; }
}
.pc-advice { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .86); }
.pc-advice b { font-weight: 500; color: #FFFFFF; }
.pc-sent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.pc-sent svg { width: 16px; height: 16px; flex: none; color: var(--bx-peri); margin-top: 1px; }
.pc-sent code { font: 600 13px/18px var(--bx-font-numbers); color: #FFFFFF; letter-spacing: .04em; }

/* behind the gate: the steps */
.pc-full { display: flex; flex-direction: column; gap: 14px; }
.pc-full .bxc-sectionhead { margin: 4px 0 0; }
.pc-full .bxc-ol { gap: 14px; }
.pc-more { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: inherit;
    background: rgba(38, 75, 255, .10); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .35); transition: background .3s cubic-bezier(.2, .8, .2, 1); min-height: 44px; }
.pc-more:hover { background: rgba(38, 75, 255, .16); }
.pc-more:active { transform: scale(.99); }
.pc-more .bxc-ico { width: 36px; height: 36px; border-radius: 10px; }
.pc-more .bxc-ico svg { width: 18px; height: 18px; }
.pc-more span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-more b { font-weight: 500; font-size: 15px; line-height: 20px; }
.pc-more i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-2); }
.pc-more > svg { width: 18px; height: 18px; flex: none; color: var(--bx-peri); }

/* loading and error */
.pc-sk { display: flex; flex-direction: column; gap: 16px; }
.pc-sk__row { display: flex; align-items: center; gap: 16px; }
.pc-sk__badge { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.pc-sk__lines { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pc-sk__l1 { height: 12px; width: 30%; border-radius: 6px; }
.pc-sk__l2 { height: 36px; width: 46%; border-radius: 10px; }
.pc-sk__l3 { height: 14px; width: 70%; border-radius: 7px; }
.pc-sk__p { height: 44px; border-radius: 12px; }
.pc-sk__s { height: 16px; width: 72%; border-radius: 8px; }
@container pc (max-width: 520px) {
    .pc-sk__badge { width: 52px; height: 52px; }
}
.pc-fail { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pc-fail .bxc-banner { width: 100%; }

/* at width the steps sit two by two, and the gate's form floats over the blurred steps as a sheet of its own
   width, not the card's (after the rules above, which it refines) */
@container pc (min-width: 860px) {
    .pc-full .bxc-ol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 32px; }
    .pc-full .pc-more { align-self: flex-start; min-width: 420px; }
    .pc-gate .bxg.is-locked .bxg-form { max-width: 720px; margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-verdict, .pc-fp__cells i.is-new { animation: none; }
    .pc-fp__cells i, .pc-more { transition: none; }
    .pc-show:active { transform: translateY(-50%); }
    .pc-more:active { transform: none; }
}