/* Data import — layout unique to this page: the file drop area, the preview beside its summary, and the slips. */
@layer page {
  /* The file drop area; a rejected file turns it bad. */
  .im-drop { display: grid; justify-items: center; gap: var(--s3); padding: var(--s10) var(--s6); border: 1px solid var(--ink-300); border-radius: var(--r4); background: var(--sheet-2); text-align: center; }
  .im-drop[data-tone] { border-color: var(--tone-line); background: var(--tone-surface); }

  /* A preview beside its summary (the summary stays in view). */
  .im-bench { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: var(--s5); align-items: start; }
  /* The review table fits its column at 1440 (IM1): the description wraps, identifiers stay whole. */
  #rvt td:nth-child(4) { min-width: 9rem; }
  #rvt td:nth-child(2) { white-space: nowrap; }
  .im-summary { position: sticky; top: calc(var(--top-h) + var(--s4)); }
  .im-diff td { white-space: nowrap; }
  .im-diff td[colspan], .im-diff td:nth-child(4) { white-space: normal; min-width: 160px; }

  /* After a write: the receipt beside what comes next. */
  .im-after { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .im-receipt { max-width: 640px; }

  /* The reading step: the file, its progress and a way out. */
  .im-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: center; }

  /* Passcode slips, cut along the dashes. */
  .im-slips { max-width: 720px; border: 1px dashed var(--line-2); border-radius: var(--r3); background: var(--sheet); }
  .im-slip { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: var(--s2) var(--s5); padding: var(--s4) var(--s5); border-bottom: 1px dashed var(--line-2); }
  .im-slip:last-child { border-bottom: 0; }
  .im-slip ol { list-style: decimal; padding-left: var(--s5); font-size: var(--t-small); color: var(--text-2); }

  @media (max-width: 1180px) {
    .im-bench, .im-after { grid-template-columns: minmax(0, 1fr); }
    .im-summary { position: static; }
  }
  @media (max-width: 900px) { .im-slip { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 700px) {
    .im-drop { padding: var(--s8) var(--s4); }
    .im-file { grid-template-columns: auto minmax(0, 1fr); }
    .im-file > :last-child { grid-column: 2; justify-self: start; }
  }
}