@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@400;600;700;800;900&display=swap');

.profile-popup-trigger { border: 0; cursor: pointer; }

.profile-popup {
  --accent: #c95a27;
  --accent-dark: #7e3519;
  --accent-pale: #f5d78d;
  --mist: #fff6e4;
  width: min(calc(100vw - 28px), 350px);
  max-height: calc(100svh - 28px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 18px;
  background: #fffdfa;
  color: #111;
  font-family: Outfit, sans-serif;
  box-shadow: 0 18px 45px rgba(17, 17, 17, .28);
}

.profile-popup::backdrop { background: rgba(17, 17, 17, .52); backdrop-filter: blur(3px); }
.profile-popup[open] { animation: profile-popup-zoom-in .3s cubic-bezier(.18, .78, .28, 1.2); }
.profile-popup[open]::backdrop { animation: profile-popup-backdrop-in .3s ease; }
.profile-popup.is-closing { animation: profile-popup-zoom-out .17s ease forwards; }
.profile-popup.is-closing::backdrop { animation: profile-popup-backdrop-out .17s ease forwards; }
@keyframes profile-popup-zoom-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes profile-popup-zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.2); } }
@keyframes profile-popup-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes profile-popup-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
.profile-popup-view, .profile-popup-foot { transition: opacity .18s ease; }
.profile-popup.is-swapping .profile-popup-view, .profile-popup.is-swapping .profile-popup-foot { opacity: 0; }
.profile-popup-boot { display: grid; gap: 14px; justify-items: center; padding: 52px 22px; text-align: center; }
@property --profile-popup-spin-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.profile-popup-boot-spinner { width: 34px; height: 34px; border-radius: 50%; padding: 3px; background: conic-gradient(from var(--profile-popup-spin-angle), transparent 0deg, transparent 230deg, var(--accent) 340deg, var(--accent) 360deg); animation: profile-popup-spin-border .9s linear infinite; }
.profile-popup-boot-spinner::after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: #fffdfa; }
@keyframes profile-popup-spin-border { to { --profile-popup-spin-angle: 360deg; } }
.profile-popup-boot p { display: flex; margin: 0; color: #5d5a54; font-size: 12px; font-weight: 800; }
.profile-popup-boot [data-popup-boot-dots] { display: inline-block; width: 1.6em; text-align: left; flex: none; }
.profile-popup.palette-lagoon { --accent: #217f8c; --accent-dark: #15515a; --accent-pale: #d9f0f1; --mist: #f0fbfa; }
.profile-popup.palette-sun { --accent: #c95a27; --accent-dark: #7e3519; --accent-pale: #f5d78d; --mist: #fff6e4; }
.profile-popup.palette-forest { --accent: #567343; --accent-dark: #32442a; --accent-pale: #dce8d3; --mist: #eff5e9; }
.profile-popup.palette-wind { --accent: #8b4557; --accent-dark: #592936; --accent-pale: #f7eef0; --mist: #fff4f5; }
.profile-popup button, .profile-popup input { font: inherit; }
.profile-popup button { cursor: pointer; }
.profile-popup button:focus-visible, .profile-popup input:focus-visible, .profile-popup a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.profile-popup-view[hidden] { display: none; }
.profile-popup [data-popup-status-footer][hidden] { display: none; }
.profile-popup:has([data-popup-view='account']:not([hidden])) { width: min(calc(100vw - 28px), 380px); }

.profile-popup-head {
  position: relative;
  min-height: 83px;
  padding: 14px 18px 10px;
  overflow: visible;
  border-bottom: 5px solid var(--accent);
  background: var(--accent-pale);
}
.profile-popup-head::after {
  position: absolute;
  right: -25px;
  bottom: -38px;
  width: 122px;
  height: 122px;
  background: url('/img/just-logo-transparent.png') center / contain no-repeat;
  content: '';
  filter: brightness(0) invert(1);
  opacity: .28;
  transform: rotate(-16deg);
}
.profile-popup-head h2 { position: relative; z-index: 1; max-width: 210px; margin: 7px 0 0; font-size: 25px; font-weight: 900; line-height: .92; }
.profile-popup-head h2 span { color: var(--accent-dark); }
.profile-popup-close { position: absolute; z-index: 2; top: 12px; right: 14px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .42); color: #111; }
.profile-popup-close:hover { background: #fff; }
.profile-popup-close svg, .profile-popup-view-link svg, .profile-popup-photo svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.profile-popup-body { display: grid; gap: 18px; padding: 22px 18px; }
.profile-popup-copy { margin: 0; color: #5d5a54; font-size: 12px; line-height: 1.35; }
.profile-popup-copy p { margin: 0 0 10px; }
.profile-popup-copy p:last-child { margin-bottom: 0; }
.profile-popup-copy b { color: #111; overflow-wrap: anywhere; }
.profile-popup-label { color: #65615a; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.profile-popup-input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid rgba(17, 17, 17, .2); border-radius: 10px; background: #fff; color: #111; font-size: 16px; font-weight: 700; }
.profile-popup-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: 0; }
.profile-popup-textarea { width: 100%; min-height: 140px; padding: 12px; border: 1px solid rgba(17, 17, 17, .2); border-radius: 10px; background: #fff; color: #111; font-size: 15px; font-weight: 500; font-family: inherit; resize: vertical; }
.profile-popup-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: 0; }
.profile-popup-primary { min-height: 44px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 900; }
.profile-popup-primary:hover { background: var(--accent-dark); }
.profile-popup-secondary { display: flex; justify-content: space-between; gap: 10px; }
.profile-popup-secondary button { border: 0; border-bottom: 1px solid currentColor; padding: 2px 0; background: transparent; color: var(--accent-dark); font-size: 10px; font-weight: 800; }
.profile-popup-secondary button:disabled { cursor: wait; opacity: .48; }
.profile-popup-code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.profile-popup-code-box { box-sizing: border-box; aspect-ratio: 1; min-height: 36px; padding: 0; border: 1px solid rgba(17, 17, 17, .2); border-radius: 9px; background: #fff; color: #111; font-size: 21px; font-weight: 800; text-align: center; transition: border-color .15s ease, box-shadow .15s ease; }
.profile-popup-code-box:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: 0; }

.profile-popup-account-head { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; min-height: 83px; padding: 11px 12px 0 14px; border-bottom: 5px solid var(--accent); background: var(--accent-pale); }
.profile-popup-account-head::after { position: absolute; right: -28px; bottom: -37px; width: 122px; height: 122px; background: url('/img/just-logo-transparent.png') center / contain no-repeat; content: ''; filter: brightness(0) invert(1); opacity: .28; transform: rotate(-16deg); }
.profile-popup-avatar { position: absolute; z-index: 3; bottom: -23px; left: 14px; width: 90px; height: 90px; margin: 0; border-radius: 50%; box-shadow: 0 5px 15px rgba(17, 17, 17, .18); }
.profile-popup-avatar-placeholder { position: relative; display: grid; width: 100%; height: 100%; place-items: end center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, white); color: var(--accent-dark); }
.profile-popup-avatar-placeholder svg { position: relative; z-index: 1; width: 78%; height: 78%; margin-bottom: -3px; fill: currentColor; }
.profile-popup-avatar-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.profile-popup-photo { position: absolute; right: -4px; bottom: -3px; display: grid; width: 26px; height: 26px; place-items: center; border: 0; border-radius: 50%; background: #fffdfa; color: #111; box-shadow: 0 2px 8px rgba(17, 17, 17, .22); }
.profile-popup-account-title { position: relative; z-index: 1; grid-column: 2; min-width: 0; padding-right: 40px; text-align: right; }
.profile-popup-account-title h2 { margin: 0; font-size: 15px; font-weight: 900; line-height: 1; }
.profile-popup-account-title h2 .profile-popup-account-sub { display: block; margin-top: 2px; color: var(--accent-dark); font-size: 24px; line-height: .95; }
.profile-popup-email { margin: 0; padding: 38px 14px 3px; color: #5d5a54; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.profile-popup-email b { color: #111; }
.profile-popup-settings { display: grid; gap: 13px; padding: 13px 14px; }
.profile-popup-section { border-top: 1px solid rgba(17, 17, 17, .12); padding-top: 12px; }
.profile-popup-visibility { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.profile-popup-visibility button { min-height: 35px; padding: 4px 3px; border: 0; border-radius: 9px; background: #efeee9; color: #111; font-size: 9px; font-weight: 900; line-height: 1.08; }
.profile-popup-visibility button[aria-pressed='true'] { background: var(--accent); color: #fff; }
.profile-popup-visibility button[data-visibility='public'][aria-pressed='true'] { background: var(--accent-dark); }
.profile-popup-access { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; color: #5d5a54; font-size: 11px; text-align: center; }
.profile-popup-access input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.profile-popup-gender { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.profile-popup-gender > span { font-size: 12px; }
.profile-popup-gender button { width: 38px; height: 38px; margin-left: 5px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 13%, white); color: var(--accent-dark); font-size: 11px; font-weight: 900; }
.profile-popup-gender button[aria-pressed='true'] { background: var(--accent); color: #fff; }
.profile-popup-slug { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(17, 17, 17, .2); border-radius: 10px; background: #fff; }
.profile-popup-slug label { display: flex; min-width: 0; align-items: center; }
.profile-popup-slug-prefix { padding-left: 8px; color: #68665f; font: 400 10px 'DM Mono', monospace; white-space: nowrap; }
.profile-popup-slug input { width: 100%; min-width: 0; padding: 10px 6px 10px 3px; border: 0; background: transparent; color: #111; font-size: 13px; font-weight: 800; }
.profile-popup .profile-popup-save { min-width: 61px; border: 0; background: var(--accent); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.profile-popup-slug-status { min-height: 14px; margin: 6px 1px 0; color: #42413c; font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.profile-popup-slug-status.is-error { color: #a42216; }
.profile-popup-view-link { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--accent) 13%, white); color: var(--accent-dark); font-size: 11px; font-weight: 900; }
.profile-popup-view-link:hover { background: color-mix(in srgb, var(--accent) 22%, white); }
.profile-popup-foot { display: grid; grid-template-areas: "actions" "notice"; padding: 10px 14px 12px; border-top: 1px solid rgba(17, 17, 17, .1); background: var(--mist); }
.profile-popup-foot-actions { position: relative; min-height: 18px; padding-right: 68px; }
.profile-popup-verify-context { display: inline-block; max-width: 100%; }
.profile-popup .profile-popup-verify, .profile-popup .profile-popup-verified { color: var(--accent-dark); font-size: 11px; font-weight: 800; line-height: 1; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.profile-popup .profile-popup-verify-requested { display: block; margin-bottom: 4px; color: #5d5a54; font-size: 10px; font-weight: 700; line-height: 1.3; }
.profile-popup .profile-popup-verify { border: 0; padding: 0; background: transparent; }
.profile-popup-verified { display: inline-block; padding: 5px 8px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 14%, white); text-decoration: none; }
.profile-popup .profile-popup-verify-note { display: block; margin-top: 4px; color: #5d5a54; font-size: 10px; font-weight: 400; line-height: 1; }
.profile-popup .profile-popup-logout { position: absolute; top: 2px; right: 0; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 3px; background: transparent; color: #ba3829; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.profile-popup-foot-actions { grid-area: actions; }
.profile-popup-status { grid-area: notice; min-height: 16px; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(17, 17, 17, .1); color: #42413c; font-size: 10px; font-weight: 700; opacity: 0; transform: translateY(-3px); transition: opacity .25s ease, transform .25s ease; }
.profile-popup-status.is-visible { opacity: 1; transform: translateY(0); }
.profile-popup-status[hidden] { display: none; }
.profile-popup-status.is-error { color: #a42216; }
.profile-popup-loading { grid-area: notice; display: flex; min-height: 16px; align-items: center; gap: 8px; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(17, 17, 17, .1); color: var(--accent-dark); font-size: 10px; font-weight: 800; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.profile-popup.is-busy .profile-popup-status { opacity: 0; }
.profile-popup.is-busy .profile-popup-loading { opacity: 1; visibility: visible; transition-delay: 0s; }
.profile-popup-spinner { width: 15px; height: 15px; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: profile-popup-spin .7s linear infinite; }
@keyframes profile-popup-spin { to { transform: rotate(360deg); } }
.profile-welcome-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.profile-welcome-checkbox { display: flex; align-items: center; gap: 7px; color: #5d5a54; font-size: 11px; font-weight: 700; }
.profile-welcome-checkbox input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.profile-welcome-actions .profile-popup-primary { flex: 0 0 auto; min-height: 40px; padding: 0 18px; }

/* Podgląd zdjęcia profilowego przed wysłaniem (widok "photo") — dwie maski
   odtwarzające realny wygląd zdjęcia w miejscach, gdzie się pojawia:
   okrągły avatar popupu (90px, .profile-popup-avatar-placeholder) i
   prostokątna 4:5 "ramka" z głównej strony profilu (.profile-photo-wrap
   w public/sylwetka-szablon.html). Obie maski renderują to samo,
   skompresowane źródło, które realnie poleci na serwer. */
.profile-popup-photo-input { display: none; }
.profile-popup-photo-previews { display: flex; align-items: flex-start; justify-content: center; gap: 24px; margin: 2px 0 6px; }
.profile-popup-photo-previews[hidden] { display: none; }
.profile-popup-photo-mask-round {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 22%, white);
  box-shadow: 0 5px 15px rgba(17, 17, 17, .18);
}
.profile-popup-photo-mask-round img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.profile-popup-photo-mask-card {
  position: relative;
  display: block;
  width: 110px;
  aspect-ratio: 4 / 5;
}
.profile-popup-photo-mask-card::before { content: ''; position: absolute; inset: 10px -10px -10px 10px; background: var(--accent-dark); }
.profile-popup-photo-mask-card img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Popupy listowe (bio-blocks, role-tags) — dodaj/usuń/reorder w jednym
   widoku, patrz public/js/sylwetka-popup.js. Szerszy popup niż domyślne
   350px, bo wiersze z textarea/strzałkami potrzebują więcej miejsca. */
.profile-popup:has([data-popup-view='bio-blocks']:not([hidden])),
.profile-popup:has([data-popup-view='role-tags']:not([hidden])),
.profile-popup:has([data-popup-view='story']:not([hidden])) { width: min(calc(100vw - 28px), 420px); }

.profile-popup-list { display: grid; gap: 10px; }
.profile-popup-list-row { border: 1px solid rgba(17, 17, 17, .15); border-radius: 10px; padding: 9px; background: #fff; }
.profile-popup-list-row-compact { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; }
.profile-popup-list-row-compact .profile-popup-input { min-height: 38px; }
.profile-popup-list-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.profile-popup-list-row-type { color: var(--accent-dark); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.profile-popup-list-row-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.profile-popup-list-row-actions button { display: grid; width: 26px; height: 26px; place-items: center; border: 0; border-radius: 7px; background: #efeee9; color: #111; font-size: 13px; line-height: 1; }
.profile-popup-list-row-actions button:hover { background: color-mix(in srgb, var(--accent) 20%, white); }
.profile-popup-list-row-actions button:disabled { cursor: not-allowed; opacity: .35; }
.profile-popup-list-row .profile-popup-textarea { min-height: 70px; font-size: 13px; }
.profile-popup-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-popup-secondary-btn { border: 1px dashed rgba(17, 17, 17, .3); border-radius: 9px; padding: 8px 12px; background: transparent; color: #111; font-size: 11px; font-weight: 800; }
.profile-popup-secondary-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.profile-popup-secondary-btn:disabled { cursor: not-allowed; opacity: .4; }

/* Popup "Dodaj historię" — przełącznik trybu "Z czym wiąże się historia?"
   (wyprawa z dropdownu vs wolny tekst), patrz validateStoryContext w
   functions/src/sylwetki.ts. */
.profile-popup-story-context-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.profile-popup-story-context-mode button { min-height: 38px; border: 0; border-radius: 9px; padding: 4px 6px; background: #efeee9; color: #111; font-size: 10.5px; font-weight: 800; line-height: 1.15; }
.profile-popup-story-context-mode button[aria-pressed='true'] { background: var(--accent); color: #fff; }
.profile-popup-story-panel[hidden] { display: none; }
.profile-popup-story-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.profile-popup-story-row label { display: grid; gap: 6px; }
/* Pole "Jak masz na imię?" (textarea — wybrane świadomie zamiast input,
   żeby zachować spójność z resztą formularza) nie potrzebuje domyślnej
   wysokości `.profile-popup-textarea` (140px, myślana pod dłuższy tekst
   historii) — to tylko imię, jedna krótka linijka wystarczy. */
.profile-popup-story-author-input { min-height: 46px; resize: none; }
.profile-popup-story-thanks { display: grid; gap: 16px; }
.profile-popup-story-thanks[hidden] { display: none; }
/* #popup-story-form dziedziczy display:grid po .profile-popup-body — bez
   tej reguły atrybut [hidden] nic nie robi (ten sam problem co wyżej przy
   .profile-popup-story-thanks), więc po "Dodaj historię" formularz zostawał
   widoczny razem z podziękowaniem zamiast ustąpić mu miejsca. */
#popup-story-form[hidden] { display: none; }

@media (max-width: 420px) { .profile-popup { width: calc(100vw - 20px); max-height: calc(100svh - 20px); } }
@media (prefers-reduced-motion: reduce) {
  .profile-popup[open], .profile-popup.is-closing, .profile-popup[open]::backdrop, .profile-popup.is-closing::backdrop { animation-duration: .01ms; }
  .profile-popup-view, .profile-popup-foot { transition: none; }
}