/* The share / poster pop-up (src/share/studio.js, src/poster/panel.js) and the
   "Print as a poster" button. Loaded after session6.css. */

/* ---- the second button: under "Share my life" when poster sales are on ---- */
.poster-fab {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  height: 42px; padding: 0 18px 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #1c1c21; color: var(--yellow);
  font-size: 15px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 0 0 1.5px rgba(255, 230, 0, 0.55);
  transition: transform 0.18s var(--ease-bounce), opacity 0.2s;
}
.poster-fab[hidden] { display: none; }
.poster-fab svg { width: 19px; height: 19px; }
.poster-fab:active { transform: translateX(-50%) scale(0.94); }
.poster-fab.busy { opacity: 0.7; pointer-events: none; }
body.poster-on .share-fab { bottom: calc(66px + env(safe-area-inset-bottom)); }
body.poster-on #app { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
body.dragging .poster-fab { opacity: 0; pointer-events: none; }
@media (min-width: 1200px) {
  body.poster-on .share-fab { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .poster-fab { height: 44px; font-size: 16px; }
}

/* ---- the pop-up ------------------------------------------------------------ */
.studio { width: min(94vw, 480px); padding-bottom: 12px; }
.studio .st-body { overflow-y: auto; min-height: 0; flex: 1; margin: 0 -18px; padding: 0 18px; overscroll-behavior: contain; }
.studio .export-imgs { overflow: visible; }
.studio h3 { margin-top: 2px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(212, 246, 255, 0.12); }
.st-tabs {
  display: flex; gap: 3px; padding: 3px; margin: -4px 38px 12px 0;
  border-radius: 14px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.st-tab { /* long labels (Portuguese) wrap onto two lines */
  flex: 1 1 0; min-width: 0; min-height: 38px; padding: 4px 8px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--muted);
  transition: background-color 0.15s, color 0.15s;
}
.st-tab span { font-family: var(--emoji-font); font-size: 16px; }
.st-tab[aria-selected="true"] { background: var(--surface3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 230, 0, 0.45); }
.st-tab:not([aria-selected="true"]):hover { color: var(--text); }
@media (max-width: 480px) { .st-tab span { display: none; } }
.st-loading { display: grid; justify-items: center; gap: 12px; padding: 48px 0 40px; color: var(--muted); font-size: 14px; }
.st-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255, 230, 0, 0.2); border-top-color: var(--yellow); animation: spin 0.9s linear infinite; }

/* numbered instructions */
.st-steps { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; counter-reset: st; }
.st-steps li { counter-increment: st; display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; color: var(--text); text-align: left; }
.st-steps li::before {
  content: counter(st); flex: none; width: 20px; height: 20px; margin-top: -1px; border-radius: 50%;
  display: grid; place-items: center; background: var(--yellow); color: #111; font-size: 12px; font-weight: 700;
}
/* (.card p would win over single classes: these carry .studio) */
.studio p.export-meta { margin: 4px 0 8px; font-size: 12.5px; }
.studio p.st-code { margin-top: 10px; }

/* ---- share tab: lead, tip, buttons on top, socials revealed by Share ---- */
.studio p.st-lead { margin: 2px 0 4px; font-size: 16px; font-weight: 600; color: var(--text); }
.studio p.st-tip { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.st-tip b { color: var(--yellow); }
.st-tip-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0 2px; vertical-align: -6px;
  border-radius: 8px; background: var(--surface3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(212, 246, 255, 0.25); }
.st-tip-ico .ui-ico { width: 15px; height: 15px; }
.studio .actions.st-top { margin: 6px 0 8px; }
.st-socials { margin: 2px 0 10px; }
.st-socials .social-wrap { margin-top: 4px; }
.social .soc-more { background: var(--surface3); color: var(--text); }
.social .soc-more .ui-ico { width: 22px; height: 22px; }

/* ---- carousel: several images, the next one peeking in --------------------- */
.car { margin: 4px 0 6px; }
.car-dots { display: flex; justify-content: center; gap: 7px; margin: 6px 0; }
.car-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: rgba(212, 246, 255, 0.25); transition: transform 0.2s var(--ease-bounce), background-color 0.2s; }
.car-dot.on { background: var(--yellow); transform: scale(1.35); box-shadow: 0 0 8px rgba(255, 230, 0, 0.5); }
.car-view { position: relative; }
.car-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-right: 14%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 86%; scroll-snap-align: start; }
.car-slide img { display: block; width: 100%; border-radius: 12px; border: 1px solid #2c2c33; background: #0d0d0f; }
.car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(23, 23, 27, 0.88); color: var(--yellow);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 0 0 1.5px rgba(255, 230, 0, 0.55);
  transition: opacity 0.2s, transform 0.18s var(--ease-bounce);
}
.car-arrow svg { width: 20px; height: 20px; }
.car-arrow.prev { left: 4px; }
.car-arrow.next { right: 4px; }
.car-arrow:disabled { opacity: 0; pointer-events: none; }
.car-arrow:active { transform: translateY(-50%) scale(0.9); }

/* ---- the poster tab -------------------------------------------------------- */
.po-vs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; font-size: 13px; }
.po-vs span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 90, 100, 0.7); }
.po-vs b { color: var(--yellow); }
.po-preview { display: grid; place-items: center; min-height: 180px; margin: 6px 0 12px; }
.po-preview img { width: 82%; border-radius: 3px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 0 5px #ececef; }
.po-facts { margin: 0 0 10px; padding: 0; list-style-position: inside; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.po-facts li::marker { color: var(--yellow); }
.studio .actions.po-actions { margin-top: 8px; }
.po-go { font-size: 16px; padding: 0 22px; height: 46px; }
.studio p.po-status { min-height: 18px; margin: 6px 0 0; font-size: 13px; color: var(--accent); text-align: center; }
.studio p.po-status:empty { min-height: 0; }
.studio p.po-status.err { color: #ff8a92; }
.po-dev { display: block; margin: 8px auto 0; font-size: 12px; height: 30px; opacity: 0.7; }
.studio p.po-fine { margin: 10px 0 0; font-size: 11px; line-height: 1.45; color: #6c6c75; text-align: center; }