/*
 * Public pages · home (/), sign-in (/login), app download (/tll-app-download).
 * Tokens only: every colour, space, radius and shadow is a --vk-* custom
 * property from style.css ($vk-* in resources/assets/sass/_variant-e-tokens.scss).
 * The few sizes below that have no token yet are named once here (--pp-*).
 * Mockup: docs/internal/sso-login/mockups/final-sign-in-and-download.html
 */
:root {
    --pp-mark: 36px;              /* TLL square, same as the app rail logo */
    --pp-card-w: 400px;           /* sign-in card */
    --pp-qr-w: 220px;             /* QR code on the download page */
    --pp-icon: 36px;              /* home tile icon */
    --pp-wrap: 1120px;            /* centred content column on wide screens */
    --pp-t-hero: 26px;            /* dictionary --t-h1 */
    --pp-t-h1: 24px;              /* .vk-page-title */
    --pp-t-h2: 22px;
    --pp-t-h3: 17px;
    --pp-t-h4: 14px;
    --pp-t-body: 13.5px;
    --pp-t-btn: 13px;
    --pp-t-small: 12.5px;
    --pp-t-tiny: 11.5px;
    --pp-t-micro: 10.5px;
    --pp-control: 38px;           /* $vk-control-height */
    --pp-font: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body.pp-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--pp-font); font-size: var(--pp-t-body); line-height: 1.55; color: var(--vk-text); background: var(--vk-bg-elevated); -webkit-font-smoothing: antialiased; }
.pp-body h1, .pp-body h2, .pp-body h3 { font-family: var(--pp-font); color: var(--vk-text); font-weight: 700; }
.pp-body h3 { font-weight: 600; }
.pp-body img { max-width: 100%; display: block; }
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Shared bits ── */
.pp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--vk-sp-3); padding: var(--vk-sp-3) var(--vk-sp-6); border-bottom: 1px solid var(--vk-border); background: var(--vk-bg-elevated); }
.pp-brand { display: flex; align-items: center; gap: var(--vk-sp-3); color: var(--vk-text); text-decoration: none; }
.pp-brand b { display: block; font-size: var(--pp-t-h4); }
.pp-brand small { display: block; color: var(--vk-text-muted); font-size: var(--pp-t-tiny); }
.pp-mark { width: var(--pp-mark); height: var(--pp-mark); border-radius: var(--vk-r-md); background: var(--vk-gold); color: var(--vk-bg-elevated); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--pp-t-small); letter-spacing: .04em; flex: 0 0 auto; }
.pp-eyebrow { font-size: var(--pp-t-tiny); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vk-gold-darker); }
.pp-foot { margin-top: auto; border-top: 1px solid var(--vk-border); padding: var(--vk-sp-4) var(--vk-sp-6); color: var(--vk-text-muted); font-size: var(--pp-t-tiny); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--vk-sp-2); }
.pp-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--pp-t-small); font-weight: 600; color: var(--vk-gold-darker); cursor: pointer; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; gap: var(--vk-sp-1); }
.pp-link:hover { text-decoration: underline; color: var(--vk-gold-darker); }
.pp-foot .pp-link { font-size: var(--pp-t-tiny); min-height: 0; }
.pp-body .vk-btn { min-height: var(--pp-control); font-size: var(--pp-t-btn); justify-content: center; text-decoration: none; }
.pp-body .vk-btn.pp-block { width: 100%; }
.pp-body .vk-btn[disabled], .pp-body .vk-btn[aria-disabled="true"] { cursor: progress; opacity: .9; pointer-events: none; }
.pp-ms { width: 18px; height: 18px; border-radius: var(--vk-r-sm); background: var(--vk-bg-elevated); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pp-ms svg { width: 12px; height: 12px; display: block; }
.pp-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--vk-gold-light); border-top-color: var(--vk-bg-elevated); animation: pp-spin .8s linear infinite; flex: 0 0 auto; }
.pp-spinner.on-light { border-color: var(--vk-border); border-top-color: var(--vk-gold); }
@keyframes pp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pp-spinner { animation-duration: 2.4s; } }
.pp-banner { padding: var(--vk-sp-3) var(--vk-sp-4); border-radius: var(--vk-r-md); font-size: var(--pp-t-small); border: 1px solid; margin-bottom: var(--vk-sp-4); }
.pp-banner.danger { background: var(--vk-danger-bg); border-color: var(--vk-danger); color: var(--vk-danger); }
.pp-banner.warning { background: var(--vk-warning-bg); border-color: var(--vk-warning); color: var(--vk-warning); }
.pp-banner.success { background: var(--vk-success-bg); border-color: var(--vk-success); color: var(--vk-success); }

/* ── Home ──
 * One centred column (--pp-wrap) so wide screens do not stretch the content to
 * the edges; hero, app card and section tiles sit together in the middle of a
 * gold-tint page with a faint dot pattern behind the hero. */
.pp-wrap { width: 100%; max-width: var(--pp-wrap); margin: 0 auto; padding-inline: var(--vk-sp-6); }
.pp-top .pp-wrap, .pp-foot .pp-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--vk-sp-3); flex-wrap: wrap; }
body.pp-home { background: var(--vk-gold-tint); }
body.pp-home .pp-top, body.pp-home .pp-foot { background: var(--vk-bg-elevated); }
body.pp-home .pp-top, body.pp-home .pp-foot { padding-inline: 0; }   /* the inner .pp-wrap carries the gutter, so logo and footer line up with the content */
.pp-home-main { flex: 1; display: grid; align-content: center; position: relative; overflow: hidden; padding-block: calc(var(--vk-sp-6) * 2); }
.pp-home-main::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--vk-gold-light) 1px, transparent 1px); background-size: var(--vk-sp-5) var(--vk-sp-5); opacity: .35; -webkit-mask-image: radial-gradient(ellipse at 30% 35%, black, transparent 70%); mask-image: radial-gradient(ellipse at 30% 35%, black, transparent 70%); pointer-events: none; }
.pp-home-main > .pp-wrap { position: relative; display: grid; gap: calc(var(--vk-sp-6) * 1.5); }
.pp-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: calc(var(--vk-sp-6) * 1.5); align-items: center; }
.pp-hero h1 { font-size: var(--pp-t-hero); line-height: 1.2; margin: var(--vk-sp-2) 0 var(--vk-sp-2); max-width: 20ch; text-wrap: balance; }
.pp-hero .pp-sub { margin: 0 0 var(--vk-sp-5); color: var(--vk-text-muted); font-size: var(--pp-t-h4); }
.pp-hero-actions { display: flex; flex-wrap: wrap; gap: var(--vk-sp-4); align-items: center; }
.pp-app-card { background: var(--vk-bg-elevated); border: 1px solid var(--vk-border); border-top: 3px solid var(--vk-gold); border-radius: var(--vk-r-md); box-shadow: var(--vk-shadow-lg); padding: var(--vk-sp-5); min-width: 0; }
.pp-app-card h2 { font-size: var(--pp-t-h3); margin: 0 0 var(--vk-sp-1); }
.pp-app-card p { margin: 0 0 var(--vk-sp-4); color: var(--vk-text-muted); font-size: var(--pp-t-small); }
.pp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vk-sp-4); }
.pp-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--vk-sp-3); align-items: center; background: var(--vk-bg-elevated); border: 1px solid var(--vk-border); border-radius: var(--vk-r-md); box-shadow: var(--vk-shadow-sm); padding: var(--vk-sp-4); min-width: 0; }
.pp-tile .ico { grid-row: span 2; width: var(--pp-icon); height: var(--pp-icon); border-radius: var(--vk-r-md); background: var(--vk-gold-soft); color: var(--vk-gold-darker); display: inline-flex; align-items: center; justify-content: center; }
.pp-tile .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-tile b { font-size: var(--pp-t-h4); }
.pp-tile span:not(.ico) { color: var(--vk-text-muted); font-size: var(--pp-t-small); }

/* ── Sign-in ── */
.pp-login { flex: 1; background: var(--vk-gold-tint); display: grid; place-items: center; padding: var(--vk-sp-6) var(--vk-sp-4); }
.pp-card { width: 100%; max-width: var(--pp-card-w); background: var(--vk-bg-elevated); border: 1px solid var(--vk-border); border-radius: var(--vk-r-md); box-shadow: var(--vk-shadow-lg); padding: var(--vk-sp-6) var(--vk-sp-5); }
.pp-card .pp-brand { justify-content: center; margin-bottom: var(--vk-sp-5); }
.pp-card h1 { font-size: var(--pp-t-h2); text-align: center; margin: 0 0 var(--vk-sp-1); }
.pp-lead { text-align: center; color: var(--vk-text-muted); font-size: var(--pp-t-small); margin: 0 0 var(--vk-sp-5); }
.pp-help { text-align: center; font-size: var(--pp-t-small); color: var(--vk-text-muted); margin: var(--vk-sp-2) 0 0; }
.pp-or { display: flex; align-items: center; gap: var(--vk-sp-3); color: var(--vk-text-subtle); font-size: var(--pp-t-tiny); text-transform: uppercase; letter-spacing: .08em; margin: var(--vk-sp-5) 0 var(--vk-sp-2); }
.pp-or::before, .pp-or::after { content: ""; flex: 1; height: 1px; background: var(--vk-border); }
.pp-center { display: flex; justify-content: center; }
.pp-pw { display: grid; gap: var(--vk-sp-4); margin-top: var(--vk-sp-3); }
.pp-field { display: grid; gap: var(--vk-sp-1); }
.pp-field label { font-size: var(--pp-t-small); font-weight: 600; margin: 0; }
.pp-field label .req { color: var(--vk-danger); }
.pp-field.has-error .vk-form-control { border-color: var(--vk-danger); }
.pp-field .err { color: var(--vk-danger); font-size: var(--pp-t-tiny); }
.pp-row { display: flex; justify-content: space-between; align-items: center; gap: var(--vk-sp-2); font-size: var(--pp-t-small); }
.pp-row label { display: inline-flex; gap: var(--vk-sp-2); align-items: center; margin: 0; font-weight: 400; }
.pp-card-foot { text-align: center; color: var(--vk-text-muted); font-size: var(--pp-t-tiny); margin-top: var(--vk-sp-5); }
.pp-card-foot a { color: var(--vk-gold-darker); font-weight: 600; }
[hidden] { display: none !important; }

