@layer components {
  /* Move a paper, or add it to another binder: a dialog over the paper (a sheet from the bottom on a
     phone, as every dialog is) whose list of binders scrolls inside it, under a title and the
     paper's place in its own binder that stay put. */
  .binder-dialog.move-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
  .move-dialog[open] > * { flex: none; }
  /* Its top stays where it opened while the list narrows, rather than the dialog re-centring. */
  @media (min-width: 60ch) { .binder-dialog.move-dialog { margin-block: 10dvh auto; } }
  .move-dialog .dialog-title { padding-inline-end: 3rem; overflow-wrap: anywhere; }

  .move-here { padding-block: 0.4rem 0.9rem; border-block-end: 1px solid var(--rule); margin-block-end: 0.9rem; }
  .move-heading { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-block: 0.5rem 0.55rem; }
  .move-state { font-weight: 400; letter-spacing: 0; text-transform: none; margin-inline-start: 0.35rem; }
  .move-shift { display: flex; gap: 0.5rem; }
  .move-shift form { display: inline; }
  .move-shift .button:disabled { opacity: 0.4; cursor: default; border-color: var(--rule); }

  .move-find {
    width: 100%; margin-block-end: 0.6rem; padding: 0.45em 0.7em; border: 1px solid var(--rule); border-radius: 8px;
    background: var(--paper); color: var(--ink); font: inherit; font-size: 0.88rem;
  }
  .move-find:focus { outline: none; border-color: var(--ink-soft); }

  .move-dialog > .move-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-inline: -0.5rem; padding-inline: 0.5rem; }
  .move-shelf + .move-shelf { margin-block-start: 0.9rem; }
  .move-shelf[hidden], .move-row[hidden], .move-none[hidden] { display: none; }
  .move-shelf-name { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 0.2rem 0.6rem 0.25rem; }
  .move-rows { display: grid; }
  .move-row form { display: contents; }
  /* Each binder a row the width of the dialog; a binder inside another is set in under it. */
  .move-choice {
    display: flex; align-items: baseline; gap: 0.5rem; width: 100%; text-align: start;
    padding: 0.5rem 0.6rem 0.5rem calc(0.6rem + var(--depth, 0) * 1.15rem); border-radius: 6px;
    color: var(--ink); font-size: 0.9rem; cursor: pointer;
  }
  .move-choice:hover:not(:disabled), .move-choice:focus-visible { background: var(--desk); outline: none; }
  .move-check { flex: 0 0 0.8rem; align-self: center; display: flex; color: var(--ink-soft); }
  .move-name { min-width: 0; overflow-wrap: anywhere; }
  .move-choice.is-in { cursor: default; color: var(--ink-soft); }
  .move-note { margin-inline-start: auto; font-size: 0.74rem; color: var(--ink-soft); white-space: nowrap; }
  .move-none { padding: 0.5rem 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }

  @media (max-width: 60ch) { .move-choice { padding-block: 0.7rem; } }
}