/* ============================================================
   POP · the human, girly-pop layer. Loads LAST on every page.
   Mood: 2000s romcom diary meets glitter-grunge pop. Paper grain,
   marker scrawl, sticker cards with hard pink shadows, a little
   glitter. Spend the boldness on details, keep layouts readable.
   ============================================================ */
:root {
  --marker: "Poppins", Arial, sans-serif;
  --pop: #ff66c4;          /* the hard sticker shadow */
  --grape: #7b3fd1;        /* sparing purple accent */
  --ink-line: #2b0a14;     /* sticker outline */
}

/* paper grain over everything (decorative, never blocks taps) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* marker scrawl: handwritten notes in the margins */
.scrawl {
  display: inline-block;
  font-family: var(--marker);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--grape);
  transform: rotate(-4deg);
  white-space: nowrap;
}
.scrawl--pink { color: var(--rose); }
.scrawl--arrow::before { content: "\2190 "; }
.title-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.2rem 0.9rem; }
.title-row .scrawl { margin-bottom: 0.45rem; }

/* glitter words: slow shimmer through pink, butter, lilac */
.glitter, em.glitter, .lp-hero__title em.glitter, .hb-hello__title em.glitter, .cn__title em.glitter {
  background: linear-gradient(100deg, #cd467c 0%, #ff66c4 25%, #ffd66b 45%, #b48cff 62%, #cd467c 80%) 0 0 / 250% 100%;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  color: transparent !important;
  animation: pop-glitter 6s linear infinite;
}
@keyframes pop-glitter { to { background-position: -250% 0; } }

/* ---------- sticker buttons: ink outline, hard pink shadow, press down ---------- */
.lp-btn--solid, .gate__google, .pk-visit, .cal-modal__cta, .pf-save,
.hb-verify__btn, .bl-join__btn, .gd-start__btn, .cn__primary, .pk-biz__btn,
.lp-btn--butter, .cal-card__btn, .pk-bizstrip__btn, .hb-pass, .pk-listbtn {
  border: 2px solid var(--ink-line) !important;
  box-shadow: 3px 3px 0 var(--pop) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s;
}
.lp-btn--solid:hover, .gate__google:hover, .pk-visit:hover, .cal-modal__cta:hover, .pf-save:hover,
.hb-verify__btn:hover, .bl-join__btn:hover, .gd-start__btn:hover, .cn__primary:hover, .pk-biz__btn:hover,
.lp-btn--butter:hover, .cal-card__btn:hover, .pk-bizstrip__btn:hover, .hb-pass:hover, .pk-listbtn:hover {
  transform: translate(-2px, -2px) rotate(-0.6deg);
  box-shadow: 5px 5px 0 var(--pop) !important;
}
.lp-btn--solid:active, .gate__google:active, .pk-visit:active, .cal-modal__cta:active, .pf-save:active,
.hb-verify__btn:active, .bl-join__btn:active, .gd-start__btn:active, .cn__primary:active, .pk-biz__btn:active,
.lp-btn--butter:active, .cal-card__btn:active, .pk-bizstrip__btn:active, .hb-pass:active, .pk-listbtn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--pop) !important;
}
.lp-btn--line { border: 2px solid var(--ink-line) !important; box-shadow: 3px 3px 0 var(--butter); }
.lp-btn--line:hover { transform: translate(-2px, -2px) rotate(0.6deg); box-shadow: 5px 5px 0 var(--butter); }

/* ---------- sticker cards: outlined, hard shadow, a hair off-straight ---------- */
.lp-ticket, .lp-coupon, .lp-post, .pk-card, .bl-card, .hb-act, .gd-item, .hb-ev, .hb-note,
.pf-stat, .cal-card, .pk-tier, .cn .linkbtn, .pf-yt, .pf-bubble, .bl-serie {
  border: 2px solid var(--ink-line) !important;
  box-shadow: 4px 4px 0 var(--pop) !important;
}
.lp-ticket:hover, .lp-coupon:hover, .lp-post:hover, .pk-card:hover, .bl-card:hover, .hb-act:hover, .gd-item:hover,
.hb-ev:hover, .cn .linkbtn:hover, .bl-serie:hover {
  box-shadow: 6px 6px 0 var(--pop) !important;
}
.lp-coupon { border-style: dashed !important; }
.hb-ev { border-left-width: 6px !important; border-left-color: var(--k) !important; }
.pk-card--feat { box-shadow: 4px 4px 0 var(--brand) !important; }
.pk-card--feat::before { display: none; }
.lp-ticket::before, .lp-ticket::after { box-shadow: inset 0 0 0 2px var(--ink-line); }
/* alternate tiny tilts so rows don't look machine-made */
.pk-grid > .pk-card:nth-child(3n+1), .bl-grid > .bl-card:nth-child(odd), .gd-grid > .gd-item:nth-child(3n+1), .hb-actions > .hb-act:nth-child(odd) { rotate: -0.6deg; }
.pk-grid > .pk-card:nth-child(3n+2), .bl-grid > .bl-card:nth-child(even), .gd-grid > .gd-item:nth-child(3n+2), .hb-actions > .hb-act:nth-child(even) { rotate: 0.5deg; }

/* page titles: marker scribble under the last word instead of a neat line */
.lp-hero__title em, .hb-hello__title em, .cn__title em { position: relative; }
.lp-hero__title em:not(.glitter), .hb-hello__title em:not(.glitter), .cn__title em:not(.glitter) { background: none !important; }
.lp-hero__title em::after, .hb-hello__title em::after, .cn__title em::after {
  content: "";
  position: absolute;
  left: -2%; right: -4%; bottom: -0.08em;
  height: 0.32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14c30-8 70-10 110-6s70 6 102-2M10 19c40-6 90-6 150-2' fill='none' stroke='%23ffd66b' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  z-index: -1;
}

