/* Mini link-in-bio page (230×420 base). Shared by the landing page, the dashboard editor and public pages.
   Needs --f-ui, --f-display, --f-note and --f-mono from the host page. */
/* ---------- mini profile page rendered inside a card (230×420 base) ---------- */
.pg {
  width: 230px; height: 420px; overflow: hidden;
  padding: 24px 14px 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background-color: var(--bg); background-image: var(--pat, none); background-size: var(--pat-size, auto);
  color: var(--fg); text-align: center;
  font-family: var(--f-ui);
}
.pg.has-cover { padding-top: 0; }
.pg-av {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--acc); color: var(--av-fg, var(--bg));
  font: 700 20px/1 var(--pfd, var(--f-display)); letter-spacing: -0.02em;
  box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4px var(--acc);
}
.pg-av.is-art { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.pg-av.is-person { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4px var(--acc); }
.pg-cover.has-person { height: 196px; }
.pg-cover-face { position: absolute; left: 50%; top: 14px; width: 84px; height: 84px; margin-left: -42px; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 8px 18px -8px rgba(0,0,0,.35); }
.pg-wordmark { font: 800 22px/1 var(--pfd, var(--f-display)); letter-spacing: -0.03em; margin-top: 4px; white-space: pre-line; }
.pg-cover {
  position: relative; flex: none; align-self: stretch; margin-inline: -14px; height: 158px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 12px; gap: 2px;
  color: #3D2233;
}
.pg-cover-k { font: 600 6.5px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.pg-cover-name { font: 400 25px/1 var(--pfd, var(--f-display)); letter-spacing: .01em; }
.pg-cover-tag { font: 600 6.5px/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; }
.pg-name { font: 700 13.5px/1.15 var(--pfd, var(--f-display)); margin-top: 2px; letter-spacing: -0.01em; }
.pg-handle { font-size: 8px; opacity: .6; margin-top: -4px; }
.pg-bio { font-size: 8.3px; line-height: 1.45; opacity: .82; max-width: 186px; margin: 0; }
.pg-icons { display: flex; gap: 9px; margin-block: 1px 3px; }
.pg-icons span, .pg-service { display: inline-grid; }
.pg-icons svg { width: 13px; height: 13px; }
.pg-blocks { align-self: stretch; display: flex; flex-direction: column; gap: 7px; text-align: left; }

/* link button */
.pg-link {
  min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 10px;
  border-radius: var(--pr, 8px);
  background: var(--btn); color: var(--btn-fg);
  border: 1.5px solid var(--edge, transparent);
  box-shadow: var(--ps, none);
  font: 600 9.4px/1.15 var(--plf, var(--f-ui)); text-align: center;
}
.pg-link.has-thumb { justify-content: flex-start; text-align: left; padding: 5px; }
.pg-link.is-featured { background: var(--feat-bg, var(--acc)); color: var(--feat-fg, var(--bg)); border-color: var(--feat-bg, var(--acc)); }
.pg-link-text { display: grid; gap: 2px; min-width: 0; }
.pg-link-text small { font-weight: 400; font-size: 7px; opacity: .75; }
.pg-thumb { width: 34px; height: 34px; border-radius: calc(var(--pr, 8px) * .6); flex: none; }
.pg-pills { display: flex; justify-content: center; gap: 6px; }
.pg-pills span { padding: 5px 10px; border-radius: 999px; border: 1px solid currentColor; font: 600 7px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.pg-heading { font: 700 9.5px/1.2 var(--pfd, var(--f-display)); text-align: center; margin-top: 4px; }

/* music player */
.pg-music { background: var(--card, #14304A); color: var(--card-fg, #fff); border-radius: 12px; padding: 9px; display: grid; gap: 7px; }
.pg-music-top { display: flex; gap: 8px; align-items: flex-start; }
.pg-cover-sq { width: 50px; height: 50px; border-radius: 6px; flex: none; }
.pg-music-meta { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pg-music-meta b { font: 700 11.5px/1.1 var(--pfd, var(--f-display)); }
.pg-music-meta small { font-size: 7.5px; opacity: .7; }
.pg-save { display: inline-flex; align-items: center; gap: 3px; font-size: 6.8px; opacity: .85; margin-top: 2px; }
.pg-save svg { width: 9px; height: 9px; }
.pg-service svg { width: 12px; height: 12px; }
.pg-music-ctrl { display: flex; align-items: center; gap: 9px; }
.pg-music-ctrl > span { display: inline-grid; }
.pg-music-ctrl svg { width: 11px; height: 11px; }
.pg-preview { font: 700 6px/1 var(--f-ui); padding: 3px 4px; border-radius: 3px; background: rgba(255,255,255,.16); margin-right: auto; }
.pg-dots { font-size: 8px; letter-spacing: 1px; opacity: .8; }
.pg-play { width: 24px; height: 24px; border-radius: 50%; background: var(--card-fg, #fff); color: var(--card, #14304A); place-items: center; }
.pg-play svg { width: 12px; height: 12px; margin-left: 2px; }
.pg-tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pg-tracks li { display: grid; grid-template-columns: 10px 1fr auto; gap: 6px; font-size: 7.5px; align-items: center; }
.pg-tn, .pg-td { opacity: .6; font-family: var(--f-mono); font-size: 6.8px; }

/* now playing */
.pg-prog { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; font: 500 6.5px/1 var(--f-mono); opacity: .9; }
.pg-prog-bar { position: relative; height: 3px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.pg-prog-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--card-fg, #fff); border-radius: 999px; }
.pg-tracks .is-playing { font-weight: 700; }
.pg-tracks .is-playing .pg-td { opacity: 1; }
.pg-eq { display: inline-flex; align-items: flex-end; gap: 1.2px; width: 10px; height: 9px; }
.pg-eq b { flex: 1; background: currentColor; border-radius: 1px; height: 40%; animation: pg-eq .9s ease-in-out infinite; transform-origin: bottom; }
.pg-eq b:nth-child(2) { animation-delay: .25s; height: 100%; }
.pg-eq b:nth-child(3) { animation-delay: .5s; height: 65%; }
@keyframes pg-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.pg-video-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.35); }
.pg-video-prog::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: #FF0033; }
@media (prefers-reduced-motion: reduce) { .pg-eq b { animation: none; transform: none; } }

/* video */
.pg-video { display: grid; gap: 5px; }
.pg-video-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; display: grid; place-items: center; }
.pg-video-play { width: 28px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.92); color: #3D2233; display: grid; place-items: center; }
.pg-video-play svg { width: 10px; height: 10px; margin-left: 1px; }
.pg-video-dur { position: absolute; right: 6px; bottom: 6px; font: 600 6.5px/1 var(--f-mono); color: #fff; background: rgba(0,0,0,.6); padding: 2px 3px; border-radius: 3px; }
.pg-video-cap { display: flex; gap: 6px; align-items: center; font-size: 8.2px; }
.pg-video-cap b { font-weight: 600; line-height: 1.25; }

/* photo grid */
.pg-grid { display: grid; gap: 5px; }
.pg-grid-head { display: flex; gap: 5px; align-items: center; font: 600 8px/1 var(--f-ui); }
.pg-grid-head svg { width: 11px; height: 11px; }
.pg-grid-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.pg-grid-tile { aspect-ratio: 1; border-radius: 4px; }

/* product + event */
.pg-product {
  display: flex; gap: 8px; align-items: center; padding: 7px;
  background: var(--btn); color: var(--btn-fg); border: 1.5px solid var(--edge, transparent); box-shadow: var(--ps, none);
  border-radius: var(--pr, 10px);
}
.pg-product-img { width: 40px; height: 40px; border-radius: calc(var(--pr, 10px) * .7); flex: none; }
.pg-product-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pg-product-text b { font: 700 9px/1.15 var(--pfd, var(--f-ui)); }
.pg-product-text small { font-size: 7px; line-height: 1.3; opacity: .75; }
.pg-price { font: 700 7.5px/1 var(--f-mono); padding: 3px 5px; border-radius: 999px; background: var(--acc); color: var(--av-fg, var(--bg)); }
.pg-event { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; background: var(--card, #3D2233); color: var(--card-fg, #fff); }
.pg-event-img { width: 44px; height: 44px; border-radius: 7px; flex: none; }
.pg-event-text { display: grid; gap: 2px; }
.pg-event-text b { font: 700 9px/1.15 var(--f-ui); }
.pg-event-text small { font-size: 7px; opacity: .75; }

/* poster */
.pg-poster { border-radius: 12px; padding: 14px 12px; display: grid; gap: 4px; color: #3D2233; min-height: 104px; align-content: end; }
.pg-poster b { font: 800 22px/0.92 var(--f-display); letter-spacing: -0.03em; white-space: pre-line; }
.pg-poster-k, .pg-poster-m { font: 600 7px/1.2 var(--f-ui); letter-spacing: .06em; }
.pg-poster-k { text-transform: uppercase; letter-spacing: .2em; }

/* ribbon */
.pg-marquee { margin-inline: -24px; transform: rotate(-4deg); background: var(--ribbon, #F7CADB); color: var(--ribbon-fg, #3D2233); padding: 5px 0; overflow: hidden; white-space: nowrap; margin-block: 6px; }
.pg-marquee span { display: inline-block; font: 600 11px/1 var(--f-note); letter-spacing: .01em; }

/* banner header (script logo on a dark band) */
.pg-banner { align-self: stretch; margin: -24px -14px 0; height: 74px; background: #3D2233; color: #fff; display: grid; place-items: center; align-content: center; gap: 2px; }
.pg-banner-script { font: 600 34px/0.8 var(--f-note); letter-spacing: .01em; }
.pg-banner-sub { font: 600 6.5px/1 var(--f-ui); letter-spacing: .5em; text-transform: uppercase; }
.pg-banner-logo { width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; background: #fff; color: #3D2233; border: 1.5px solid #3D2233; display: grid; place-items: center; font: 600 17px/1 var(--f-note); }
.pg-av.is-smile { background: #FFC93C; position: relative; box-shadow: none; }
.pg-av.is-smile::after { content: ""; position: absolute; left: 30%; right: 30%; top: 38%; height: 24%; border: 3px solid #3D2233; border-top: 0; border-radius: 0 0 40px 40px; }
.pg-av.is-logo { border-radius: 50%; font-size: 13px; line-height: .95; text-align: center; white-space: pre-line; }
.pg-headline { font: 700 10.5px/1.25 var(--pfd, var(--f-display)); max-width: 190px; }
.pg-meta { font: 600 6.8px/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.pg-bio.is-script { font: 400 11px/1.2 var(--f-serif-i, 'DM Serif Display', serif); font-style: italic; opacity: .7; }

/* white card with paragraph */
.pg-card { position: relative; background: #FFFFFF; color: #3D2233; border-radius: 10px; padding: 9px 10px; display: grid; gap: 4px; text-align: center; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); overflow: hidden; }
.pg-card b { font: 700 8.5px/1.2 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; position: relative; }
.pg-card small { font-size: 6.8px; line-height: 1.4; opacity: .8; position: relative; }
.pg-card-script { position: absolute; inset: 0; display: grid; place-items: center; font: 600 34px/1 var(--f-note); opacity: .12; }

/* shelf */
.pg-shelf { display: grid; gap: 5px; margin-right: -14px; }
.pg-shelf-row { display: flex; gap: 6px; overflow: hidden; }
.pg-shelf-item { position: relative; flex: none; width: 150px; height: 104px; border-radius: 10px; overflow: hidden; }
.pg-shelf-item + .pg-shelf-item { width: 60px; }
.pg-shelf-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 6px 6px; background: rgba(255,255,255,.92); color: #2A2428; font: 600 7.5px/1 var(--f-ui); text-align: center; }
.pg-shelf-over { position: absolute; inset: 10px 8px auto; color: #fff; font: 400 italic 15px/1 'DM Serif Display', serif; text-transform: uppercase; }
.pg-shelf-dots { text-align: center; font-size: 5px; letter-spacing: 3px; opacity: .5; margin-right: 14px; }

/* promo */
.pg-promo { display: grid; gap: 4px; padding: 5px 5px 9px; border: 1.5px solid #C2185B33; border-radius: 6px; background: #FFF6F9; text-align: center; color: #3D2233; }
.pg-promo-img { position: relative; height: 82px; border-radius: 4px; overflow: hidden; }
.pg-promo-over { position: absolute; left: 0; right: 0; top: 7px; text-align: center; color: #fff; font: 400 italic 16px/1 'DM Serif Display', serif; }
.pg-promo-tag { position: absolute; left: 50%; top: 27px; transform: translateX(-50%); background: #C2185B; color: #fff; font: 700 5.5px/1 var(--f-ui); padding: 2px 4px; border-radius: 2px; white-space: nowrap; }
.pg-promo b { font: 700 9px/1.2 var(--f-ui); }
.pg-promo small { font-size: 6.8px; line-height: 1.4; opacity: .8; }
.pg-promo-cta { justify-self: center; background: #3D2233; color: #fff; font: 700 7.5px/1 var(--f-ui); padding: 6px 12px; border-radius: 3px; margin-top: 2px; }

/* lines, note, nav */
.pg-lines { display: grid; gap: 3px; text-align: center; font: 400 7.5px/1.35 'DM Serif Display', serif; opacity: .85; }
.pg-note-small { font: 700 5.8px/1.4 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; text-align: center; opacity: .85; }
.pg-nav { display: flex; justify-content: center; gap: 14px; font: 600 6.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-top: 4px; }

/* poster variants */
.pg-poster.is-big { min-height: 150px; align-content: center; justify-items: center; text-align: center; padding: 12px 8px; }
.pg-poster.is-big b { font-size: 36px; line-height: .82; -webkit-text-stroke: 1.5px #E8341A; }
.pg-poster-screen { width: 92px; height: 56px; margin-top: 4px; }

/* 1:1 booking */
.pg-book { display: grid; gap: 8px; padding: 10px; border-radius: var(--pr, 10px); background: var(--card, #FFFFFF); color: var(--card-fg, inherit); border: 1.5px solid var(--edge, transparent); }
.pg-book-top { display: flex; gap: 8px; align-items: flex-start; }
.pg-book-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pg-book-text b { font: 700 9.5px/1.15 var(--pfd, var(--f-ui)); }
.pg-book-text small { font-size: 7px; opacity: .75; }
.pg-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pg-slot { font: 600 7px/1 var(--f-mono); text-align: center; padding: 6px 2px; border-radius: 6px; border: 1px solid var(--edge, rgba(0,0,0,.15)); opacity: .8; }
.pg-slot.is-on { background: var(--acc); color: var(--av-fg, var(--bg)); border-color: var(--acc); opacity: 1; }
.pg-book-btn { text-align: center; font: 700 8.5px/1 var(--f-ui); padding: 8px; border-radius: 999px; background: var(--btn); color: var(--btn-fg); }
.pg-icons.is-many { flex-wrap: wrap; justify-content: center; max-width: 190px; gap: 7px 8px; }

/* email signup */
.pg-email { display: grid; gap: 5px; padding: 9px; border-radius: var(--pr, 10px); background: var(--card, rgba(255,255,255,.6)); color: var(--card-fg, inherit); }
.pg-email b { font: 700 8.5px/1.2 var(--f-ui); }
.pg-email-row { display: flex; gap: 4px; }
.pg-email-input { flex: 1; font-size: 7.5px; padding: 6px 7px; border-radius: 999px; background: #fff; color: #8a86a6; border: 1px solid rgba(0,0,0,.08); }
.pg-email-btn { width: 22px; height: 22px; border-radius: 50%; background: var(--btn); color: var(--btn-fg); display: grid; place-items: center; }
.pg-email-btn svg { width: 11px; height: 11px; }

/* ---------- live pages (the editor preview and public pages): grow with content, links are clickable ---------- */
.pg.pg-live { height: auto; min-height: 420px; overflow: visible; padding-bottom: 28px; }
.pg-a { display: block; color: inherit; text-decoration: none; }
.pg-a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }
.pg-icons a { display: inline-grid; color: inherit; }

/* email signup block (a real form; the static .pg-email above is the landing-page showcase) */
.pg-signup { min-width: 0; display: grid; gap: 5px; padding: 9px 10px; border-radius: min(var(--pr, 10px), 14px); background: var(--card, #fff); color: var(--card-fg, #3D2233); text-align: center; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); }
.pg-signup b { font: 700 8.5px/1.2 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; }
.pg-signup small { font-size: 6.8px; line-height: 1.4; opacity: .8; }
.pg-signup-row { display: flex; gap: 4px; min-width: 0; }
.pg-signup-in { flex: 1; width: 0; min-width: 0; height: 20px; padding: 0 7px; border: 1px solid rgba(0,0,0,.2); border-radius: 999px; background: #fff; color: #2A2428; font: 400 7.5px/1 var(--f-ui); }
.pg-signup-btn { flex: none; white-space: nowrap; height: 20px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--card-fg, #3D2233); color: var(--card, #fff); font: 700 7.5px/1 var(--f-ui); cursor: pointer; }
.pg-signup-btn:disabled { opacity: .6; cursor: default; }
.pg-signup-btn[data-busy] { cursor: progress; }   /* the busy cursor only while the request is running */
.pg-signup-priv { font-size: 6px; opacity: .65; }
.pg-signup-msg { margin: 0; min-height: 0; font: 600 7px/1.3 var(--f-ui); }
.pg-signup-msg:empty { display: none; }
.pg-signup-msg[data-tone="err"] { color: #B3261E; }
.pg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pg-live .pg-signup-in, .pg-live .pg-signup-btn { height: calc(26px / var(--zoom, 1.6)); font-size: calc(16px / var(--zoom, 1.6)); }   /* 16px on screen, so phones don't zoom in on focus */