/* ============================================================
   yourcustomprofile.app — profile report affordance
   Sits with the credit line at the foot of the page. Deliberately
   quiet: it must be findable but never compete with the profile.
   ============================================================ */

.pg-report {
  position: fixed;
  right: clamp(10px, 2.5vw, 20px);
  bottom: clamp(10px, 2.5vw, 20px);
  z-index: 44;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(10, 12, 20, 0.72);
  backdrop-filter: blur(10px);
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.pg-report:hover {
  color: var(--danger);
  border-color: rgba(251, 113, 133, 0.4);
  background: rgba(10, 12, 20, 0.88);
}

.pg-report:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* The stack, bottom to top: report, share, message, like. Each step is 42px so
   the four round/pill controls never overlap and the group reads as one
   affordance column. */
.pg-share {
  bottom: calc(clamp(10px, 2.5vw, 20px) + 42px);
}

/* The message button sits above the share button, same material. */
.pg-message {
  bottom: calc(clamp(10px, 2.5vw, 20px) + 84px);
}

/* The like button is the top of the stack, one more 42px step up. It is a
   pill rather than a circle because the count rides inside it; the right edge
   and material match the buttons below. */
.pg-like {
  bottom: calc(clamp(10px, 2.5vw, 20px) + 126px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 34px;
  /* Keep the pill from ever eating the card on a narrow phone. */
  max-width: min(148px, 46vw);
  padding: 0 9px 0 8px;
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text-2);
}

.pg-like__heart {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.pg-like__heart svg {
  display: block;
  transition: transform 0.16s ease;
}

.pg-like__count {
  display: inline-block;
  min-width: 1ch;
  max-width: 7ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-like:hover {
  color: var(--danger);
  border-color: rgba(251, 113, 133, 0.45);
  background: rgba(10, 12, 20, 0.88);
}

.pg-like:hover .pg-like__heart svg { transform: scale(1.08); }

/* Filled state: this visitor already spent today's like here. */
.pg-like.is-liked {
  color: var(--danger);
  border-color: rgba(251, 113, 133, 0.55);
  background: rgba(44, 12, 22, 0.82);
}

.pg-like.is-liked .pg-like__heart svg { fill: currentColor; }

.pg-like.is-busy { opacity: 0.65; pointer-events: none; }

.pg-like.is-pop .pg-like__heart svg {
  animation: pg-like-pop 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pg-like-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.34); }
  100% { transform: scale(1); }
}

html[data-motion="low"] .pg-like.is-pop .pg-like__heart svg { animation: none; }

.pg-message:hover {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
  background: rgba(10, 12, 20, 0.88);
}

.pg-share:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: rgba(10, 12, 20, 0.88);
}

/* When the credit link is visible, lift the whole column above it. */
body.has-credit .pg-report { bottom: clamp(48px, 7vw, 62px); }
body.has-credit .pg-share { bottom: calc(clamp(48px, 7vw, 62px) + 42px); }
body.has-credit .pg-message { bottom: calc(clamp(48px, 7vw, 62px) + 84px); }
body.has-credit .pg-like { bottom: calc(clamp(48px, 7vw, 62px) + 126px); }

/* Phones get a horizontal row hugging the bottom edge instead of a column.
   A 4-step column reaches ~210px up the screen, which put the like and message
   buttons on top of the soundtrack player on every short viewport (the player
   sits at the bottom of the card stack, not at the page foot). One row under
   the player cannot overlap it, whatever the card height or screen ratio. */
@media (max-width: 780px), (pointer: coarse) {
  /* One horizontal row hugging the bottom edge. A 4-step column reached ~210px
     up the screen, which put the like and message buttons on top of the
     soundtrack player on every short viewport (the player sits at the foot of
     the card stack). A row under the player cannot overlap it, whatever the
     card height or screen ratio.
     The condition here must stay identical to the one that pins the player in
     mobile-budget.css (`max-width: 780px), (pointer: coarse)`). When the two
     disagreed, the 641–980px band — a phone in "desktop mode", or the same
     phone after a pinch/slight zoom, which lowers the CSS viewport width —
     kept the fixed player but reset the buttons to the desktop column, so the
     column drew over the social icons. One band, one rule. */
  .pg-like,
  .pg-message,
  .pg-share,
  .pg-report {
    top: auto;
    /* The credit pill is visible on phones (it is re-enabled below 700px), so
       the row clears it: 42px = credit height + its 14px bottom offset. */
    bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 42px);
  }
  /* Row order right→left: report, share, message, like. Anchoring on the right
     keeps the group where desktop users expect it without needing a wrapper
     element around four sibling buttons. The `body.has-credit` rules earlier in
     this file are more specific (0,2,0), so the row overrides repeat that
     prefix — otherwise the desktop column wins and the row never applies. */
  .pg-report  { right: 10px; }
  .pg-share   { right: 52px; }
  .pg-message { right: 94px; }
  .pg-like    { right: 136px; }
  body.has-credit .pg-report  { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 42px); right: 10px; }
  body.has-credit .pg-share   { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 42px); right: 52px; }
  body.has-credit .pg-message { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 42px); right: 94px; }
  body.has-credit .pg-like    { bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 42px); right: 136px; }
}

