/* ecstasz — Phase 1 styles. Self-hosted; system fonts only (P1-REQ-072). */

:root {
  color-scheme: light dark;
  --bg: #fafafa;
  --fg: #111;
  --muted: #4a4a4a;
  --panel: #fff;
  --border: #cfcfcf;
  --accent: #0b57d0;
  --accent-fg: #fff;
  --alert-bg: #fdecea;
  --alert-fg: #7a1610;
  --focus: #0b57d0;
  --danger: #c5221f;
  --danger-bg: #c5221f;
}

/* Theme: System follows the device; the owner's choice (Light or Dark, saved in
   this browser) sets data-theme on <html> before the page is drawn. The two
   dark blocks below must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --fg: #f2f2f2;
    --muted: #c4c4c4;
    --panel: #1e1e1e;
    --border: #555;
    --accent: #8ab4f8;
    --accent-fg: #0b1a33;
    --alert-bg: #3b1513;
    --alert-fg: #ffd9d4;
    --focus: #8ab4f8;
    --danger: #f28b82;
    --danger-bg: #d93025;
  }
}

:root[data-theme="dark"] {
  --bg: #121212;
  --fg: #f2f2f2;
  --muted: #c4c4c4;
  --panel: #1e1e1e;
  --border: #555;
  --accent: #8ab4f8;
  --accent-fg: #0b1a33;
  --alert-bg: #3b1513;
  --alert-fg: #ffd9d4;
  --focus: #8ab4f8;
  --danger: #f28b82;
  --danger-bg: #d93025;
}

/* Native controls (date picker, scrollbars, media controls) follow the choice too. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 32px;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.panel {
  width: 100%;
  max-width: 22rem;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

h1 { margin: 0 0 16px; font-size: 1.375rem; font-weight: 600; }

p { margin: 0 0 16px; }

label { display: block; margin: 0 0 4px; font-weight: 600; }

input[type="text"], input[type="password"] {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 10px 12px;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.notice {
  padding: 10px 12px;
  color: var(--alert-fg);
  background: var(--alert-bg);
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Owner pages: feed, post, new post (Phase 2) ---- */

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

body.app {
  display: block;
  padding: 0;
  min-height: 100vh;
}

/* The top bar: three zones, so the Z stays in the exact middle of the screen
   whatever is on either side: the owner's controls on the left (empty for a
   visitor), the Z (home), the light/dark switch on the right. Both sides get
   the same padding, the larger safe area included, to keep the middle true. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.topbar-start { display: flex; align-items: center; gap: 6px; min-width: 0; }

.topbar-end { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }

.topbar form { margin: 0; }

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
}

/* The owner's menu opens from the left edge, under its button. */
.topbar-start .menu-list { right: auto; left: 0; }

.button {
  display: inline-block;
  padding: 10px 16px;
  font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 8px;
  text-decoration: none;
}

.button-small { padding: 6px 12px; font-size: 0.9375rem; }

/* New post: a plus and its name; on a narrow phone the plus alone (the name
   is still read out). */
.new-post { display: inline-flex; align-items: center; gap: 4px; padding-left: 9px; }

.new-post svg { flex: none; width: 18px; height: 18px; }

@media (max-width: 419px) {
  .new-post { padding: 7px; }
  .new-post span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

.content {
  max-width: 935px;
  margin: 0 auto;
  padding: 16px 0 48px;
}

/* Feed grid: three square tiles a row, as on Instagram. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

@media (min-width: 736px) {
  .content { padding: 24px 16px 64px; }
  .grid { gap: 4px; }
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--border);
  color: var(--fg);
  text-decoration: none;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s;
}

.tile:hover img { opacity: 0.9; }

.tile-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.tile-badge svg, .tile-icon svg, .audio-icon svg { display: block; width: 100%; height: 100%; }

.tile-video, .tile-audio, .tile-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10%;
  text-align: center;
}

.tile-video { background: #1b1b1b; color: #fff; }
.tile-audio { background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b); color: #fff; }
.tile-note { background: var(--panel); border: 1px solid var(--border); }

.tile-icon { width: 34%; max-width: 56px; }

.tile-text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(0.75rem, 2.6vw, 1rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tile-audio .tile-text { -webkit-line-clamp: 3; }

.empty {
  max-width: 24rem;
  margin: 12vh auto 0;
  padding: 0 16px;
  text-align: center;
}

/* The viewer: posts in one scrolling column above everything else, with its
   own bar (back, title, light/dark). Opened over the grid by the script, or
   as a post's own page. The page behind does not scroll meanwhile. */
html.viewer-open { overflow: hidden; }

/* The page never pinch-zooms (accessibility zoom still works); pinches on
   media belong to the focus zoom. */
html { touch-action: pan-x pan-y; }

.viewer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  touch-action: pan-y;
}

