/* Is this link safe (templates/site/hooks/_link_check.html, assets/lp/js/hooks/link_check.js).
   One card: the question and the field on one side, the verdict on the other (one column in a blog column
   and on a phone). The verdict is the hero: a green check for "looks safe", periwinkle for "looks
   suspicious", the one red for "reported". Banrox palette only; the kit draws the type, the field, the
   buttons, the list and the banner, and this file only what is this widget's own. */
.lc { container: lc / inline-size; }
.lc-card { position: relative; border-radius: 24px; padding: 20px; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.lc [hidden] { display: none !important; }
.lc-ask { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lc-ask .bxc-kicker { align-self: flex-start; font-size: 15px; }
.lc-ask .bxc-h2 { margin-top: 4px; }
.lc-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.lc-inputwrap { position: relative; }
.lc-inputwrap .bxc-input { padding-right: 88px; text-overflow: ellipsis; }
.lc-paste { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 0 12px; border-radius: 10px; }
.lc-paste:hover { background: rgba(255, 255, 255, .06); }
.lc-paste:active { transform: translateY(-50%) scale(.97); }
.lc-form .bxc-err { margin: -2px 0 0; }
.lc-out { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lc-result { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* the full report and its gate run under both columns, so the answer beside the field stays short */
.lc-gate { grid-column: 1 / -1; min-width: 0; }

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

/* empty: what the check looks at, before there is a link */
.lc-idle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 8px 4px; }
.lc-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); }
.lc-orb svg { width: 34px; height: 34px; }
.lc-idle .bxc-small { max-width: 36ch; }
.lc-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.lc-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); }
.lc-checks svg { width: 15px; height: 15px; color: var(--bx-peri); flex: none; }
@container lc (max-width: 859.98px) {
    .lc-idle { flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; padding: 0; }
    .lc-orb { width: 48px; height: 48px; border-radius: 16px; margin: 0; flex: none; }
    .lc-orb svg { width: 22px; height: 22px; }
    .lc-idle .bxc-h3, .lc-idle .lc-checks { display: none; }
}

/* the verdict */
.lc-verdict { display: flex; align-items: center; gap: 16px; animation: lc-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lc-badge { width: 64px; height: 64px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lc-badge svg { width: 30px; height: 30px; }
.lc-verdict__txt { min-width: 0; }
.lc-verdict__txt b { display: block; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: -0.02em; }
.lc-verdict__txt span { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--bx-text-2); overflow-wrap: anywhere; }
.lc-verdict--safe .lc-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); }
.lc-verdict--safe b { color: #7BD394; }
.lc-verdict--suspicious .lc-badge { color: var(--bx-peri); background: rgba(133, 133, 233, .18); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .65), 0 16px 36px -16px rgba(133, 133, 233, .9); }
.lc-verdict--suspicious b { color: var(--bx-peri); }
.lc-verdict--reported .lc-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); }
.lc-verdict--reported b { color: #FF4242; }
/* a narrow column (a blog article on a phone): the verdict keeps to one line beside a smaller badge */
@container lc (max-width: 340px) {
    .lc-verdict { gap: 14px; }
    .lc-badge { width: 52px; height: 52px; }
    .lc-badge svg { width: 26px; height: 26px; }
    .lc-verdict__txt b { font-size: 24px; line-height: 28px; }
}

/* the reasons, as rows */
.lc-rows .bxc-li { min-height: 52px; }
.lc-rows .bxc-li + .bxc-li::before { left: 52px; }
.lc-mark { width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lc-mark svg { width: 14px; height: 14px; }
.lc-mark--bad { background: #FF4242; color: #FFFFFF; }
.lc-mark--warn { background: rgba(133, 133, 233, .22); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .7); color: var(--bx-peri); }
.lc-mark--ok { background: #31A650; color: #FFFFFF; }
.lc-mark--info { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .7); }
.lc-rows .bxc-li__txt { min-width: 0; overflow-wrap: anywhere; }     /* a long address never runs out of its row */
.lc-rows .bxc-li__txt i { font-size: 13.5px; line-height: 19px; color: var(--bx-text-2); }
/* once the full report is open, the short list beside the field is the summary at width; in one column the
   report says it all, so the summary steps aside */
@container lc (max-width: 859.98px) {
    .lc.is-full .lc-teaser { display: none; }
}

/* the site's public record, behind the gate */
.lc-full { display: flex; flex-direction: column; gap: 22px; }
.lc-full__part { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lc-full .bxc-sectionhead { margin: 4px 0 0; }
.lc-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 16px; position: relative; font-size: 14px; line-height: 20px; }
.lc-kv + .lc-kv::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--bx-line-8); }
.lc-kv span { color: var(--bx-text-3); flex: none; }
.lc-kv b { font-weight: 500; text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* loading: the verdict's shape */
.lc-sk { display: flex; flex-direction: column; gap: 16px; }
.lc-sk__row { display: flex; align-items: center; gap: 16px; }
.lc-sk__badge { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.lc-sk__lines { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.lc-sk__l1 { height: 26px; width: 58%; border-radius: 8px; }
.lc-sk__l2 { height: 14px; width: 80%; border-radius: 7px; }
.lc-sk__list { height: 156px; border-radius: 16px; }
@container lc (max-width: 340px) {
    .lc-sk__badge { width: 52px; height: 52px; }
}

/* error */
.lc-fail { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lc-fail .bxc-banner { width: 100%; }

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

@media (prefers-reduced-motion: reduce) {
    .lc-verdict { animation: none; }
    .lc-paste:active { transform: translateY(-50%); }
}