/* Guest view — phone portrait first. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page {
  width: min(100%, 30rem);
  margin-inline: auto;
  padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
}

/* ---------- intro ---------- */
.intro h1 {
  margin: .4rem 0 .5rem;
  font-size: clamp(2.3rem, 11vw, 3.1rem);
  font-weight: 800;
  font-stretch: 78%;
  line-height: .95;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.intro p { margin: 0 0 1rem; color: var(--muted); max-width: 34ch; }
.gallery-link { margin-bottom: 1.75rem; }
.gallery-count { color: var(--muted); font-weight: 500; }

/* ---------- composer print ---------- */
.composer { display: grid; gap: 1.5rem; }

.print--compose {
  display: block;
  width: 92%;
  justify-self: center;
  rotate: -1.5deg;
  cursor: pointer;
  transition: rotate .35s cubic-bezier(.3, 1.4, .5, 1);
  -webkit-tap-highlight-color: transparent;
}
.print--compose:active { rotate: 0deg; }
#file:focus-visible + .print--compose { outline: 3px solid var(--flash); outline-offset: 6px; }

.print--compose .shot {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ar, 1);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, rgb(255 255 255 / .025) 10px 20px),
    #1d1528;
  color: var(--paper);
  transition: aspect-ratio .3s;
}
.pick-empty {
  display: grid; justify-items: center; gap: .35rem;
  padding: 1rem; text-align: center;
}
.pick-empty svg { width: 3.25rem; height: 3.25rem; color: var(--flash); margin-bottom: .35rem; }
.pick-empty strong { font-size: 1.15rem; font-weight: 650; }
.pick-empty span { color: var(--muted); font-size: .9rem; }
.print--compose #preview { position: absolute; inset: 0; }
.print--compose.developing #preview { animation: develop 1.4s ease-out both; }
@keyframes develop {
  from { filter: brightness(1.9) saturate(0) blur(2px); opacity: .2; }
  60% { filter: brightness(1.15) saturate(.7) blur(0); opacity: 1; }
  to { filter: none; }
}
.pick-change {
  position: absolute; right: .6rem; bottom: .6rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgb(33 23 46 / .78);
  color: var(--text);
  font-size: .85rem; font-weight: 600;
  backdrop-filter: blur(6px);
}

.print--compose .figcaption { font-size: 1.6rem; min-height: 3.6rem; }
.print--compose .placeholder { color: #b5aac0; }

/* ---------- fields ---------- */
.fields { display: grid; gap: 1rem; }
.field label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .95rem; }
.opt { color: var(--muted); font-weight: 400; }
.field input, .field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--night-3);
  border-radius: var(--radius-m);
  background: var(--night-2);
  font-size: 1rem; /* ≥16px avoids iOS zoom-on-focus */
  transition: border-color .15s;
}
.field textarea { resize: vertical; min-height: 3.2rem; }
.field input::placeholder, .field textarea::placeholder { color: #8f81a6; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--flash); }
.hint { margin: .35rem 0 0; color: var(--muted); font-size: .85rem; }

/* ---------- send ---------- */
.send { display: grid; gap: .6rem; }
.send-btn { width: 100%; min-height: 3.4rem; font-size: 1.1rem; }
.progress { height: 6px; border-radius: 3px; background: var(--night-3); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--flash); transition: width .2s; }
.status { min-height: 1.5em; margin: 0; text-align: center; font-weight: 500; }
.status.ok { color: var(--flash); }
.status.err { color: var(--danger); }

/* ---------- your uploads ---------- */
.mine { margin-top: 3rem; }
.mine h2 { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 700; font-stretch: 85%; }
.count { color: var(--muted); font-weight: 500; }
.empty { color: var(--muted); margin: 0; }
.mine-note { color: var(--muted); margin: -.5rem 0 1.25rem; font-size: .92rem; }
.chip {
  position: absolute; left: .4rem; top: .4rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: rgb(33 23 46 / .8); color: var(--text);
  font-family: var(--ui); font-size: .75rem; font-weight: 600; line-height: 1.5;
  backdrop-filter: blur(4px);
}
.chip.is-public { background: var(--flash); color: var(--ink); }
.sheet-state { margin: .9rem 0 0; color: var(--muted); font-size: .95rem; }
.sheet-state.is-public { color: var(--flash); }
.mine-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem;
}
.tile {
  display: block; width: 100%;
  border: 0; cursor: pointer; text-align: left;
  --pad: 7%;
}
.mine-grid li:nth-child(odd) .tile { rotate: -1.2deg; }
.mine-grid li:nth-child(even) .tile { rotate: 1.4deg; }
.tile .figcaption { font-size: 1.15rem; min-height: 2.2rem; padding-block: .35em .55em; }
.tile .cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mine-grid li.just-added .tile { animation: drop .6s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes drop { from { translate: 0 -18px; opacity: 0; } }

.foot { margin-top: 3rem; color: var(--muted); font-size: .85rem; }

/* ---------- photo sheet ---------- */
.sheet {
  width: min(100vw - 1.5rem, 30rem);
  max-height: calc(100dvh - 1.5rem);
  padding: 1rem;
  border: 0; border-radius: var(--radius-m);
  background: var(--night-2); color: var(--text);
  overflow: auto;
}
.sheet::backdrop { background: rgb(15 10 22 / .82); backdrop-filter: blur(4px); }
.sheet[open] { animation: rise .25s ease-out; }
@keyframes rise { from { translate: 0 24px; opacity: 0; } }
.print--large .shot { aspect-ratio: auto; }
.print--large .shot img { height: auto; max-height: 62dvh; object-fit: contain; margin-inline: auto; }
.print--large figcaption { font-size: 1.6rem; }
.sheet-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.btn.danger { color: var(--danger); }