/* =====================================================================
   FORMS & DOCUMENTS — page-specific styles only.
   Shared tokens, header/nav, footer, and buttons live in css/main.css,
   which this page also loads.
   ===================================================================== */

/* ---------------------------------------------------------------------
   CATEGORY LANES — a scoreboard/roster-sheet list rather than a
   grid of shadowed cards; each category is a "lane" you can open
   --------------------------------------------------------------------- */

.lane { border-top: 1px solid var(--surge-line); }
.lane:last-child { border-bottom: 1px solid var(--surge-line); }

.lane__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem 0.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--surge-black);
  text-align: left;
}

.lane__toggle:hover { color: var(--surge-teal-deep); }

.lane__count {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--surge-teal-deep);
  background: var(--surge-mist);
  border: 1px solid var(--surge-line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-right: auto;
  margin-left: 0.75rem;
}

.lane__chevron { transition: transform 0.15s ease; flex-shrink: 0; }
.lane[data-open="true"] .lane__chevron { transform: rotate(180deg); }

.lane__body { overflow: hidden; max-height: 0; transition: max-height 0.2s ease; }
.lane[data-open="true"] .lane__body { max-height: 2000px; }

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.25rem 0.85rem 1.25rem;
  border-top: 1px dashed var(--surge-line);
  flex-wrap: wrap;
}

.form-row__info h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--surge-black);
}

.form-row__info p { margin: 0.2rem 0 0; font-size: 0.9rem; color: #3B4A4B; max-width: 48ch; }

.form-row__meta {
  font-size: 0.78rem;
  color: #5B6C6D;
  margin-top: 0.35rem;
  display: flex;
  gap: 0.6rem;
}

.form-row__meta .tag { border: 1px solid var(--surge-line); border-radius: var(--radius-sm); padding: 0.05rem 0.4rem; }

/* ---------------------------------------------------------------------
   UPLOAD PANEL — the one bold moment on the page: a dark panel that
   signals "this part is handled carefully". Reuses .form-panel base
   styles from main.css and adds the file-drop control.
   --------------------------------------------------------------------- */

.file-drop {
  border: 2px dashed #3C4B4C;
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  text-align: center;
  background: #17201F;
}

.file-drop.is-dragover { border-color: var(--surge-orange); }
.file-drop p { margin: 0.35rem 0 0; font-size: 0.82rem; color: #9BB0B1; }

.file-drop__filename {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--surge-orange);
  word-break: break-all;
}

.privacy-note {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: #9BB0B1;
  border-top: 1px solid #2A3536;
  padding-top: 1rem;
}

@media (max-width: 480px) {
  .form-row { flex-direction: column; align-items: flex-start; }
  .form-row .btn--download { align-self: stretch; justify-content: center; }
}