/* Jupjup on the web: what differs from the extension's page */

/* parts that only make sense in the extension (browsing, videos, Anki, image reading) */
.web [data-ext-only] { display: none !important; }

/* starting up: only the background until the app is ready, then the page fades in once */
.web-boot > header.top, .web-boot > main:not(#web-screen) { visibility: hidden; }
.web-enter > header.top, .web-enter > main { animation: web-in 0.25s ease-out; }
#web-screen.loading .web-card { animation: web-in 0.25s ease-out; }
@keyframes web-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .web-enter > header.top, .web-enter > main, #web-screen.loading .web-card { animation: none; } }

/* sign-in and the other screens of their own */
.web-screen > header.top, .web-screen > main:not(#web-screen) { display: none; }
#web-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; }
.web-card { width: min(440px, 100%); padding: 32px 28px; text-align: left; }
.web-card h1 { font-size: 24px; margin: 18px 0 8px; }
.web-card p { line-height: 1.55; }
.web-logo { display: flex; align-items: center; gap: 8px; font: 800 20px var(--kl-sans); }
.web-logo img { width: 30px; height: 30px; border-radius: 8px; }
.web-form { display: grid; gap: 10px; margin: 18px 0 6px; }
.web-form input { font-size: 16px; padding: 12px 14px; } /* 16px: phones don't zoom in on focus */
.web-form .kl-btn { min-height: 46px; font-size: 16px; justify-content: center; }
.web-msg { color: var(--kl-danger, #b42318); min-height: 1em; margin: 4px 0; }
.web-dev { padding: 8px 10px; border-radius: 8px; background: var(--kl-bg-2); font-size: 13px; }

/* Jupjup Sync: what you get, monthly or yearly */
.web-perks { margin: 12px 0 16px; padding: 0; list-style: none; line-height: 1.9; }
.web-perks li::before { content: '✓'; color: var(--kl-accent, #1f7a45); font-weight: 700; margin-right: 10px; }
.web-plans { display: grid; gap: 8px; margin: 0 0 4px; }
.web-plan { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--kl-line, #ddd); border-radius: 10px; cursor: pointer; }
.web-plan:has(input:checked) { border: 2px solid var(--kl-accent, #1f7a45); padding: 11px 13px; }
.web-plan input { margin: 0; accent-color: var(--kl-accent, #1f7a45); }
.web-price { margin-left: auto; }
.web-card .kl-actions { margin: 14px 0 4px; }

/* phones: the rating buttons are big enough to tap */
@media (max-width: 600px) {
  .web .answers .kl-btn { min-width: 0; flex: 1 1 22%; padding: 14px 4px; }
}