/* Trail steps reveal in sequence — the "watch it file" feel (collect-then-animate; delay set inline). */
.trail-step { opacity: 0; animation: trail-in .28s ease-out forwards; }
@keyframes trail-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* HTMX request indicator (the filing spinner) — hidden until a request is in flight. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* Dropzone drag-over state (class toggled in app.js). */
#dropzone.dragging { border-color: #F05A28; background: #FFF7F3; }

/* iOS Safari zooms any input below 16px on focus → pin the floor (mobile-web rule). */
input, select, textarea { font-size: 16px; }

/* Below lg the side zones fold away (hidden); the header buttons toggle them as slide-over drawers
   so the center stays usable on a phone/tablet without losing the feed/tree on demand. */
@media (max-width: 1023px) {
  #feed-zone:not(.hidden), #tree-zone:not(.hidden) {
    display: flex; position: fixed; top: 3.5rem; bottom: 0; width: min(20rem, 85vw);
    z-index: 30; box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  }
  #feed-zone:not(.hidden) { left: 0; }
  #tree-zone:not(.hidden) { right: 0; }
}