.viewer.dragging { transition: none; }

.viewer.leaving {
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: transform 0.18s ease-in, opacity 0.18s ease-in;
}

.viewer-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.viewer-close {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--fg);
  border-radius: 50%;
}

.viewer-close:hover { background: var(--bg); }

.viewer-close svg { width: 100%; height: 100%; }

.viewer-title { margin-right: auto; font-size: 1.0625rem; font-weight: 600; }

.reel {
  position: relative;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none; /* the script keeps the view still when posts are added above */
  padding-bottom: env(safe-area-inset-bottom);
  outline: none;
}

/* After the last post: room to bring it up into view, and a quiet end. */
.reel-end {
  min-height: 55vh;
  margin: 0;
  padding: 28px 16px;
  font-size: 0.875rem;
  text-align: center;
  color: var(--muted);
}

/* One post in the viewer. */
.card {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 4px 8px 4px 16px;
}

.card-head time { font-size: 0.875rem; color: var(--muted); }

.card-text { padding: 10px 16px 0; }

.caption { margin: 0 0 12px; font-size: 1.0625rem; overflow-wrap: anywhere; }

.body { overflow-wrap: anywhere; }

.body p:last-child, .caption:last-child { margin-bottom: 0; }

/* Text without media: a reading card. */
.card.text-only .card-text { padding: 2px 20px 10px; }
.card.text-only .caption { font-size: 1.375rem; line-height: 1.4; font-weight: 500; }
.card.text-only .body { font-size: 1.0625rem; line-height: 1.65; }

@media (min-width: 640px) {
  .card { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
  .card.text-only .card-text { padding: 2px 32px 18px; }
}

/* The carousel: native horizontal scrolling with snap points, so swiping
   works with or without the script; the script adds buttons, keys and dots.
   The frame takes the first item's own shape (3:4 to 1.91:1 for a photo,
   9:16 to 1.91:1 for a video) and fits the screen; other items are shown
   whole inside it, on the page colour, never cropped. */
.stage {
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--bg);
}

@media (min-width: 640px) {
  .stage { background: var(--panel); }
}

.track {
  --ratio: 1;
  display: flex;
  width: min(100%, calc((100vh - 150px) * var(--ratio)));
  aspect-ratio: var(--ratio);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

@supports (height: 100svh) {
  .track { width: min(100%, calc((100svh - 150px) * var(--ratio))); }
}

.track::-webkit-scrollbar { display: none; }

.track:focus-visible { outline-offset: -3px; }

.r-916 { --ratio: 0.5625; }
.r-34 { --ratio: 0.75; }
.r-45 { --ratio: 0.8; }
.r-11 { --ratio: 1; }
.r-43 { --ratio: 1.3333; }
.r-32 { --ratio: 1.5; }
.r-169 { --ratio: 1.7778; }
.r-191 { --ratio: 1.91; }

.slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1px; /* a gap between slides: the track can sit at a fractional pixel */
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  touch-action: pan-x pan-y;
}

.slide img, .slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.slide .ph { position: absolute; inset: 0 1px; width: calc(100% - 2px); }

.slide .full { position: relative; }

.audio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 24px;
  color: #fff;
  background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b);
}

