/* SELMODE (Hugo 10-26 「它應該要有一個模式是可以選取然後刪除的……只有在某個模式下才會出現」): selecting meetings is a mode.
   Out of it no card shows a checkbox (app.css showed one on hover); 選取 sits on the right edge of the date line. In it
   (#list.multi, listTools) every card shows its checkbox, the header turns into the master checkbox with 完成, and the
   bar at the bottom holds the count and the actions, on phones too (app.css hid both under 820). Existing tokens only. */
.list:not(.multi) .lrow .ck { display: none; }
.datebar > .btn { margin-left: auto; }
.datebar > .btn.ghost { color: var(--text-2); background: none; }
.datebar > .btn.ghost:hover { background: var(--fill-strong); color: var(--text); opacity: 1; }
/* in the mode the cards do not lift under the pointer: the click picks, it does not open */
.list.multi .lrow.card:hover { transform: none; box-shadow: 0 0 0 1px var(--line); }
.list.multi .lrow.card.picked, .list.multi .lrow.card.picked:hover { box-shadow: 0 0 0 1px var(--text); }
/* the master checkbox: the same 16 px box as a card's, with its label; mixed draws a dash */
/* the master checkbox sits in the cards' checkbox column: a card's box is 52 left of the card and the cards sit 24 in (app.css) */
.ck-all { display: inline-flex; align-items: center; gap: 12px; height: 28px; padding: 0 8px 0 0; margin-left: -28px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text-2); font: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer; }
.ck-all:hover { background: var(--fill-strong); color: var(--text); }
.ck-all:focus-visible { outline: none; box-shadow: var(--ring); }
.ck-all .ck { position: relative; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--g500); }
.ck-all[aria-checked="true"] .ck, .ck-all[aria-checked="mixed"] .ck { background: var(--text); box-shadow: none; }
.ck-all[aria-checked="true"] .ck::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--sheet); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ck-all[aria-checked="mixed"] .ck::after { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 2px; background: var(--sheet); }
.mbar .btn:disabled { opacity: .4; cursor: default; }
/* MBARALIGN (Hugo 10-31 「為何字沒有和 icon 對齊」): the label's class .lbl is also app.css's form label (display block,
   margin-bottom 8px, 600 in --text-2), which lifted the word 4px above its icon. Here it is plain text in the button's row;
   the button's own 8px gap spaces the icon, so the svg keeps no margin of its own */
.mbar .btn svg { width: 16px; height: 16px; margin: 0; }
.mbar .btn .lbl { display: inline; margin: 0; font: inherit; color: inherit; }
@media (max-width: 820px) {
  .ck-all { margin-left: 12px; }
  .list.multi .lrow .ck { display: block; left: 12px; top: 18px; }
  .list.multi .lrow.card { padding-left: 40px; }
  /* the page grows with its cards on a phone (.main height auto), so the bar is fixed to the window's bottom edge */
  .mbar { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; transform: translateY(8px); padding: 0 8px 0 16px; }
  .mbar.in { transform: none; }
  .mbar .btn .lbl { display: none; }
  .mbar .btn.ghost { padding: 0 8px; }
  .mbar .btn svg { margin-right: 0; }
  .mbar .n { margin-right: auto; }
  @media (prefers-reduced-motion: reduce) { .mbar.in, .mbar { transform: none !important; } }
}
/* the sidebar's red 失敗 count and the red dot next to 處理中 open the list of failed meetings (app.js, #/?st=failed) */
.qc-bad { cursor: pointer; text-underline-offset: 3px; }
.qc-bad:hover { text-decoration: underline; }
.qc-dot { cursor: pointer; }