/* Compose sheet — slides up from the bottom so its controls stay thumb-reachable. */

.compose {
  width: 100%;
  max-width: var(--maxw);
  margin: auto auto 0; /* pinned to the bottom edge */
  padding: 0;
  border: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface);
  color: var(--text);
}

.compose {
  box-shadow: 0 -8px 32px rgba(46, 58, 48, 0.16);
}

.compose::backdrop {
  background: rgba(46, 58, 48, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.compose[open] {
  animation: sheet-up 0.24s ease;
}

@keyframes sheet-up {
  from { transform: translate3d(0, 12px, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0);   opacity: 1; }
}

.compose-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}

/* Thumbnails of what's being attached — a preview, not an editor. */
.compose-photos {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.compose-photos::-webkit-scrollbar { display: none; }

.compose-title {
  margin: 0;
  font-size: 1.1rem;
}

/* Wraps the thumbnail and its remove control, so remove sits outside the tap target
   that opens the framing editor — a mis-tap must never drop a photo. */
.compose-thumb-wrap {
  position: relative;
  flex: 0 0 auto;
  padding-top: 6px;
  padding-right: 6px;
}

.compose-thumb-drop {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(46, 58, 48, 0.82);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* A thumbnail is a button: tapping it opens the framing editor */
.compose-thumb {
  display: block;
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.compose-thumb:active { transform: scale(0.97); }

/* The lead photo fills the wide cell on a three-photo grid and opens a carousel */
.compose-thumb.is-main { box-shadow: 0 0 0 2px var(--accent-ink); }

.compose-thumb-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 0 3px;
  background: rgba(46, 58, 48, 0.72);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Framing editor ────────────────────────────────────────────── */
.editor {
  width: 100%;
  max-width: var(--maxw);
  margin: auto auto 0;
  padding: 0;
  border: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface);
  color: var(--text);
}

.editor::backdrop { background: rgba(46, 58, 48, 0.45); }

.editor-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}

.editor-hint {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.8rem;
  text-align: center;
}

/* ── Framing surface ───────────────────────────────────────────── */
/* The stage takes the photo's own shape, so crop coordinates map straight onto it —
   no object-fit letterboxing to compensate for. Crop rectangle and focal point share
   this one surface: drag adjusts the crop, a tap sets the focus. */
.editor-crop {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: var(--img-ar, 1);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  touch-action: none;
}

.editor-crop[hidden] { display: none; }

/* The rotor fills the surface and turns the media inside it — the same wrapper the cards
   and the lightbox use, so a photo is framed on exactly what a card will show. Its child
   rules live in cards.css. */
.editor-rotor {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.editor-crop-img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* the stage already matches the photo's aspect */
  display: block;
  pointer-events: none;
}

/* Everything outside the rectangle is dimmed by the rectangle's own giant shadow —
   one element instead of four masking strips. */
.editor-rect {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(20, 26, 21, 0.55);
  outline: 1px solid rgba(251, 252, 249, 0.9);
  cursor: move;
}

.editor-handle {
  position: absolute;
  width: 28px;
  height: 28px;
  background: none;
}

.editor-handle::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #fbfcf9;
  box-shadow: 0 1px 3px rgba(20, 26, 21, 0.5);
}

/* Inside the rectangle, not straddling it: the stage clips its overflow, so handles hung
   outside get sliced in half exactly when the crop is at the photo's edge — which is the
   state every photo starts in. */
.editor-handle[data-handle="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.editor-handle[data-handle="ne"] { top: 0; right: 0; cursor: nesw-resize; }
.editor-handle[data-handle="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
.editor-handle[data-handle="se"] { bottom: 0; right: 0; cursor: nwse-resize; }

.editor-presets {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.editor-preset {
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.editor-preset.is-on {
  background: var(--accent);
  border-color: transparent;
  color: #23301f;
}

/* The focal point rides on the same surface. Above the rectangle's dimming shadow, and
   never a pointer target itself — a tap anywhere is what moves it. */
.editor-dot {
  position: absolute;
  z-index: 2;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(46, 58, 48, 0.4), 0 2px 8px rgba(46, 58, 48, 0.45);
  pointer-events: none;
}

/* A crosshair, so it reads as "centre of attention" rather than a draggable handle */
.editor-dot::before,
.editor-dot::after {
  content: "";
  position: absolute;
  background: #fff;
  box-shadow: 0 0 2px rgba(46, 58, 48, 0.6);
}

.editor-dot::before { top: 50%; left: 4px; right: 4px; height: 1px; margin-top: -0.5px; }
.editor-dot::after { left: 50%; top: 4px; bottom: 4px; width: 1px; margin-left: -0.5px; }

.editor-dot {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(46, 58, 48, 0.4), 0 2px 8px rgba(46, 58, 48, 0.45);
  pointer-events: none;
}

.editor-main[hidden] { display: none; }

.editor-main.is-chosen {
  background: var(--accent);
  color: #23301f;
}

/* Attaching photos is a step inside the sheet, not a separate way in */
.compose-add-photos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.compose-add-photos:active { transform: scale(0.99); }

.compose-add-icon {
  font-size: 1.2rem;
  line-height: 1;
  margin-top: -2px;
}

.compose-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compose-label {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.compose-form textarea,
.compose-form input[type="text"],
.compose-form input[type="date"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* 16px minimum, or iOS Safari zooms on focus */
  resize: none;
}

.compose-form textarea:focus,
.compose-form input:focus {
  outline: none;
  border-color: var(--accent-ink);
}

.compose-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  /* Generous target so the whole row is tappable, not just the box */
  padding: 6px 0;
  cursor: pointer;
}

.compose-toggle input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--blue);
}

.compose-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn {
  flex: 1;
  min-height: 50px;
  border: none;
  border-radius: 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.98); }

.btn--ghost {
  background: var(--surface-2);
  color: var(--text-dim);
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--blue));
  color: #23301f;
}

/* Destructive, so it is quiet, last, and nowhere near Save */
.compose-delete {
  margin-top: 4px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: none;
  color: #8f3a3a;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.compose-delete:active { background: rgba(178, 74, 74, 0.1); }

.compose-delete[hidden] { display: none; }

.btn--primary:disabled {
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: not-allowed;
  transform: none;
}

/* ── Rotate ────────────────────────────────────────────────────── */
.editor-rotate-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.editor-rotate {
  min-width: 52px;
  font-size: 1.25rem;
  line-height: 1;
  padding: 8px 12px;
}

/* ── Trim ──────────────────────────────────────────────────────── */
/* Trimming is framing, like cropping: the stored file keeps every frame and these two
   handles say which stretch of it the memory is. */
.editor-trim {
  margin: 14px auto 0;
  max-width: 320px;
}

.editor-trim[hidden] { display: none; }

.editor-trim-bar {
  position: relative;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-2);
  touch-action: none;   /* the handles own horizontal drags */
  cursor: pointer;
}

/* The chosen stretch, lit against the rest of the clip */
.editor-trim-range {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(var(--blue-rgb), 0.35);
  border-top: 2px solid var(--blue-ink);
  border-bottom: 2px solid var(--blue-ink);
}

.editor-trim-handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 44px;
  margin-left: -7px;
  transform: translateY(-50%);
  border-radius: 6px;
  background: var(--blue-ink);
  box-shadow: var(--shadow-lift);
  cursor: ew-resize;
  /* Comfortably tappable on a phone without making the bar itself taller. */
  touch-action: none;
}

.editor-trim-handle::after {
  content: '';
  position: absolute;
  inset: 0 -10px;   /* invisible margin, so a thumb does not have to be precise */
}

.editor-trim-read {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}