.audio-icon { width: 72px; height: 72px; color: #fff; }

.audio-length { font-size: 0.9375rem; font-variant-numeric: tabular-nums; opacity: 0.9; }

.audio-card audio { width: 100%; max-width: 420px; }

.step {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 7px;
  color: #111;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%);
}

.step:hover { background: #fff; }

.step svg { display: block; width: 100%; height: 100%; }

.step-prev { left: 10px; }
.step-next { right: 10px; }

@media (hover: none) {
  .step { display: none; }
}

.counter {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 2px 9px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  pointer-events: none;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 0;
}

.dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s;
}

.dots span.on { background: var(--accent); }

/* Focus zoom: while a photo or video is pinched it is lifted out of the page
   onto a dimmed layer and follows the fingers; it springs back on release. */
.focus {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0);
  transition: background-color 0.2s;
  touch-action: none;
}

.focus.on { background: rgba(0, 0, 0, 0.88); }

.focus .focused {
  position: absolute;
  margin: 0;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform;
}

/* Video: the script's controls. HDR: the picture keeps some headroom in the
   page and gets its full range in the immersive player, where the browser
   supports dynamic-range-limit (others ignore it). */
.slide-video { background: #000; }

.slide-video video { cursor: pointer; dynamic-range-limit: constrained-high; }

.im-video { dynamic-range-limit: no-limit; }

/* The immersive player: the video on its own black layer above everything,
   as large as the screen allows at its own shape, inside the safe areas. The
   script makes the layer full screen where the browser can (not iPhone). The
   controls fade while it plays ("calm") and come back on a tap. */
.immersive {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  color: #fff;
  touch-action: none;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}

.im-stage {
  position: absolute;
  top: env(safe-area-inset-top);
  right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left);
  transition: transform 0.2s;
}

.immersive.dragging .im-stage { transition: none; }

.im-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-touch-callout: none;
}

.im-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  z-index: 2;
  display: flex;
  width: 44px;
  height: 44px;
  padding: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
}

.im-close svg { width: 100%; height: 100%; }

.immersive .v-bar { padding: 28px 12px 10px; }

.immersive .v-bar, .immersive .v-sound, .im-close { transition: opacity 0.25s; }

.immersive.calm .v-bar, .immersive.calm .v-sound, .immersive.calm .im-close { opacity: 0; }

.immersive.calm .vui button, .immersive.calm .vui input, .immersive.calm .im-close { pointer-events: none; }

.immersive.calm { cursor: none; }

.vui { position: absolute; inset: 0; pointer-events: none; }

.vui button, .vui input { pointer-events: auto; }

.v-big {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 64px;
  height: 64px;
  padding: 18px;
  margin: -32px 0 0 -32px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

.v-big svg { width: 100%; height: 100%; }

.playing .v-big { display: none; }

.v-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 22px 8px 6px;
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}

.v-bar button {
  flex: none;
  display: flex;
  width: 32px;
  height: 32px;
  padding: 6px;
  color: #fff;
  background: transparent;
  border-radius: 50%;
}

.v-bar svg { width: 100%; height: 100%; }

.v-seek { flex: 1; min-width: 0; height: 20px; margin: 0; accent-color: #fff; }

.v-time { flex: none; font-size: 0.75rem; font-variant-numeric: tabular-nums; }

.v-toggle .i-pause, .playing .v-toggle .i-play { display: none; }
.playing .v-toggle .i-pause { display: block; }

.v-mute .i-muted, .muted .v-mute .i-volume { display: none; }
.muted .v-mute .i-muted { display: block; }

.v-sound {
  position: absolute;
  right: 10px;
  bottom: 52px;
  width: auto;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 999px;
}

.v-flash {
  position: absolute;
  top: 50%;
  padding: 8px 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.3s;
  pointer-events: none;
}

.v-back { left: 12%; }
.v-fwd { right: 12%; }
.v-flash.show { opacity: 1; transition: none; }

/* A tile is scrolled to below the sticky top bar when the viewer closes. */
.tile { scroll-margin-top: 64px; }

/* "⋯" menus (details/summary; the script closes them on an outside click or Escape). */
.menu { position: relative; }

.menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 7px;
  color: var(--fg);
  border-radius: 50%;
  list-style: none;
  cursor: pointer;
}

