/* CSV Cleaner & Validator workspace: upload area is always rendered, the
   JavaScript fallback becomes a short note below it. Loaded by
   /app/csv-cleaner-validator only. */

main { display: flex; flex-direction: column; }

/* The workspace stays visible even before the script has confirmed the
   session, so the file input is the first thing a visitor sees. */
#toolState, #toolState[hidden] { display: contents !important; }
#toolState > .feed-hero { order: 0; }
#toolState > .history { order: 3; }

/* Fallback card -> one compact note under the upload panel. */
#gateState {
  order: 2;
  max-width: none;
  margin: 12px 0 0;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  text-align: left;
  border-radius: 12px;
  box-shadow: none;
  background: #f8fafc;
}
#gateState .gate-icon,
#gateState .eyebrow,
#gateState h1,
#gateState .gate-standard-note { display: none; }
#gateState .gate-text { margin: 0; flex: 1 1 320px; font-size: .92rem; color: #334155; }
#gateState a.primary {
  min-height: 40px;
  padding: 8px 14px;
  font-size: .9rem;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
}
#gateState .gate-tool-finder-link { font-size: .9rem; min-height: 40px; display: inline-flex; align-items: center; }

/* Compact header so the drop zone sits in the first screen. */
#toolState > .feed-hero { gap: 16px; margin-bottom: 14px; align-items: center; }
#toolState > .feed-hero h1 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.15; margin: 4px 0 6px; }
#toolState > .feed-hero p:not(.eyebrow) { margin: 0; font-size: 1rem; }
#toolState > .feed-hero .hero-facts span { padding: 9px 12px; min-width: 104px; }

/* One guest line only. */
#toolState > .guest-note { order: 0; margin: 0 0 12px; font-size: .86rem; }
#toolState > .steps { margin-bottom: 12px; }
#uploadPanel .ws-limit { white-space: nowrap; }
#uploadPanel .drop-zone:focus-within { outline: 3px solid #2563eb; outline-offset: 3px; }

@media (max-width: 760px) {
  main { padding-top: 14px; }
  #toolState > .feed-hero { margin-bottom: 10px; }
  #toolState > .feed-hero h1 { font-size: 1.35rem; }
  #toolState > .feed-hero p:not(.eyebrow),
  #toolState > .feed-hero .hero-facts { display: none; }
  #toolState > .steps { display: none !important; }
  #uploadPanel .panel-heading h2 { font-size: 1.3rem; }
  #uploadPanel .drop-zone { min-height: 140px; }
  #uploadPanel .panel-heading { flex-wrap: wrap; gap: 4px 10px; }
  #uploadPanel .ws-limit { white-space: normal; }
  #toolState > .guest-note { font-size: .82rem; padding: .5rem .7rem; }
  #gateState { padding: 12px; }
  #gateState a.primary { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  #uploadPanel .drop-zone { transition: none; }
}

/* The shared "Start here / prepared example" intro repeats the upload
   control and the demo link (already in the context bar). On this page the
   real drop zone is the start, so the intro is left out. */
#uploadPanel > .wt-start-grid { display: none; }

/* Guests already get the one-line free-tier note; skip the second pill. */
body[data-guest="1"] .wt-context-status { display: none; }