/* torn paper top edge on the dark bands */
.lp-full, .pk-biz {
  -webkit-mask: linear-gradient(#000, #000) 0 18px / 100% calc(100% - 18px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V9l6-5 7 6 8-7 6 5 9-6 7 7 8-6 6 4 9-7 7 6 8-5 6 6 9-6 7 5 8-6 9 7V18z'/%3E%3C/svg%3E") 0 0 / 240px 19px repeat-x;
          mask: linear-gradient(#000, #000) 0 18px / 100% calc(100% - 18px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V9l6-5 7 6 8-7 6 5 9-6 7 7 8-6 6 4 9-7 7 6 8-5 6 6 9-6 7 5 8-6 9 7V18z'/%3E%3C/svg%3E") 0 0 / 240px 19px repeat-x;
  border-radius: 0 !important;
}

/* hero: left-aligned on phones too (no centred brochure look) */
@media (max-width: 859px) {
  .lp-hero { justify-items: start; text-align: left; }
  .lp-hero__logo { margin-left: 0; }
  .lp-hero__sub { margin-left: 0; }
  .lp-hero__cta { justify-content: flex-start; }
  .lp-collage { justify-self: center; }
}

/* butterfly sticker in the hero scrapbook */
.lp-butterfly { right: 6px; top: -6px; width: 64px; z-index: 5; transform: rotate(16deg); animation: pop-flutter 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes pop-flutter { 0%, 100% { scale: 1 1; } 50% { scale: 0.86 1; } }

/* selection + focus get the pop treatment */
::selection { background: var(--pop); color: #fff; }

/* tab bar active dot looks hand-drawn */
.tabbar__item[aria-current="page"]::before { background: var(--pop); height: 4px; border-radius: 0 0 6px 6px; }

/* toast as a sticker */
.tg-toast { border: 2px solid var(--ink-line); box-shadow: 4px 4px 0 var(--pop); border-radius: 16px; }

/* ---------- loading: shimmer placeholders + the heart loader (delight.js) ---------- */
@keyframes tg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.tg-skel,
[data-settle]:not(.is-settled) [data-wait] {
  background: linear-gradient(90deg, var(--blush-soft) 0%, #fff 50%, var(--blush-soft) 100%) 0 0 / 200% 100% !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  border-color: transparent !important;
  box-shadow: none !important;
  animation: tg-shimmer 1.3s ease-in-out infinite !important;
  pointer-events: none;
  user-select: none;
}
.tg-skel { display: block; border-radius: var(--radius-sm); }
[data-settle]:not(.is-settled) [data-wait] > * { visibility: hidden; }
[data-settle]:not(.is-settled) [data-wait]::before,
[data-settle]:not(.is-settled) [data-wait]::after { opacity: 0; }
[data-settle]:not(.is-settled) :is(em, span, b)[data-wait] { border-radius: 8px; }

.tg-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--rose-dark);
  font-size: 0.9rem;
  font-weight: 600;
}
.tg-loader__hearts { display: flex; gap: 0.45rem; }
.tg-loader__hearts svg { width: 20px; height: 20px; fill: var(--rose); animation: tg-hop 1s ease-in-out infinite; }
.tg-loader__hearts svg:nth-child(2) { fill: var(--pop); animation-delay: 0.15s; }
.tg-loader__hearts svg:nth-child(3) { fill: var(--maroon); animation-delay: 0.3s; }
@keyframes tg-hop { 0%, 60%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-9px) scale(1.12); } }
.tg-loader__text::after {
  content: "...";
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: tg-dots 1.2s steps(4, end) infinite;
}
@keyframes tg-dots { to { width: 1.2em; } }
.tg-loader.is-slow .tg-loader__hearts svg { animation-play-state: paused; }
.tg-loader.is-slow .tg-loader__text::after { content: none; }
.tg-loader__retry {
  font: inherit;
  color: var(--maroon);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0.3rem 0.2rem;
  cursor: pointer;
}
/* over a card: soft blur on what's underneath while it loads */
.tg-loader--over {
  position: absolute;
  inset: 0;
  z-index: 3;
  justify-content: center;
  border-radius: inherit;
  background: rgba(255, 247, 250, 0.6);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.cal-month-card { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .tg-skel, [data-settle]:not(.is-settled) [data-wait], .tg-loader__hearts svg { animation: none !important; }
  .tg-loader__text::after { animation: none; width: auto; }
  .glitter, .lp-butterfly { animation: none; }
  .lp-btn--solid, .gate__google, .pk-visit, .cal-modal__cta, .pf-save { transition: none; }
}

/* ---------- phone fit: nothing may push the page sideways ---------- */
html, body { overflow-x: clip; max-width: 100%; }
.pf-seal { right: 0.3rem; }
.bl { overflow-x: clip; }
.topnav__profile { position: relative; }
.topnav__menu { right: 0; left: auto; max-width: calc(100vw - 2rem); }
.cal-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cal-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 380px) {
  .cal-month-card { padding: 0.4rem; }
  .cal-dow, .cal-days { gap: 2px; }
  .cal-cell__num { width: 26px; height: 26px; font-size: 0.82rem; }
  .cal-month-card .cal-month__name { font-size: 1.1rem; }
  .cal-month__nav, .cal-month__today { min-height: 36px; }
  .cal-month__nav { width: 36px; height: 36px; }
}