/* Onelink: a creator's public link page (/@handle). The app's Onelink screen draws the same page
   as its live preview, so everything is scoped to .ol-page. The background behind the profile picture
   comes from an .ol-bg-<preset> class below, or from the creator's own colour or picture. */

.ol-body { background: var(--bg); min-height: 100vh; min-height: 100dvh; }

.ol-page {
  --ol-accent: #8b5cf6;
  --ol-title-font: var(--font-display);
  --ol-body-font: var(--font);
  color: var(--text);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(36px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}

/* A soft, blurred copy of the background fills the page behind the card. */
.ol-backdrop-wrap { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ol-backdrop { position: absolute; inset: -80px; opacity: 0.42; filter: blur(56px) saturate(1.2); }

.ol-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 30px;
  box-shadow: 0 2px 6px rgba(28, 16, 54, 0.06), 0 24px 60px rgba(28, 16, 54, 0.16);
  overflow: hidden;
  text-align: center;
  padding-bottom: 26px;
}

.ol-cover { height: 150px; background: #8b5cf6; }

.ol-avatar {
  position: relative;
  display: block;
  width: 118px;
  height: 118px;
  margin: -59px auto 0;
  border-radius: 50%;
  border: 5px solid var(--surface);
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: 0 10px 26px rgba(28, 16, 54, 0.22);
}

.ol-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
  color: #fff;
  font: 800 2.8rem/1 var(--font-display);
}

.ol-name {
  margin: 14px 22px 0;
  font-family: var(--ol-title-font);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ol-bio { margin: 6px 26px 0; color: var(--muted); overflow-wrap: anywhere; }
.ol-empty { margin: 22px 24px 0; color: var(--muted); font-size: 0.92rem; }

.ol-links { display: grid; gap: 10px; margin: 24px 18px 0; text-align: left; }
.ol-links .btn { width: 100%; }

.ol-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s, box-shadow 0.12s;
}

.ol-link:hover { transform: translateY(-2px); border-color: var(--ol-accent); color: var(--text); box-shadow: 0 10px 24px rgba(28, 16, 54, 0.14); }
.ol-link:active { transform: scale(0.99); }

.ol-link-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.ol-link-icon svg { width: 24px; height: 24px; }
.ol-link-icon.tiktok { background: #111; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ol-link-icon.instagram { background: var(--ig-grad); }
.ol-link-icon.youtube { background: #ff0033; }

.ol-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ol-link-title, .ol-link-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-link-title { font-weight: 800; font-family: var(--ol-title-font); font-size: 1.04rem; }
.ol-link-sub { font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.ol-link-arrow { width: 20px; height: 20px; flex: none; color: var(--muted); }

.ol-footer { margin-top: 22px; font-size: 0.86rem; text-align: center; }

.ol-footer a, .ol-footer .ol-made {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.ol-footer img { width: 18px; height: 18px; }

/* Links the creator added: an emoji on a tint of their button colour. */
.ol-link-icon.emoji { background: color-mix(in srgb, var(--ol-accent) 16%, var(--surface)); font-size: 1.35rem; line-height: 1; }

/* Headings between the links. */
.ol-heading { margin: 8px 4px 0; font-family: var(--ol-title-font); font-size: 1rem; font-weight: 800; text-align: center; color: var(--text); }
.ol-links > .ol-heading:first-child { margin-top: 0; }

/* Socials as a row of round icons under the bio. */
.ol-icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 16px 18px 0; }
.ol-icon-link { display: inline-flex; border-radius: 50%; transition: transform 0.12s; }
.ol-icon-link:hover { transform: translateY(-2px); }
.ol-icon-link .ol-link-icon { width: 46px; height: 46px; border-radius: 50%; }

/* The Look options (STYLE_OPTIONS in app/onelink.py). */
.ol-btn-pill .ol-link { border-radius: 999px; padding-left: 8px; }
.ol-btn-pill .ol-links .ol-link-icon { border-radius: 50%; }
.ol-btn-square .ol-link { border-radius: 6px; }
.ol-btn-square .ol-links .ol-link-icon { border-radius: 4px; }

.ol-fill-outline .ol-link { background: transparent; border-color: var(--ol-accent); }
.ol-fill-color .ol-link { background: var(--ol-accent); border-color: transparent; color: #fff; }
.ol-fill-color .ol-link:hover { color: #fff; border-color: transparent; filter: brightness(1.06); }
.ol-fill-color .ol-link-sub, .ol-fill-color .ol-link-arrow { color: rgba(255, 255, 255, 0.85); }
.ol-fill-color .ol-link-icon.emoji { background: rgba(255, 255, 255, 0.22); }

.ol-font-classic { --ol-title-font: var(--font); }
.ol-font-serif { --ol-title-font: Georgia, "Times New Roman", serif; --ol-body-font: Georgia, "Times New Roman", serif; }
.ol-font-mono { --ol-title-font: ui-monospace, "Cascadia Mono", Consolas, monospace; --ol-body-font: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.ol-card, .ol-footer { font-family: var(--ol-body-font); }

.ol-pic-rounded .ol-avatar { border-radius: 30px; }

/* Light or dark whatever the visitor's device is set to ("auto" follows the device). */
.ol-theme-light {
  --bg: #fbf7ff; --surface: #ffffff; --surface-2: #f5efff; --border: #ebe2fb; --text: #1c1036; --muted: #6c5f8a;
  color-scheme: light;
}
.ol-theme-dark {
  --bg: #120a24; --surface: #1c1236; --surface-2: #271a4a; --border: #372866; --text: #f7f2ff; --muted: #b6a9d9;
  color-scheme: dark;
}
.ol-theme-light, .ol-theme-dark { background-color: var(--bg); }

/* Backgrounds behind the profile picture (the names match PRESETS in app/onelink.py). */
.ol-bg-onepost .ol-cover, .ol-bg-onepost .ol-backdrop, .ol-swatch.ol-bg-onepost { background: linear-gradient(120deg, #ff3fa4 0%, #8b5cf6 52%, #13c8e8 100%); }
.ol-bg-sunset .ol-cover, .ol-bg-sunset .ol-backdrop, .ol-swatch.ol-bg-sunset { background: linear-gradient(135deg, #ffb03a 0%, #ff4f6d 55%, #a03dff 100%); }
.ol-bg-ocean .ol-cover, .ol-bg-ocean .ol-backdrop, .ol-swatch.ol-bg-ocean { background: linear-gradient(135deg, #2ee6f2 0%, #2f6bff 55%, #4c1d95 100%); }
.ol-bg-mint .ol-cover, .ol-bg-mint .ol-backdrop, .ol-swatch.ol-bg-mint { background: linear-gradient(135deg, #b8f36b 0%, #2ed3a0 50%, #0e7490 100%); }
.ol-bg-peach .ol-cover, .ol-bg-peach .ol-backdrop, .ol-swatch.ol-bg-peach { background: linear-gradient(135deg, #ffd8a8 0%, #ffa8b6 50%, #d7a8ff 100%); }
.ol-bg-night .ol-cover, .ol-bg-night .ol-backdrop, .ol-swatch.ol-bg-night { background: linear-gradient(135deg, #1c1036 0%, #44207e 55%, #0f1d3a 100%); }
.ol-bg-gold .ol-cover, .ol-bg-gold .ol-backdrop, .ol-swatch.ol-bg-gold { background: linear-gradient(135deg, #ffe066 0%, #ffb52e 50%, #ff7a2e 100%); }
.ol-bg-mono .ol-cover, .ol-bg-mono .ol-backdrop, .ol-swatch.ol-bg-mono { background: linear-gradient(135deg, #5b5b66 0%, #2a2a33 55%, #111114 100%); }

@media (max-width: 480px) {
  .ol-page { padding: calc(18px + env(safe-area-inset-top)) 12px calc(22px + env(safe-area-inset-bottom)); }
  .ol-cover { height: 132px; }
  .ol-links { margin-left: 14px; margin-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ol-link:hover { transform: none; }
}