/* "Arrange my main page" (C20, docs/arrange.md): the board drawn in a person's own order (web/views/board.js
   arrangedBoard, web/boxdrag.js). Only for a person who turned it on; the standard board never gets these classes. */

/* one box per line; the three short lists (arriving, waiting, ready) share a line when they're next to each other, the
   way the standard board's three columns do */
.board.arranged { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.board.arranged > .abox { flex: 1 1 100%; min-width: 0; }
.board.arranged > .col-box { flex: 1 1 260px; display: flex; flex-direction: column; }
.board.arranged > .col-box > .col { flex: 1; }
.board.arranged > .abox > .sdbanner, .board.arranged > .abox > .b-newtime, .board.arranged > .abox > .b-website, .board.arranged > .abox > .sdpeople, .board.arranged > .abox > .tcbar-board { margin-top: 0; }

/* the bar on top of each box: ⠿ to drag, its name, ▲ ▼. 40 × 34 to look at, 44 px to tap (the ::before) */
.abar { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; min-width: 0; }
.abar .aname { flex: 1; min-width: 0; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abar button { position: relative; flex-shrink: 0; min-width: 40px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.abar button::before { content: ''; position: absolute; inset: -5px -2px; }
.abar button:disabled { opacity: .3; cursor: default; }
.abar button:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
/* the handle: the finger on it never scrolls the page by itself (boxdrag.js scrolls it by hand before the hold) */
.abar .agrip { font-size: 20px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.abar .agrip.holding { background: color-mix(in srgb, var(--info) 30%, var(--panel)); border-color: var(--info); }

/* while dragging: the box follows the pointer above everything, a dashed place shows where it lands */
.abox.dragging { background: var(--bg); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); opacity: .97; cursor: grabbing; }
.abox-ph { flex: 1 1 100%; border: 2px dashed var(--info); border-radius: var(--radius); background: color-mix(in srgb, var(--info) 8%, transparent); }
.abox-ph.col-box { flex: 1 1 260px; }
body.arr-dragging, body.arr-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }