@charset "UTF-8";
/* picd.in — Upload-success (/<uuid>/share) and public image (/<uuid>) pages.
   Recreated from the design handoff. Tokens live in frontpage.css :root;
   here are the .ip-* component styles. Loaded site-wide (class-prefixed). */

@keyframes ip-fade-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes ip-pop { 0% { transform:scale(.6); opacity:0; } 60% { transform:scale(1.08); } 100% { transform:scale(1); opacity:1; } }

.ip-page{ font-family:var(--font-body); color:var(--text-body); line-height:var(--leading-normal); -webkit-font-smoothing:antialiased; }
.ip-page h1,.ip-page h3{ font-family:var(--font-display); font-weight:700; color:var(--text-strong); margin:0; }

/* ---- shared: LinkChip ---- */
.ip-linkchip{
  display:inline-flex; align-items:center; gap:10px; max-width:100%;
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-pill); padding:8px 8px 8px 18px; box-shadow:var(--shadow-xs);
}
.ip-linkchip__url{
  font-family:var(--font-mono); font-size:var(--text-md); font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ip-linkchip__url .dom{ color:var(--neutral-500); }
.ip-linkchip__url .slug{ color:var(--teal-600); }
.ip-linkchip__copy{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px; border:none;
  background:var(--teal-500); color:#fff; font-family:var(--font-body); font-weight:700;
  font-size:var(--text-sm); padding:10px 16px; border-radius:var(--radius-pill); cursor:pointer;
  transition:filter var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.ip-linkchip__copy:hover{ filter:brightness(.94); }
.ip-linkchip__copy.is-copied{ background:var(--lime-600); }
.ip-linkchip__copy svg{ display:block; }

/* ---- shared: social share buttons ---- */
.ip-share-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ip-share-btn{
  width:46px; height:46px; border-radius:var(--radius-circle);
  border:1px solid var(--border-default); background:var(--surface-card);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-xs); text-decoration:none;
  transition:transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.ip-share-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ip-share-btn svg{ width:20px; height:20px; }

/* ---- shared: ad slot (hosts the real AdSense unit, clean container) ---- */
.ip-ad{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.ip-ad__label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-subtle);
}
.ip-ad__slot{ width:100%; min-height:96px; display:flex; align-items:center; justify-content:center; }
.ip-ad__slot .adsbygoogle{ width:100%; }
.ip-ad--leaderboard .ip-ad__slot{ max-width:728px; }

/* ================= Screen 1 — Uploaded (success) ================= */
.ip-success{ max-width:680px; margin:0 auto; padding:56px 24px 8px; animation:ip-fade-up .35s var(--ease-out) both; }
.ip-success__head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:28px; }
.ip-check{
  width:56px; height:56px; border-radius:var(--radius-circle); background:var(--surface-brand-subtle);
  display:flex; align-items:center; justify-content:center; animation:ip-pop .45s var(--ease-out) both;
}
.ip-success__head h1{ font-size:var(--text-3xl); }
.ip-success__sub{ font-size:var(--text-md); color:var(--text-muted); margin:0; max-width:440px; }