/* ── App download ── */
.pp-dl { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(var(--vk-sp-6) * 1.5); align-items: center; padding: calc(var(--vk-sp-6) * 2) var(--vk-sp-6); background: var(--vk-gold-tint); flex: 1; }
.pp-dl h1 { font-size: var(--pp-t-h1); line-height: 1.25; margin: var(--vk-sp-2) 0 var(--vk-sp-3); max-width: 24ch; text-wrap: balance; }
.pp-dl p { margin: 0 0 var(--vk-sp-4); color: var(--vk-text-muted); max-width: 50ch; }
.pp-feat { list-style: none; margin: 0 0 var(--vk-sp-5); padding: 0; display: grid; gap: var(--vk-sp-2); }
.pp-feat li { display: flex; gap: var(--vk-sp-2); align-items: baseline; }
.pp-feat li::before { content: ""; width: var(--vk-sp-2); height: var(--vk-sp-2); border-radius: 50%; background: var(--vk-gold); flex: 0 0 auto; transform: translateY(-1px); }
.pp-stores { display: flex; flex-wrap: wrap; gap: var(--vk-sp-2); }
.pp-store { display: inline-flex; align-items: center; gap: var(--vk-sp-2); min-height: var(--pp-control); padding: var(--vk-sp-1) var(--vk-sp-4); border-radius: var(--vk-r-sm); background: var(--vk-slate-rail); color: var(--vk-slate-text-bright); text-decoration: none; font-weight: 600; font-size: var(--pp-t-btn); line-height: 1.2; }
.pp-store:hover { background: var(--vk-slate-flyout); color: var(--vk-slate-text-bright); text-decoration: none; }
.pp-store small { display: block; font-weight: 400; font-size: var(--pp-t-micro); color: var(--vk-slate-text); }
.pp-store .ic { width: 22px; height: 22px; border-radius: var(--vk-r-sm); background: var(--vk-slate-flyout); display: inline-flex; align-items: center; justify-content: center; font-size: var(--pp-t-micro); font-weight: 700; color: var(--vk-slate-text); flex: 0 0 auto; }
.pp-portal { font-size: var(--pp-t-small); color: var(--vk-text-muted); margin: var(--vk-sp-4) 0 0 !important; }
.pp-portal a { color: var(--vk-gold-darker); font-weight: 600; }
.pp-scan { background: var(--vk-bg-elevated); border: 1px solid var(--vk-border); border-radius: var(--vk-r-md); box-shadow: var(--vk-shadow-lg); padding: var(--vk-sp-5); display: grid; gap: var(--vk-sp-3); justify-items: center; text-align: center; min-width: 0; }
.pp-scan h2 { margin: 0; font-size: var(--pp-t-h3); }
.pp-scan small { color: var(--vk-text-muted); font-size: var(--pp-t-tiny); }
/* the QR images are a phone drawn in the lower part of a tall canvas · crop to the phone */
.pp-qr { width: var(--pp-qr-w); max-width: 100%; aspect-ratio: 730 / 470; object-fit: cover; object-position: center bottom; border-radius: var(--vk-r-md); }
.pp-fallback { display: grid; gap: var(--vk-sp-3); justify-items: center; text-align: center; padding: var(--vk-sp-6) var(--vk-sp-4); }
.pp-fallback h1 { margin: 0; font-size: var(--pp-t-h3); }
.pp-opening { display: inline-flex; gap: var(--vk-sp-2); align-items: center; color: var(--vk-text-muted); font-size: var(--pp-t-small); }
.pp-fallback .stack { display: grid; gap: var(--vk-sp-2); width: 100%; max-width: var(--pp-card-w); }
.pp-fallback .pp-store { width: 100%; }

/* dictionary breakpoints · 1024 · 768 · 480 */
@media (max-width: 768px) {
    .pp-dl { grid-template-columns: 1fr; padding: var(--vk-sp-6) var(--vk-sp-4); gap: var(--vk-sp-5); }
    .pp-hero { grid-template-columns: 1fr; gap: var(--vk-sp-5); }
    .pp-tiles { grid-template-columns: 1fr; }
    .pp-wrap { padding-inline: var(--vk-sp-4); }
    .pp-home-main { padding-block: var(--vk-sp-6); }
    .pp-top, .pp-foot { padding-inline: var(--vk-sp-4); }
    body.pp-home .pp-top, body.pp-home .pp-foot { padding-inline: 0; }
}