@layer components {
  .import-step {
    --step-pad: var(--inline-space);

    display: flex;
    flex: 1;
    flex-direction: column;
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 48rem;
    padding: var(--block-space) var(--step-pad) 0;
  }

  @media (min-width: 800px) {
    .import-step {
      --step-pad: var(--inline-space-double);
      padding-block-start: var(--block-space-double);
    }
  }

  .steps {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    font-weight: 500;
    margin-block-end: var(--block-space);
  }

  .steps__item { align-items: center; display: inline-flex; gap: 0.3em; }

  .steps__item + .steps__item::before {
    color: oklch(var(--lch-ink-light));
    content: "›";
    font-size: 1.15em;
    margin-inline: 0.55em;
  }

  .steps__item--done { color: var(--color-ink-secondary); }
  .steps__check { color: var(--color-positive); inline-size: 0.95em; block-size: 0.95em; stroke-width: 3; }
  .steps__item--current { color: var(--color-link); font-weight: 700; }

  .import-step__title { font-size: var(--text-large); font-weight: 600; }

  .import-step__subtitle {
    color: var(--color-ink-secondary);
    font-size: var(--text-small);
    margin-block-start: var(--block-space-half);
    max-inline-size: 40rem;
  }

  .totals {
    align-items: baseline;
    background-color: var(--color-surface);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-small);
    gap: 0.2rem var(--inline-space-double);
    justify-content: space-between;
    margin-block-start: var(--block-space);
    padding: var(--block-space-half) var(--inline-space);
  }

  .totals strong { font-variant-numeric: tabular-nums; font-weight: 700; }
  .totals__aside { color: var(--color-ink-muted); font-size: var(--text-xs); }

  .step-exit {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half) var(--inline-space);
    justify-content: space-between;
    margin-block: var(--block-space-double) var(--block-space);
  }

  .step-exit__back { align-items: center; display: flex; flex-wrap: wrap; gap: 0 var(--inline-space); }

  /* When the row wraps on a phone, Discard stays on the far side, away from Back. */
  .step-exit .btn--quiet-negative { margin-inline-start: auto; }
  .step-exit__hint { color: var(--color-ink-muted); font-size: var(--text-xs); }

  /* Sticky so the primary action stays reachable on a long list; margin-block-start: auto
     keeps it at the bottom when the list is short. */
  .step-footer {
    align-items: center;
    background-color: var(--color-canvas);
    border-block-start: var(--border);
    box-shadow: 0 -0.5rem 1rem -0.75rem oklch(0% 0 0 / 35%);
    display: flex;
    gap: var(--block-space-half) var(--inline-space-double);
    inset-block-end: 0;
    margin-block-start: auto;
    margin-inline: calc(var(--step-pad) * -1);
    padding: var(--block-space-half) var(--step-pad);
    position: sticky;
    z-index: var(--z-footer);
  }

  .step-footer form { display: contents; }

  .step-footer__note {
    color: var(--color-ink-secondary);
    flex: 1;
    font-size: var(--text-xs);
    line-height: 1.45;
  }

  .step-footer__note strong { color: var(--color-ink); }
  .step-footer__primary { flex-shrink: 0; min-block-size: 44px; min-inline-size: 10rem; }

  @media (max-width: 799px) {
    .step-footer {
      align-items: stretch;
      flex-direction: column-reverse;
      gap: var(--block-space-quarter);
      padding-block: var(--block-space-half) var(--block-space-quarter);
    }

    .step-footer__primary { inline-size: 100%; }
    .step-footer__note { text-align: center; }
  }

  .tag {
    align-items: center;
    border-radius: var(--radius-sm);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: 700;
    gap: 0.3em;
    letter-spacing: 0.05em;
    line-height: 1.5;
    padding: 0 0.5em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .tag--out { background-color: oklch(var(--lch-ink-medium) / 0.2); color: var(--color-ink-secondary); }
  .tag--front { background-color: oklch(var(--lch-accent) / 0.18); color: var(--color-accent); }

  .front {
    border: 1px dashed oklch(var(--lch-ink-light));
    border-radius: var(--radius-lg);
    margin-block-start: var(--block-space);
    padding: var(--block-space-half) var(--inline-space) var(--block-space-quarter);
  }

  .front__head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--inline-space-half); }

  .front__lines {
    color: var(--color-ink-secondary);
    display: flex;
    flex-direction: column;
    font-family: var(--font-serif);
    line-height: 1.4;
    margin-block: var(--block-space-half) 0.15rem;
    opacity: 0.6;
  }

  .front__lines span:first-child { font-size: var(--text-medium); }
  .front__lines span:last-child { font-size: var(--text-small); font-style: italic; }

  .front .chapter__meta { opacity: 0.6; }

  .front__foot {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--inline-space);
    justify-content: space-between;
    margin-block-start: var(--block-space-quarter);
  }

  .front__hint { color: var(--color-ink-muted); flex: 1 1 15rem; font-size: var(--text-xs); }

  .chapter-list {
    border: var(--border);
    border-radius: var(--radius-lg);
    margin-block-start: var(--block-space);
    overflow: hidden;
  }

  .chapter {
    display: grid;
    grid-template-areas: "main moves" "actions actions";
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--block-space-half) var(--inline-space) 0;
  }

  .chapter + .chapter { border-block-start: var(--border); }
  .chapter__main { grid-area: main; min-inline-size: 0; padding-block-start: var(--block-space-quarter); }
  .chapter__head { align-items: center; display: flex; flex-wrap: wrap; gap: 0.25rem var(--inline-space); }
  .chapter__title { font-size: var(--text-normal); font-weight: 600; line-height: var(--line-height-tight); }

  .chapter__meta {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    gap: 0 var(--inline-space);
    margin-block-start: 0.2rem;
  }

  .chapter__words { font-variant-numeric: tabular-nums; }

  .chapter__file {
    align-items: center;
    display: inline-flex;
    gap: 0.3em;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .chapter__opening {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    border-inline-start: 2px solid oklch(var(--lch-ink-lighter));
    color: var(--color-ink-secondary);
    display: -webkit-box;
    font-family: var(--font-serif);
    font-size: var(--text-small);
    line-height: 1.45;
    margin-block-start: var(--block-space-half);
    overflow: hidden;
    padding-inline-start: 0.65em;
  }

  .chapter__opening--lines { -webkit-line-clamp: 3; }

  .chapter__moves {
    align-self: start;
    display: flex;
    flex-direction: column;
    grid-area: moves;
    margin-inline-start: var(--inline-space);
  }

  .move-btn {
    align-items: center;
    border-radius: var(--radius);
    color: oklch(var(--lch-ink-medium));
    display: inline-flex;
    font-size: 1.1rem;
    justify-content: center;
    min-block-size: 36px;
    min-inline-size: 36px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .move-btn:hover { background: oklch(var(--lch-ink-lighter)); color: var(--color-ink); }
  .move-btn:disabled { cursor: default; opacity: 0.3; pointer-events: none; }

  @media (max-width: 799px) {
    .move-btn { min-block-size: 44px; min-inline-size: 44px; }
  }

  /* The negative margin lines the ghost buttons' text up with the title above. */
  .chapter__actions {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    grid-area: actions;
    margin-inline-start: -0.75em;
  }

  .chapter__actions .btn--ghost { --btn-color: var(--color-ink-secondary); }
  .chapter__actions .btn--ghost:hover { --btn-color: var(--color-ink); }
  .chapter__actions--out { margin-inline-start: 0; padding-block: var(--block-space-half); }

  .chapter--out { background-color: var(--color-surface); }

  .chapter--out .chapter__title,
  .chapter--out .chapter__meta,
  .chapter--out .chapter__opening { opacity: 0.45; }

  @keyframes row-flash {
    from { background-color: oklch(var(--lch-link) / 0.16); }
    to { background-color: transparent; }
  }

  .chapter--flash { animation: row-flash 1.6s ease-out; }

  @media (prefers-reduced-motion: reduce) {
    .chapter--flash { animation: none; }
  }

  .rename { align-items: center; display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: var(--inline-space-half); }
  .rename .input { flex: 1 1 12rem; font-weight: 600; padding-block: 0.35rem; }

  .split {
    background-color: oklch(var(--lch-link) / 0.04);
    border: 1px solid oklch(var(--lch-link) / 0.4);
    border-radius: var(--radius);
    grid-area: actions;
    margin-block: var(--block-space-half) var(--block-space);
  }

  .split__head {
    align-items: flex-start;
    border-block-end: 1px solid oklch(var(--lch-link) / 0.25);
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space-half) var(--inline-space);
  }

  .split__title { font-size: var(--text-small); font-weight: 700; }
  .split__hint { color: var(--color-ink-secondary); font-size: var(--text-xs); }
  .split__paras { padding-block: var(--block-space-quarter); }

  .para {
    color: var(--color-ink);
    display: grid;
    font-family: var(--font-serif);
    font-size: var(--text-small);
    gap: 0 0.6em;
    grid-template-columns: 1.6em minmax(0, 1fr);
    line-height: 1.4;
    padding: var(--block-space-quarter) var(--inline-space);
  }

  .para__num {
    color: var(--color-ink-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    padding-block-start: 0.1em;
    text-align: end;
  }

  .para--break .para__text { color: var(--color-ink-muted); letter-spacing: 0.3em; }

  .para__note {
    color: var(--color-ink-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-style: italic;
    letter-spacing: 0;
    margin-inline-start: 0.4em;
  }

  .cut {
    align-items: center;
    color: var(--color-link);
    display: flex;
    font-size: var(--text-xs);
    font-weight: 600;
    gap: var(--inline-space);
    inline-size: 100%;
    min-block-size: var(--touch-target-min);
    padding-inline: calc(var(--inline-space) + 2.2em) var(--inline-space);
    transition: background-color var(--transition-fast);
  }

  .cut::before,
  .cut::after {
    border-block-start: 1px dashed oklch(var(--lch-link) / 0.45);
    content: "";
    flex: 1;
  }

  .cut:hover { background-color: oklch(var(--lch-link) / 0.1); }
  .cut:hover::before, .cut:hover::after { border-block-start-style: solid; }
  
  /* Outlined rather than filled: a red pill beside the primary action pulls the
     eye to the one choice that loses work. */
  .btn--quiet-negative {
    --btn-color: var(--color-negative);
    --btn-border-color: oklch(var(--lch-negative) / 0.45);
  }

  .btn--quiet-negative:hover { --btn-border-color: var(--color-negative); }

  .cut__form { display: block; }
}