.ip-card{
  border-radius:var(--radius-lg); background:var(--surface-card);
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-lg); overflow:hidden;
}
.ip-card__media{ position:relative; background:var(--neutral-100); }
.ip-card__media img{ display:block; width:100%; max-height:360px; object-fit:cover; }
.ip-card__media video{ display:block; width:100%; max-height:360px; background:#0c1b26; }
.ip-badge-uploaded{
  position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--radius-pill); background:rgba(12,27,38,.72); color:#fff;
  font-family:var(--font-mono); font-size:11px; font-weight:700; backdrop-filter:blur(4px);
}
.ip-card__body{ padding:20px 22px 24px; }
.ip-filerow{ display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ip-iconbtns{ display:flex; gap:8px; }
.ip-iconbtn{
  width:40px; height:40px; border-radius:var(--radius-md); border:1px solid var(--border-default);
  background:var(--surface-card); color:var(--text-muted); display:flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none; transition:color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ip-iconbtn:hover{ color:var(--text-body); border-color:var(--text-subtle); }
.ip-linkchip-wrap{ display:flex; justify-content:center; margin-bottom:20px; }
.ip-divider-lbl{ display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.ip-divider-lbl .line{ flex:1; height:1px; background:var(--border-subtle); }
.ip-divider-lbl span{ font-size:var(--text-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle); }
.ip-success__reset{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.ip-success__ad{ max-width:1120px; margin:48px auto 72px; padding:0 24px; }

/* ================= Screen 2 — Public image page ================= */
.ip-hero{
  width:100%; padding:28px 0 0; box-sizing:border-box; display:flex; justify-content:center;
  animation:ip-fade-up .35s var(--ease-out) both;
}
/* Scale the image proportionally to fill the viewport height and extend across
   the width (up to full width) — the element hugs the image so there's no
   letterbox padding. object-fit only kicks in for ultra-wide panoramas. */
.ip-hero img, .ip-hero video{
  display:block; width:auto; height:calc(100vh - 108px); max-width:100%;
  object-fit:contain; border-radius:8px; box-shadow:var(--shadow-lg);
}
.ip-hero video{ background:#0c1b26; }
.ip-shell{ max-width:1160px; margin:0 auto; padding:0 24px; }

.ip-panel{
  margin-top:32px; border-radius:var(--radius-lg); background:var(--surface-card);
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); padding:28px 24px; text-align:center;
}
.ip-panel h3{ font-size:var(--text-lg); margin:0 0 4px; }
.ip-panel__sub{ margin:0 0 18px; font-size:var(--text-sm); color:var(--text-muted); }

.ip-info{
  margin-top:16px; border-radius:var(--radius-lg); background:var(--surface-card);
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); padding:24px;
}
.ip-info__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ip-facts{ flex:1; min-width:280px; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:16px; }
.ip-fact{ display:flex; flex-direction:column; gap:3px; }
.ip-fact__k{ font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); }
.ip-fact__v{ font-family:var(--font-mono); font-size:var(--text-sm); color:var(--text-strong); font-weight:700; }
.ip-actions{ display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.ip-toolbtn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-body);
  font-family:var(--font-body); font-weight:600; font-size:var(--text-sm); cursor:pointer; text-decoration:none;
  transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ip-toolbtn:hover{ color:var(--text-body); background:var(--neutral-50); border-color:var(--text-subtle); }
.ip-hr{ height:1px; background:var(--border-subtle); margin:20px 0; }
.ip-desc{ margin:0; font-size:var(--text-sm); line-height:var(--leading-relaxed); color:var(--text-muted); }

/* other versions (annotation family) */
.ip-versions{ margin-top:24px; }
.ip-versions__title{ font-size:var(--text-md); margin:0 0 14px; }
.ip-versions__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.ip-version{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:6px; background:var(--surface-card);
  transition:border-color .15s var(--ease-standard), box-shadow .15s var(--ease-standard), transform .15s var(--ease-standard);
}
.ip-version:hover{ border-color:var(--border-default); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.ip-version.is-current{ border-color:var(--teal-500); box-shadow:0 0 0 1px var(--teal-500); }
.ip-version__thumb{ position:relative; display:block; aspect-ratio:16/10; border-radius:var(--radius-sm); overflow:hidden; background:var(--neutral-100); }
.ip-version__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(12,27,38,.28);
}
.ip-version__play svg{ background:rgba(12,27,38,.6); border-radius:var(--radius-circle); padding:6px; width:28px; height:28px; }
.ip-version__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ip-version__date{ font-size:var(--text-xs); color:var(--text-subtle); font-family:var(--font-mono); text-align:center; }
.ip-report{ display:flex; justify-content:center; margin-top:22px; }
.ip-report a{ display:inline-flex; align-items:center; gap:7px; font-size:var(--text-sm); font-weight:600; color:var(--text-subtle); text-decoration:none; }
.ip-report a:hover{ color:var(--text-link-hover); }

@media (max-width:560px){
  .ip-success{ padding:40px 16px 8px; }
  .ip-success__head h1{ font-size:36px; }
  .ip-linkchip__url{ font-size:var(--text-sm); }
}

/* "More on picd.in" — internal-linking grid of other public shares. */
.ip-more{ margin-top:40px; }
.ip-more__title{ font-size:var(--text-lg); margin:0 0 16px; }
.ip-more__title a{ color:var(--text-strong); text-decoration:none; }
.ip-more__title a:hover{ text-decoration:underline; }
.ip-more__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.ip-more__card{ display:flex; flex-direction:column; gap:8px; text-decoration:none; }
.ip-more__thumb{ position:relative; display:block; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; background:var(--neutral-100); }
.ip-more__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ip-more__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(12,27,38,.28); }
.ip-more__play svg{ background:rgba(12,27,38,.6); border-radius:var(--radius-circle); padding:6px; width:28px; height:28px; }
.ip-more__desc{ font-size:var(--text-sm); color:var(--text-muted); line-height:var(--leading-normal); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Video with non-destructive edits: annotations draw over the frame. */
.ip-videowrap { position: relative; display: block; }
.ip-videowrap video { display: block; width: 100%; }
.ip-videooverlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }