/* The notes app page before the app starts: a welcome card like the app's own (first visits and
   search engines). The app replaces it as soon as it loads; returning visitors never see it (boot.js). */

@font-face { font-family: "Intro Display"; font-weight: 800; font-display: swap; src: url("/assets/fonts/bricolage-800.woff2") format("woff2"); }
@font-face { font-family: "Intro Body"; font-weight: 400; font-display: swap; src: url("/assets/fonts/dmsans-400.woff2") format("woff2"); }
@font-face { font-family: "Intro Body"; font-weight: 700; font-display: swap; src: url("/assets/fonts/dmsans-700.woff2") format("woff2"); }

.intro {
  --i-paper: #F3F1EC; --i-card: #FFFFFF; --i-ink: #1E1B26; --i-muted: #57525F; --i-line: rgba(30, 27, 38, .11);
  --i-butter: #FBE7A1; --i-sky: #CFE1F2; --i-sage: #CFE3C8; --i-lilac: #DCD3F2;
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px;
  background: var(--i-paper); color: var(--i-ink);
  font: 400 16px/1.5 "Intro Body", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .intro {
    --i-paper: #141218; --i-card: #1F1C26; --i-ink: #F3F1EC; --i-muted: #B9B3C2; --i-line: rgba(243, 241, 236, .12);
    --i-butter: #463C1A; --i-sky: #243446; --i-sage: #2A3A29; --i-lilac: #342D49;
  }
}
.returning .intro { display: none; }

.intro-card {
  width: min(560px, 100%); display: grid; overflow: hidden; border-radius: 36px; text-align: center;
  background: var(--i-card); box-shadow: 0 30px 80px -30px rgba(30, 27, 38, .35), inset 0 0 0 1px var(--i-line);
}
.intro-main { padding: 52px clamp(22px, 5vw, 44px) 26px; }
.intro-visual { display: none; }
.intro-logo { display: block; width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 22px; transform: rotate(-4deg); box-shadow: 0 12px 28px -12px rgba(30, 27, 38, .45); }
.intro h1 { margin: 0 0 10px; font: 800 clamp(32px, 6vw, 42px)/1.05 "Intro Display", "Intro Body", system-ui, sans-serif; letter-spacing: -.03em; }
.intro-lead { margin: 0 0 22px; color: var(--i-muted); font-size: 17px; }
.intro-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; text-align: start; }
.intro-points li { display: flex; gap: 14px; align-items: flex-start; }
.intro-points strong { display: block; font-size: 16px; }
.intro-points small { display: block; color: var(--i-muted); font-size: 14px; }
.intro-icon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.intro-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intro-icon[data-tone="butter"] { background: var(--i-butter); }
.intro-icon[data-tone="sky"] { background: var(--i-sky); }
.intro-icon[data-tone="sage"] { background: var(--i-sage); }
.intro-icon[data-tone="lilac"] { background: var(--i-lilac); }
.intro-go {
  display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 999px;
  background: var(--i-ink); color: var(--i-paper); font-weight: 700; font-size: 17px; text-decoration: none;
}
.intro-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: 16px; }
.intro-links a { padding: 6px 10px; border-radius: 999px; color: var(--i-muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.intro-links a:hover { color: var(--i-ink); background: var(--i-line); }
.intro-noscript { max-width: 560px; margin: 16px auto; padding: 0 16px; text-align: center; }

/* Wide screens: the card and its coloured side, like the app's Welcome. */
@media (min-width: 980px) {
  .intro-card { width: min(980px, 100%); grid-template-columns: 1fr 380px; text-align: start; }
  .intro-logo { margin-inline: 0; }
  .intro-links { justify-content: flex-start; margin-inline-start: -10px; }
  .intro-visual { display: block; background: radial-gradient(120% 80% at 80% 10%, var(--i-lilac), transparent 60%), radial-gradient(90% 70% at 10% 90%, var(--i-sky), transparent 60%), var(--i-paper); }
}