/* A hovered message button grows a short label so its purpose is obvious
   without a tooltip. The label is decorative — the button already carries an
   accessible name. */
.pg-message::after {
  content: "message";
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  translate: 0 -50%;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(10, 12, 20, 0.92);
  color: var(--text-1);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

.pg-message:hover::after,
.pg-message:focus-visible::after { opacity: 1; }

/* Same hover label model for the like button. */
.pg-like::after {
  content: "like";
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  translate: 0 -50%;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(10, 12, 20, 0.92);
  color: var(--text-1);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

.pg-like:hover::after,
.pg-like:focus-visible::after { opacity: 1; }

@media (max-width: 480px) {
  /* On a phone the label would overlap the card; keep the glyph only. */
  .pg-message::after { display: none; }
  .pg-like::after { display: none; }
}/* ------------------------------------------------------------- modal */

.pg-report-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 4, 8, 0.74);
  backdrop-filter: blur(8px);
  animation: report-fade 0.18s ease both;
}

.pg-report-modal[hidden] { display: none; }

@keyframes report-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pg-report-modal__card {
  width: min(460px, 100%);
  max-height: min(88vh, 640px);
  overflow-y: auto;
  padding: 20px 22px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(175deg, var(--bg-2), var(--bg-1) 65%);
  box-shadow: var(--shadow-3);
  animation: report-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes report-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.pg-report-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pg-report-modal__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-0);
}

.pg-report-modal__close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}

.pg-report-modal__close:hover { color: var(--text-0); border-color: var(--border-strong); }

.pg-report-modal__lede {
  margin: 0 0 16px;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-2);
}

.pg-report-form {
  display: grid;
  gap: 13px;
}

.pg-report-field {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-1);
}

.pg-report-field select,
.pg-report-field textarea {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-0);
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  resize: vertical;
}

.pg-report-field select:focus-visible,
.pg-report-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.pg-report-status {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-2);
}

.pg-report-status.is-error { color: var(--danger); }
.pg-report-status.is-ok { color: var(--ok); }

.pg-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

@media (max-width: 480px) {
  .pg-report-modal__card { padding: 16px 16px 18px; }
  .pg-report-actions { flex-direction: column-reverse; }
  .pg-report-actions .btn { width: 100%; }
}

html[data-motion="low"] .pg-report-modal, html[data-motion="low"] .pg-report-modal__card { animation: none !important; }

/* ---------------------------------------------------------- share sheet */

.pg-share__body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 4px;
}

.pg-share__qr {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 0 1px var(--border);
}

.pg-share__qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pg-share__side {
  flex: 1 1 auto;
  min-width: 0;
}

.pg-share__label {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}

.pg-share__url {
  margin: 0 0 12px;
  font-size: 0.72rem;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.pg-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pg-share__hint {
  margin: 10px 0 0;
  font-size: 0.68rem;
  color: var(--text-2);
}

.pg-share__preview {
  display: block;
  width: 100%;
  margin-top: 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.pg-share__preview[hidden] { display: none; }

/* ---------------------------------------------------------- share embed */

.pg-share__embed {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.pg-share__embed summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  list-style: none;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pg-share__embed summary::-webkit-details-marker { display: none; }

.pg-share__embed summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-3);
  width: 10px;
}

.pg-share__embed[open] summary::before { content: "−"; }
.pg-share__embed summary:hover { color: var(--text-0); }
.pg-share__embed summary:focus-visible {
  outline: 2px solid var(--accent-2, var(--accent));
  outline-offset: 2px;
  border-radius: 6px;
}

.pg-share__embed-body {
  padding-top: 10px;
  display: grid;
  gap: 8px;
}

.pg-share__code {
  margin: 0 0 4px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--text-1);
  font-size: 0.66rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

@media (max-width: 480px) {
  .pg-share__body { flex-direction: column; align-items: center; }
  .pg-share__qr { width: 160px; height: 160px; }
  .pg-share__side { width: 100%; }
  .pg-share__actions .btn { flex: 1 1 auto; }
}

/* Report sheet joins the site identity. */
.pg-report-modal__card { --world: var(--world-gothic); --world-2: var(--world-gothic-2); }