/* ============================================================
   Go to anything (js/palette.js), the library's button for it,
   and the "Back to where you were" pill (js/jumpback.js).
   ============================================================ */

/* ---------- the dialog ---------- */
.modal-palette { padding-top: max(12vh, 20px); }
.modal-palette .modal-card { width: min(620px, 100%); max-height: min(72vh, 640px); overflow: hidden; }
.pal-box { padding: 14px 16px 14px 18px; }
.pal-box input { font-size: 18px; }
.pal-list { list-style: none; margin: 0; padding: 6px 8px 8px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; scroll-padding: 8px; }
.pal-list:empty { display: none; }
.pal-group { padding: 12px 12px 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.pal-group:first-child { padding-top: 6px; }

.pal-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 50px; padding: 7px 10px; border-radius: 11px;
  cursor: pointer; scroll-margin: 8px;
}
.pal-item[aria-selected="true"] { background: var(--bg-2); }
.pal-ic {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  color: var(--ink-2); background: color-mix(in oklab, var(--bg-2) 75%, transparent);
  transition: color .15s, background-color .15s;
}
.pal-item[aria-selected="true"] .pal-ic { color: var(--crimson); background: var(--surface); }
.pal-ic svg { width: 18px; height: 18px; }
.k-book .pal-ic { background: none; }
.pal-ic img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; box-shadow: 0 1px 2px rgba(var(--shade), .2), 0 4px 10px -4px rgba(var(--shade), .4); }
.k-chapter .pal-ic, .k-character .pal-ic { background: none; }

.pal-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pal-t { font: 500 15px/1.3 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-book .pal-t, .k-chapter .pal-t, .k-character .pal-t { font: 400 16.5px/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.pal-t mark { background: none; color: var(--crimson); font-weight: 650; }
.k-book .pal-t mark, .k-chapter .pal-t mark, .k-character .pal-t mark { font-weight: 600; }
.pal-s { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-search .pal-t { color: var(--ink-2); }

.pal-hint { flex: none; display: inline-flex; gap: 3px; }
.pal-hint kbd { min-width: 22px; height: 22px; padding: 0 6px; font-size: 11px; border-radius: 5px; }
.pal-item[aria-selected="true"] .pal-hint kbd { background: var(--surface); }
.pal-tag { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--bg-2); }
.pal-item[aria-selected="true"] .pal-tag { background: var(--surface); }
.pal-tag.is-on { color: var(--gold); background: color-mix(in oklab, var(--gold) 14%, transparent); }
.pal-tag.is-go { color: var(--crimson); background: var(--pill); }
.pal-alt {
  flex: none; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--crimson);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--crimson) 35%, transparent);
  opacity: 0; transition: opacity .15s;
}
.pal-item[aria-selected="true"] .pal-alt { opacity: 1; }
.pal-alt:hover { background: var(--pill); }

/* chapter state: a ring that fills as you go, a gold check when done */
.pal-ring, .bp-ring {
  position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--crimson) calc(var(--f, 0) * 1turn), color-mix(in oklab, var(--ink-3) 30%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.2px));
}
.pal-ring.is-done, .bp-ch.is-done .bp-ring { background: var(--gold); -webkit-mask: none; mask: none; color: var(--surface); }
.pal-ring svg, .bp-ring svg { width: 12px; height: 12px; }

