/* Shared by the landing page and the checker landing pages (rpki-checker, dane-checker,
   nis2-domain-check): reel text helpers, the free-scan form (partials/scan_form.html) and
   its buttons. Tokens come from reel-theme.css. */
.lp-display { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; color: var(--lp-fg); letter-spacing: -0.025em; text-wrap: balance; }
.lp-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.lp-lede { color: var(--lp-mute); }
.lp-link { color: var(--lp-link); transition: color .2s; }
.lp-link:hover { color: var(--lp-link-2); }

.lp-field { display: flex; flex-direction: column; gap: .625rem; }
@media (min-width: 640px) { .lp-field { flex-direction: row; } }
.lp-input {
    flex: 1; min-width: 0;
    background: var(--lp-ink-2); color: var(--lp-fg);
    border: 1px solid var(--lp-line-2); border-radius: 10px;
    padding: .95rem 1.1rem; font-size: 1.0625rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    transition: border-color .2s, box-shadow .2s;
}
.lp-input::placeholder { color: var(--lp-dim); }
.lp-input:focus { outline: none; border-color: var(--lp-blue); box-shadow: 0 0 0 3px var(--lp-focus-ring); }
/* public.js marks the input valid/invalid with these utility classes */
.lp-input.border-green-500 { border-color: #3ecf8e; }
.lp-input.border-red-500 { border-color: #ff7a59; }

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    white-space: nowrap; border-radius: 10px; font-weight: 600;
    padding: .95rem 1.5rem; font-size: 1rem;
    transition: background-color .2s, transform .15s, border-color .2s;
}
.lp-btn:active { transform: translateY(1px) scale(.99); }
.lp-btn:focus-visible { outline: 2px solid var(--lp-blue-2); outline-offset: 3px; }
.lp-btn--primary { background: var(--lp-blue); color: var(--lp-on-blue); }
.lp-btn--primary:hover { background: var(--lp-blue-2); }
.lp-btn--primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.lp-btn--ghost { color: var(--lp-fg); border: 1px solid var(--lp-line-2); }
.lp-btn--ghost:hover { border-color: var(--lp-blue); }

#quota-display .quota-meter-new { height: 4px; background: var(--lp-line); box-shadow: none; }
#quota-display .quota-fill-new { background: var(--lp-blue); box-shadow: none; }
#quota-display .quota-fill-new.warning { background: var(--lp-amber); box-shadow: none; }
#quota-display .quota-fill-new.danger { background: var(--lp-orange); box-shadow: none; }
#quota-display a { color: var(--lp-link) !important; }