/* ==========================================================================
   IMMERSION — midpoint submission
   Ref: handoff § Phase 7.
   ========================================================================== */

.imm-submission {
  max-width: var(--imm-content-max);
  margin-inline: auto;
  padding: var(--imm-s-11) var(--imm-s-12) var(--imm-s-13);
}

.imm-submission__body {
  display: grid;
  grid-template-columns: 1fr var(--imm-rail);
  gap: var(--imm-s-8);
  align-items: start;
}

.imm-submission__main { min-width: 0; }

.imm-submission__sent {
  margin-bottom: var(--imm-s-6);
  padding: var(--imm-s-4) var(--imm-s-6);
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
  border-radius: var(--imm-r-card);
  color: var(--imm-teal-hover);
  font-size: 14.5px;
}

/* --- Numbered cards ------------------------------------------------------- */

.imm-numbered {
  margin-bottom: var(--imm-s-5);
  padding: var(--imm-s-8);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
}

.imm-numbered__step {
  display: flex;
  align-items: center;
  gap: var(--imm-s-3);
  margin: 0 0 var(--imm-s-5);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--imm-ink);
}

.imm-numbered__step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--imm-r-pill);
  background: var(--imm-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.imm-numbered textarea {
  width: 100%;
  line-height: 1.7;
  resize: vertical;
}

.imm-numbered__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--imm-s-3);
  margin-top: var(--imm-s-3);
}

.imm-counter {
  margin: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--imm-faint);
}

/* Guidance, not a gate — the counter tints but never blocks submission. */
.imm-counter.is-short { color: var(--imm-muted); }
.imm-counter.is-over  { color: var(--imm-magenta); }

/* --- Dropzone ------------------------------------------------------------- */

.imm-dropzone {
  padding: var(--imm-s-11) var(--imm-s-7);
  background: #f9fafb;
  border: 1.5px dashed var(--imm-line-dashed);
  border-radius: var(--imm-r-card);
  text-align: center;
}

.imm-dropzone.is-over {
  border-color: var(--imm-teal);
  background: var(--imm-teal-wash);
}

.imm-dropzone__text {
  margin: 0 0 var(--imm-s-1);
  font-size: 15px;
  font-weight: 600;
  color: var(--imm-ink);
}

.imm-dropzone__hint {
  margin: 0 0 var(--imm-s-5);
  font-size: 13px;
  color: var(--imm-faint);
}

.is-hidden { display: none; }

/* --- Uploaded file row ---------------------------------------------------- */

.imm-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--imm-s-4);
  padding: var(--imm-s-5) var(--imm-s-6);
  background: var(--imm-canvas);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-card);
}

.imm-file__name {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--imm-ink);
}

.imm-file__replace {
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  color: var(--imm-magenta);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Actions -------------------------------------------------------------- */

.imm-submission__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--imm-s-3);
  margin-top: var(--imm-s-7);
}

/* The only magenta button in the product. Everywhere else magenta means a
   checkpoint marker, never an action — keep it that way. */
.imm-btn--submit {
  background-color: var(--imm-magenta);
  color: #fff;
}

.imm-btn--submit:hover { background-color: #920546; color: #fff; }
.imm-btn--submit:focus-visible { outline-color: var(--imm-magenta); }
.imm-btn--submit[disabled] { opacity: .6; cursor: default; }

.imm-submission__note {
  margin: var(--imm-s-4) 0 0;
  font-size: 13.5px;
  color: var(--imm-faint);
}

.imm-submission__status {
  min-height: 1.2em;
  margin: var(--imm-s-2) 0 0;
  font-size: 12.5px;
  color: var(--imm-faint);
}

.imm-submission__status.is-saved { color: var(--imm-teal); }
.imm-submission__status.is-error { color: var(--imm-red); }

/* --- Rail ----------------------------------------------------------------- */

.imm-submission__rail {
  display: grid;
  gap: var(--imm-s-4);
  position: sticky;
  top: var(--imm-s-5);
}

.imm-checklist {
  margin: var(--imm-s-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--imm-s-3);
}

.imm-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--imm-s-2);
  font-size: 13.5px;
  color: var(--imm-muted);
}

.imm-checklist__mark {
  flex: none;
  width: 1.1em;
  color: var(--imm-line-dashed);
  font-weight: 700;
}

.imm-checklist li.is-done { color: var(--imm-ink); }
.imm-checklist li.is-done .imm-checklist__mark { color: var(--imm-teal); }

.imm-from-notes {
  margin: var(--imm-s-3) 0 0;
  padding-left: 1.1em;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--imm-muted);
}

.imm-from-notes li { margin-bottom: var(--imm-s-2); }

.imm-next {
  background: var(--imm-magenta-wash-2);
  border-color: var(--imm-magenta-line);
}

.imm-next__body {
  margin: var(--imm-s-3) 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--imm-body);
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 900px) {
  .imm-submission { padding: var(--imm-s-7) var(--imm-s-5) var(--imm-s-11); }

  .imm-submission__body { grid-template-columns: 1fr; }

  .imm-submission__rail { position: static; }

  .imm-submission__actions .imm-btn {
    width: 100%;
    min-height: 44px;
  }
}