/* a person's Color, from the cast list */
.pal-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(var(--shade), .2); }
.pal-dot[data-c="gold"] { background: #C9A040; } .pal-dot[data-c="silver"] { background: #B8BCC4; }
.pal-dot[data-c="white"] { background: #F2EFE8; } .pal-dot[data-c="copper"] { background: #B66A3C; }
.pal-dot[data-c="blue"] { background: #4C7FC4; } .pal-dot[data-c="yellow"] { background: #E2C443; }
.pal-dot[data-c="green"] { background: #4F9A62; } .pal-dot[data-c="violet"] { background: #8A5DB8; }
.pal-dot[data-c="orange"] { background: #E0843A; } .pal-dot[data-c="gray"], .pal-dot[data-c="grey"] { background: #8A8E93; }
.pal-dot[data-c="brown"] { background: #7A5236; } .pal-dot[data-c="obsidian"] { background: #1E1B22; }
.pal-dot[data-c="pink"], .pal-dot[data-c="rose pink"], .pal-dot[data-c="pink rose"] { background: #E58DAA; } .pal-dot[data-c="red"] { background: #B3262F; }
.pal-sw { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--shade), .28); }

.pal-empty { margin: 0; padding: 18px 22px 22px; color: var(--ink-3); font-size: 14px; }
.pal-foot {
  display: flex; align-items: center; gap: 16px; flex: none;
  padding: 9px 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}
.pal-foot span { display: inline-flex; align-items: center; gap: 4px; }
.pal-foot kbd { min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; border-radius: 5px; }
.pal-foot-end { margin-left: auto; }

/* ---------- the library's button ---------- */
.libbar { gap: 8px; }
.lib-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  height: 40px; min-width: 260px; padding: 0 7px 0 14px; border-radius: 999px;
  font: 500 14px/1 var(--ui); color: var(--ink-3);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color .2s, background-color .2s, box-shadow .2s, transform .15s var(--ease);
}
.lib-go:hover { color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--line) 60%, var(--ink-3)); }
.lib-go:active { transform: scale(.98); }
.lib-go svg { width: 17px; height: 17px; flex: none; }
.lib-go-k { margin-left: auto; height: 26px; font-size: 11px; gap: 3px; box-shadow: none; background: var(--bg-2); color: var(--ink-3); }
.libbar .lib-go ~ .sync-btn { margin-left: 0; }

/* ---------- back to where you were ---------- */
.jumpback {
  position: fixed; z-index: 26;
  left: max(20px, calc(env(safe-area-inset-left) + 12px)); bottom: calc(var(--player-h, 0px) + 20px);
  display: flex; align-items: center; gap: 2px; max-width: min(380px, calc(100vw - 32px));
  padding: 4px; border-radius: 999px;
  background: color-mix(in oklab, color-mix(in oklab, var(--surface) 90%, var(--ink) 7%) 94%, transparent); color: var(--ink);
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--line) 70%, var(--ink-3) 30%), 0 14px 34px -12px rgba(var(--shade), .55);
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .2s ease, transform .5s var(--spring, var(--ease-out)), bottom .35s var(--ease-out, ease);
}
.jumpback.in { opacity: 1; transform: none; }
.jb-go { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 0 12px 0 10px; border-radius: 999px; transition: background-color .15s; }
.jb-go:hover { background: var(--bg-2); }
.jb-go svg { width: 18px; height: 18px; flex: none; color: var(--crimson); }
.jb-go > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.jb-k { color: var(--ink-3); font-weight: 600; }
.jb-t { font: 500 15px/1.2 var(--serif); }
.jb-x { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--ink-3); transition: background-color .15s, color .15s; }
.jb-x:hover { background: var(--bg-2); color: var(--ink); }
.jb-x svg { width: 15px; height: 15px; }
body.spot-on .jumpback, body:not([data-view="reader"]) .jumpback { display: none; }

:root[data-motion="still"] .jumpback { transition: opacity .15s ease; transform: none; }
@media (prefers-reduced-motion: reduce) { .jumpback { transition: opacity .15s ease; transform: none; } }

/* ---------- phones ---------- */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .lib-go { min-width: 0; width: 44px; height: 44px; padding: 0; justify-content: center; background: var(--bg-2); box-shadow: none; color: var(--ink-2); }
  .lib-go svg { width: 20px; height: 20px; }
  .lib-go-t, .lib-go-k { display: none; }

  .modal-palette { padding: 0; }
  .modal-palette .modal-card {
    position: absolute; left: 0; right: 0;
    top: calc(var(--vvt, 0px) + env(safe-area-inset-top) + 10px);
    width: 100%; max-height: none;
    height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top) - 10px);
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%); opacity: 1;
    transition: transform .42s var(--spring, var(--ease-out));
  }
  .modal-palette.in .modal-card { transform: none; }
  .pal-box { padding: 10px 12px 12px 18px; }
  .pal-foot { display: none; }
  .pal-item { min-height: 56px; padding: 8px 10px; }
  .pal-alt { opacity: 1; padding: 8px 12px; }
  .pal-hint { display: none; }

  /* centred above the mini player; it steps up out of the way of a toast or "Back to the narration" */
  .jumpback { left: 50%; bottom: calc(var(--player-h, 0px) + 14px); translate: -50% 0; }
  body:has(.toasts .toast) .jumpback, body:has(.follow:not([hidden])) .jumpback { bottom: calc(var(--player-h, 0px) + 70px); }
  .jb-go { min-height: 40px; }
  .jb-x { width: 40px; height: 40px; }
}
@media (hover: none) { .pal-alt { opacity: 1; } .pal-hint { display: none; } }
:root[data-motion="still"] .modal-palette .modal-card { transition: opacity .15s ease; transform: none; }