/* Optional interactions and media equivalents for THE LONG EXPOSURE. */

.flinch-lab,
.media-object,
.text-render {
  margin: 2rem 0;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.25rem;
}

.flinch-controls {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 7rem;
  gap: 1rem;
  align-items: end;
}

.flinch-controls label { display: block; }
.flinch-controls input { width: 100%; }

.flinch-field {
  --flinch-at: 35%;
  position: relative;
  min-height: 12rem;
  margin: 1.25rem 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    linear-gradient(to bottom, transparent 49.7%, var(--border) 49.7%, var(--border) 50.3%, transparent 50.3%),
    #000;
}

.flinch-field::before {
  content: "";
  position: absolute;
  left: var(--flinch-at);
  top: 35%;
  width: 2px;
  height: 30%;
  background: var(--understudy);
}

.flinch-field::after {
  content: attr(data-exposure-label);
  position: absolute;
  left: calc(var(--flinch-at) + 0.75rem);
  top: 57%;
  color: var(--dim);
  font-family: var(--mono);
  font-size: max(0.68em, 11px);
}

.flinch-comparison {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.flinch-comparison > div {
  border-top: 2px solid var(--border);
  padding-top: 0.6rem;
}

.flinch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.text-render { padding: 0.85rem 1rem; }
.text-render summary { cursor: pointer; color: var(--fg); }
.text-render p { margin-bottom: 0; color: var(--dim); }

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 40rem) {
  .flinch-controls,
  .flinch-comparison { grid-template-columns: 1fr; }
}

body.plain .flinch-field { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .flinch-field { transition: none; }
}

@media print {
  .flinch-actions,
  .download-actions { display: none !important; }
  .text-render { break-inside: avoid; }
}