/* Styles for Welcome, Can't reach Dayproof and the load-error block (views/welcome.js).
   Loaded after /app/app.css on every /app/ page. Only the builder of that view edits this file, so
   parallel work never touches the same file. Use the shared classes in app.css first (see the
   class list at its top and CONTRACTS.md §10); put only this screen's own additions here, and
   start every selector with the view's root class (for example .view-welcome) so nothing leaks into
   other screens. Tokens (colors, fonts) come from /shared/tokens.css. */

/* The heading block: the Dayproof stamp, the one-sentence promise, and the subline. */
.view-welcome .welcome-hero{display:grid;gap:14px;justify-items:start;min-width:0}
.view-welcome .welcome-hero .stamp{font-size:.85rem}
.view-welcome .welcome-subline{color:var(--muted)}
.view-welcome .welcome-notice{font-weight:600}

/* The trust rows read as statements, so the long details wrap under their titles. */
.view-welcome .welcome-trust .list-row{align-items:start;padding-block:14px}
.view-welcome .welcome-trust .row-icon{margin-top:2px}

/* How it works: numbers in pen circles, like the iPhone's Welcome. */
.view-welcome .welcome-steps{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.view-welcome .welcome-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.view-welcome .welcome-step-num{display:inline-grid;place-items:center;width:28px;height:28px;border:1.5px solid color-mix(in srgb,var(--pen) 40%,transparent);border-radius:50%;color:var(--pen);font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums}

/* What next: the two account buttons, then the quieter links. */
.view-welcome .welcome-actions{display:grid;gap:12px}
.view-welcome .welcome-buttons{display:grid;gap:12px}
.view-welcome .welcome-buttons .btn{width:100%}
@media (min-width:520px){.view-welcome .welcome-buttons{grid-auto-flow:column;grid-auto-columns:1fr}}
.view-welcome .welcome-links{display:flex;flex-wrap:wrap;gap:0 24px}

.view-welcome .welcome-footer{border-top:1px solid var(--line);padding-top:12px}
.view-welcome .welcome-footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.view-welcome .welcome-dot{color:var(--muted)}

/* Blocks rise into place in reading order, 80 ms apart, only for people who haven't asked for
   less motion. */
@keyframes welcome-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .view-welcome .reveal{animation:welcome-in .45s ease-out both}
  .view-welcome .reveal.r2{animation-delay:80ms}
  .view-welcome .reveal.r3{animation-delay:160ms}
  .view-welcome .reveal.r4{animation-delay:240ms}
  .view-welcome .reveal.r5{animation-delay:320ms}
  .view-welcome .reveal.r6{animation-delay:400ms}
}

/* "Couldn't load your records": a quiet card with the warning icon and Try again under the words.
   Not scoped to .view-welcome, because it is shown inside other screens (the Week screen, or any
   screen main.js couldn't show). */
.load-error{align-items:flex-start}
.load-error .icon{flex:none}
.load-error-text{display:grid;gap:10px;justify-items:start;min-width:0}