/* Select mode (select.js): ticks on cards, the selected ring, and the bar of actions along the
   bottom. From the controls in material.css, in the theme's colours. Never on a TV. */

/* ---------- The tick on a card or a row ---------- */
/* A long press is select mode's, not the phone's: no link preview (iOS), no text selection or
   magnifier (iOS, Android and its WebView). */
.selectable { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.sel-tick { position: absolute; z-index: 3; top: 0.5rem; left: 0.5rem; display: grid; place-items: center; box-sizing: border-box; width: 1.75rem; height: 1.75rem;
  border: 2px solid rgb(255 255 255 / 0.95); border-radius: 50%; background: rgb(0 0 0 / 0.38); color: transparent; box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
  opacity: 0; transform: scale(0.8); pointer-events: none; cursor: pointer;
  transition: opacity var(--motion-fast, 0.15s) ease, transform var(--motion-fast, 0.15s) ease, background-color var(--motion-fast, 0.15s) ease; }
.sel-tick svg { width: 1.15rem; height: 1.15rem; }
/* A book's Finished sits where the tick would: the tick takes the other corner. */
.book-card .sel-tick { left: auto; right: 0.5rem; }
/* A pointer resting on a card (a mouse, a pen, a tablet's trackpad) shows its tick to click. */
@media (any-hover: hover) {
  .selectable:hover .sel-tick { opacity: 1; transform: none; pointer-events: auto; }
  .selectable .sel-tick:hover { background: rgb(0 0 0 / 0.6); color: rgb(255 255 255 / 0.85); }
}
.selectable:focus-visible .sel-tick { opacity: 1; transform: none; }
html.selecting .selectable .sel-tick { opacity: 1; transform: none; pointer-events: auto; }
.selectable.is-selected .sel-tick, .selectable.is-selected .sel-tick:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* ---------- Selected ---------- */
/* A card: a ring of the accent round its picture, drawn a little smaller, as Photos has it. In
   select mode the cards don't lift under the pointer: a click ticks them, it doesn't open them. */
html.selecting .card.selectable:hover .art { transform: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 45%, transparent); }
.card.selectable.is-selected .art, html.selecting .card.selectable.is-selected:hover .art { transform: scale(0.93); box-shadow: 0 0 0 3px var(--accent); }
.card.selectable.is-selected:focus-visible .art { box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px var(--ring); }
html.selecting .card.selectable { cursor: pointer; }
/* A row (a playlist's): its tick where its number was, and the row in the selection colour. */
.sel-slot { position: relative; }
.sel-slot > .sel-tick { top: 50%; left: auto; right: -0.15rem; margin-top: -0.875rem; }
html.selecting .selectable > .sel-slot { color: transparent; }
html.selecting .pl-row.selectable { cursor: pointer; }
.pl-row.selectable.is-selected, .pl-row.selectable.is-selected:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.pl-row.selectable:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
html.selecting .pl-row .pl-tools { visibility: hidden; }
/* A phone's rows have no number: while selecting, the tick takes the tools' place instead. */
@media (max-width: 760px) {
  html.selecting .pl-row.selectable { grid-template-columns: 1.75rem 5rem minmax(0, 1fr); }
  html.selecting .pl-row.selectable > .pl-num { display: block; }
  html.selecting .pl-row.selectable > .pl-tools { display: none; }
  .sel-slot > .sel-tick { right: auto; left: 0; }
}

/* ---------- The Select button ---------- */
/* At the end of a page's heading row (My list, a person's page), or of search's heading. */
.select-toggle.push { margin-left: auto; }
.search-head:has(> .select-toggle) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; }
.search-head:has(> .select-toggle) > h1 { flex: 1 1 0; min-width: 0; }
.search-head:has(> .select-toggle) > p { order: 3; flex-basis: 100%; margin: 0.35rem 0 0; }

/* ---------- The bar ---------- */
/* On a computer or tablet it floats above the bottom edge, as the admin console's save bar does;
   on a phone it takes the tabs' place along the bottom, clear of the home indicator. */
.select-bar { position: fixed; z-index: 45; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; width: min(62rem, calc(100vw - 2rem));
  background: var(--raised); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius-lg); box-shadow: var(--shadow-menu);
  transform: translate(-50%, calc(100% + 2rem)); opacity: 0; transition: transform 0.25s var(--ease-out, ease), opacity 0.2s ease; }
.select-bar.open { transform: translate(-50%, 0); opacity: 1; }
.select-bar[hidden] { display: none; }
.select-bar.working { cursor: progress; }
.sb-inner { display: flex; align-items: center; gap: 0.5rem 0.75rem; min-height: 3.5rem; padding: 0.5rem 0.625rem; }
.sb-what { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.75rem; flex: 1 1 auto; min-width: 0; }
.sb-count { margin: 0; font-weight: 600; font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-all { margin: 0; white-space: nowrap; }
.sb-actions { display: flex; align-items: center; gap: 0.375rem; flex: none; }
.sb-actions > details.more > .more-menu { top: auto; bottom: calc(100% + 0.5rem); left: auto; right: 0; }
.sb-clear { flex: none; }
/* Room at the end of the page for the bar, so the last row can be ticked. */
html.selecting:not(.tv) body > #page { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)) !important; }
html.selecting:not(.tv) body > .toasts { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important; }
/* While selecting, the tabs step aside for the bar (phones and touch tablets), as Photos' do. */
html.selecting:not(.tv) .tab-bar { display: none !important; }

/* A phone: along the bottom edge, each action its icon (named for a screen reader and a long
   press's tooltip), and Select all under the count. */
@media (max-width: 640px) {
  .select-bar { left: 0; right: 0; bottom: 0; width: auto; border-width: 1px 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); transform: translateY(100%); }
  .select-bar.open { transform: none; }
  .sb-inner { gap: 0.25rem; min-height: 4rem; padding: 0.375rem 0.5rem; }
  .sb-what { flex-direction: column; align-items: flex-start; gap: 0; }
  .sb-all { min-height: 1.75rem; font-size: 0.8125rem; }
  .sb-actions { gap: 0.125rem; }
  :is(.sb-act, .sb-clear) > span { display: none; }
  .select-bar :is(.sb-act, .sb-clear) { width: var(--control-h); min-height: var(--control-h); padding: 0; background: transparent; }
  .select-bar :is(.sb-act, .sb-clear):hover { background: var(--fill); }
  .select-bar :is(.sb-act, .sb-clear) > svg { width: 1.5rem; height: 1.5rem; }
  .select-bar details.more > summary.sb-act::after { display: none; }
  html.selecting:not(.tv) body > #page { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important; }
  html.selecting:not(.tv) body > .toasts { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .select-bar, .sel-tick { transition: none; }
  .card.selectable.is-selected .art { transform: none; }
}
@media (forced-colors: active) {
  .card.selectable.is-selected .art { outline: 3px solid Highlight; outline-offset: 2px; }
  .selectable.is-selected .sel-tick { background: Highlight; color: HighlightText; border-color: Highlight; }
  .select-bar { border-color: CanvasText; }
}
/* Never on a TV: nothing of it shows or takes focus there (select.js doesn't start it either). */
html.tv :is(.select-bar, .sel-tick, .select-toggle) { display: none !important; }