#M sl-button-group > sl-button:first-child { overflow: hidden; flex: 1; }
#M sl-button-group > sl-button:first-child::part(label) { font-family: var(--sl-font-mono); font-size: var(--sl-font-size-x-small); width: 100%; text-align: right; }
#MD {
  overflow: auto;
  max-height: calc(100dvh - 38rem);
  counter-reset: md;
}
[md] { counter-increment: md; position: relative; }
[md]::before { content: counter(md); position: absolute; z-index: 22000; left: 1em; width: 2ch; opacity: .2;
  font-family: var(--sl-font-mono); font-size: var(--sl-font-size-x-small); top: 0; bottom: 0; display: grid; justify-content: end; align-items: center;
}

#cs::part(base) { column-gap: 0; }

#y:has(#M) [slot=footer] { justify-content: space-between; }


/*---------------------------------*/

tr { user-select: none; }
.selection-area {
  background: #4f90f22d;
  border: 1px solid #4f90f2;
}
.selected {
  outline: 1px solid #5f9efc;
}

:root.selecting #y[open]::before { content: ' '; display: block; position: absolute; inset: 0; background: var(--sl-color-neutral-0); opacity: .2; z-index: 10000; }
:root.selecting #y::part(base) { --m-w: 32rem; max-width: var(--m-w); transform: translateX(calc(50vw - var(--m-w) / 2)) !important; }
:root.selecting #y::part(overlay) { opacity: 0; }
:root.selecting     tr[lda],
:root.selecting       [selecting=\-],
:root:not(.selecting) [selecting=\+] { display: none; }
:root.selecting #board { pointer-xevents: none; }
:root.selecting tbody > tr:not(.selected) { filter: opacity(.5) !important; }
#n.over { color: red; font-weight: bold; }

tr[s].moved > td:first-child { position: relative; }
tr[s].moved > td:first-child::before { content: 'moved'; position: absolute; top: -.3em; }

* { transition: none !important; }

:root.pdcd-open #y { display: none; }
sl-drawer::part(header) { color: var(--sl-input-color); }