.menu > summary::-webkit-details-marker { display: none; }

.menu > summary:hover, .menu[open] > summary { background: var(--bg); }

.menu > summary svg { display: block; width: 100%; height: 100%; }

.menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 184px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.menu-list form { margin: 0; }

.menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-weight: 500;
  text-align: left;
  color: var(--fg);
  background: none;
  border-radius: 8px;
  text-decoration: none;
}

.menu-item:hover { background: var(--bg); }

.menu-danger { font-weight: 600; color: var(--danger); }

/* The light/dark switch in every top bar. The icon shows the theme in effect:
   the sun in light, the moon in dark, decided by CSS before any script runs. */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 7px;
  color: var(--fg);
  background: transparent;
  border-radius: 50%;
}

.theme-toggle:hover { background: var(--bg); }

.theme-toggle svg { display: block; width: 100%; height: 100%; }

.theme-toggle .icon-moon { display: none; }

:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* Sign-in: the same top bar, the form centred below it. */
.signin { display: flex; justify-content: center; padding: 10vh 16px 32px; }

/* Notices after an owner action. */
.flash {
  max-width: 935px;
  margin: 0 12px 12px;
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.flash a { margin-left: 6px; font-weight: 600; color: var(--accent); }

@media (min-width: 736px) {
  .flash { margin: 0 0 16px; }
}

button.button-small { display: inline-block; width: auto; }

.button-quiet { color: var(--fg); background: transparent; border: 1px solid var(--border); }

.button-danger { color: #fff; background: var(--danger-bg); }

a.button-small { display: inline-block; font-weight: 600; border-radius: 8px; text-decoration: none; }

/* Trash and the delete confirmation. */
.trash, .confirm {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 16px;
}

.lead { color: var(--muted); }

.trash-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trash-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "thumb info" "thumb actions";
  gap: 6px 12px;
  align-items: center;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

@media (min-width: 600px) {
  .trash-item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "thumb info actions";
  }
}

.trash-thumb { grid-area: thumb; width: 64px; border-radius: 8px; padding: 8px; }
.trash-thumb .tile-text { font-size: 0.5rem; -webkit-line-clamp: 4; }
.trash-thumb .tile-icon { width: 60%; }

.trash-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.trash-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trash-meta { font-size: 0.8125rem; color: var(--muted); }

.trash-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; }
.trash-actions form { margin: 0; }

.trash-empty { padding: 32px 0; text-align: center; color: var(--muted); }

.confirm { max-width: 26rem; }

.confirm-what {
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.confirm form { margin: 0 0 10px; }

.confirm .button { display: block; text-align: center; }

/* New post. */
.compose {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 16px;
}

textarea, input[type="date"] {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 10px 12px;
  font: inherit;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

textarea { resize: vertical; }

.optional { font-weight: 400; color: var(--muted); }

.drop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding: 20px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
}

.drop-title { font-weight: 600; }
.drop-hint { font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.drop input { margin-top: 8px; font: inherit; }

.picked {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.picked li {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--border);
  font-size: 0.75rem;
}

.picked img { width: 100%; height: 100%; object-fit: cover; display: block; }

.picked .picked-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2px 4px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Edit post: the post's items for reference, then the same fields. */
.edit-note { margin: -8px 0 16px; font-size: 0.875rem; color: var(--muted); }

.picked .edit-icon { display: flex; align-items: center; justify-content: center; padding: 28%; color: var(--muted); }

.edit-icon svg { display: block; width: 100%; height: 100%; }

.edit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.edit-actions .button { padding: 9px 12px; text-align: center; }

progress { display: block; width: 100%; height: 8px; margin: 0 0 16px; }

button:disabled { opacity: 0.6; cursor: progress; }