/* 00-fonts.css */
/* Fredoka (SIL OFL 1.1), bundled because Stash's CSP blocks web font hosts. */
@font-face {
  font-display: swap;
  font-family: 'Juicy Fredoka';
  font-style: normal;
  font-weight: 300 700;
  src: url('assets/fonts/fredoka-latin-ext-wght-normal.woff2')
    format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Juicy Fredoka';
  font-style: normal;
  font-weight: 300 700;
  src: url('assets/fonts/fredoka-latin-wght-normal.woff2')
    format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* 01-tokens.css */
/*
 * Juicy design tokens. Stash compiles its colours from SCSS and exposes no
 * custom properties, so every rule in this theme reads from these instead.
 * Palette sampled from the sticker references in docs/design.md.
 */
:root {
  color-scheme: dark;
  accent-color: var(--juicy-pink);

  /* Palette */
  --juicy-pink: #fc3d9f;
  --juicy-bubblegum: #fc68b2;
  --juicy-magenta: #dd2a97;
  --juicy-lime: #d7fa54;
  --juicy-gold: #fdda4e;
  --juicy-cyan: #00a8f0;
  --juicy-purple: #9b30ff;
  --juicy-ink: #010224;
  --juicy-danger: #ff5a4e;

  /* Two hues the palette lacks, each between two of its own, for the other
     authors' plugins Juicy restyles, which have eight colours */
  --juicy-tangerine: #fe9a4e; /* between gold and danger */
  --juicy-blueberry: #6b86ff; /* between cyan and purple, light enough to read */

  /* Surfaces, deep plum from back to front */
  --juicy-bg: #150a2e;
  --juicy-bg-deep: #0d0520;
  --juicy-card: #22123f;
  --juicy-card-raised: #2d1852;
  --juicy-line: #3d2466;

  /* Text */
  --juicy-text: #fff2fa;
  --juicy-text-muted: #cdb6e0;
  --juicy-text-dim: #957cb0;
  --juicy-text-faint: #67527f;

  /* Tints */
  --juicy-pink-soft: rgb(252 61 159 / 16%);
  --juicy-lime-soft: rgb(215 250 84 / 22%);

  /* Gradients: the glossy candy fill used on buttons and chips */
  --juicy-gloss-pink: linear-gradient(
    180deg,
    #ff7cc0 0%,
    #fc3d9f 55%,
    #e02c90 100%
  );
  --juicy-gloss-lime: linear-gradient(
    180deg,
    #efff9e 0%,
    #d7fa54 55%,
    #bfe03a 100%
  );
  --juicy-gloss-gold: linear-gradient(
    180deg,
    #fff0a3 0%,
    #fdda4e 55%,
    #f0b81c 100%
  );
  --juicy-gloss-plum: linear-gradient(180deg, #3a2066 0%, #2d1852 100%);
  --juicy-gloss-magenta: linear-gradient(180deg, #c92088 0%, #dd2a97 100%);

  /* Shape */
  --juicy-radius-sm: 8px;
  --juicy-radius: 14px;
  --juicy-radius-lg: 20px;
  --juicy-radius-pill: 999px;
  --juicy-outline: 2.5px;

  /* Depth: stickers sit on a hard ink drop, never a blur */
  --juicy-drop: 0 3px 0 var(--juicy-ink);
  --juicy-drop-lg: 0 5px 0 var(--juicy-ink);
  --juicy-shine: inset 0 2px 0 rgb(255 255 255 / 45%);
  --juicy-press: inset 0 3px 0 rgb(1 2 36 / 35%); /* the shine of a pressed button */
  --juicy-ring: 0 0 0 3px var(--juicy-lime);

  /* Type */
  --juicy-font-display:
    'Juicy Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --juicy-font-body:
    system-ui, -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial,
    sans-serif;

  /* Motion */
  --juicy-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --juicy-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --juicy-fast: 120ms;
  --juicy-medium: 220ms;
}

/* 02-base.css */
/* Page, type, links, focus and selection */
body {
  background-color: var(--juicy-bg);
  background-image: radial-gradient(
    rgb(252 61 159 / 7%) 1.5px,
    transparent 1.7px
  );
  background-size: 22px 22px;
  color: var(--juicy-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-section-title,
.modal-title,
.detail-header .name {
  font-family: var(--juicy-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

a,
.btn-link {
  color: var(--juicy-cyan);
}

a:hover,
.btn-link:hover {
  color: var(--juicy-bubblegum);
}

.text-muted {
  color: var(--juicy-text-dim) !important;
}

/* Bootstrap's status text, as the Tagger's match icons use it */
.text-success {
  color: var(--juicy-lime) !important;
}

.text-warning {
  color: var(--juicy-gold) !important;
}

.text-danger {
  color: var(--juicy-danger) !important;
}

hr {
  border-top-color: var(--juicy-line);
}

code {
  background-color: var(--juicy-card-raised);
  border-radius: var(--juicy-radius-sm);
  color: var(--juicy-bubblegum);
}

::selection {
  background: var(--juicy-lime);
  color: var(--juicy-ink);
}

:focus-visible {
  outline: 3px solid var(--juicy-lime);
  outline-offset: 2px;
}

* {
  scrollbar-color: var(--juicy-pink) var(--juicy-bg-deep);
}

/* 10-navbar.css */
/* Top navigation */
.top-nav {
  background-image: linear-gradient(
    180deg,
    #24104a 0%,
    var(--juicy-bg-deep) 100%
  );
  border-bottom: 3px solid var(--juicy-ink);
  box-shadow: 0 3px 0 var(--juicy-pink);
}

.top-nav .navbar-collapse.bg-dark,
.top-nav.bg-dark {
  background-color: transparent !important;
}

.top-nav .btn.minimal {
  border-radius: var(--juicy-radius-pill);
  color: var(--juicy-text-muted);
  transition:
    background-color var(--juicy-fast),
    color var(--juicy-fast),
    transform var(--juicy-medium) var(--juicy-ease-bounce);
}

.top-nav .btn.minimal:hover {
  background-color: var(--juicy-pink-soft);
  color: var(--juicy-text);
  transform: translateY(-1px);
}

.top-nav .active .btn.minimal,
.top-nav .btn.minimal.active {
  background-image: var(--juicy-gloss-pink);
  box-shadow: var(--juicy-shine);
  color: var(--juicy-ink);
}

.top-nav .brand-link {
  align-items: center;
  color: var(--juicy-pink);
  display: inline-flex !important;
  font-family: var(--juicy-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  gap: 0.35rem;
}

.top-nav .brand-link::before {
  background: url('assets/icons/cherry.svg') center / contain no-repeat;
  content: '';
  display: inline-block;
  height: 1.7em;
  transition: transform var(--juicy-medium) var(--juicy-ease-bounce);
  width: 1.7em;
}

.top-nav .brand-link:hover::before {
  transform: rotate(-12deg) scale(1.1);
}

/* The phone menu button */
.navbar-toggler {
  border: 2px solid var(--juicy-line);
  border-radius: var(--juicy-radius);
}

/* 20-buttons.css */
/*
 * Buttons: glossy candy pills on a hard ink drop that squish when pressed.
 * Stash renders its icon buttons as `.btn.btn-primary.minimal`, so every candy
 * rule skips `.minimal` and those stay flat.
 */
.btn {
  border-radius: var(--juicy-radius-pill);
  font-family: var(--juicy-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    transform var(--juicy-medium) var(--juicy-ease-bounce),
    box-shadow var(--juicy-fast),
    filter var(--juicy-fast),
    background-color var(--juicy-fast),
    color var(--juicy-fast);
}

.btn-primary:not(.minimal),
.btn-secondary:not(.minimal),
.btn-success:not(.minimal),
.btn-danger:not(.minimal),
.btn-warning:not(.minimal),
.btn-info:not(.minimal) {
  border: var(--juicy-outline) solid var(--juicy-ink);
  box-shadow: var(--juicy-drop), var(--juicy-shine);
  color: var(--juicy-ink);
}

.btn.btn-primary:not(.minimal),
.btn.btn-primary:not(.minimal):active {
  background-color: var(--juicy-pink);
  background-image: var(--juicy-gloss-pink);
  border-color: var(--juicy-ink);
  color: var(--juicy-ink);
}

.btn.btn-secondary:not(.minimal),
.btn.btn-secondary:not(.minimal):active {
  background-color: var(--juicy-card-raised);
  background-image: var(--juicy-gloss-plum);
  border-color: var(--juicy-ink);
  color: var(--juicy-text);
}

.btn-success:not(.minimal) {
  background-color: var(--juicy-lime);
  background-image: var(--juicy-gloss-lime);
}

.btn-danger:not(.minimal) {
  background-color: var(--juicy-danger);
  background-image: linear-gradient(
    180deg,
    #ff8a7f 0%,
    var(--juicy-danger) 60%
  );
}

.btn-warning:not(.minimal) {
  background-color: var(--juicy-gold);
  background-image: var(--juicy-gloss-gold);
}

.btn-info:not(.minimal) {
  background-color: var(--juicy-cyan);
  background-image: linear-gradient(180deg, #5fd0ff 0%, var(--juicy-cyan) 60%);
}

.btn-primary:not(.minimal):hover,
.btn-success:not(.minimal):hover,
.btn-danger:not(.minimal):hover,
.btn-warning:not(.minimal):hover,
.btn-info:not(.minimal):hover {
  border-color: var(--juicy-ink);
  box-shadow: var(--juicy-drop-lg), var(--juicy-shine);
  color: var(--juicy-ink);
  filter: brightness(1.07);
  transform: translateY(-2px);
}

.btn-secondary:not(.minimal):hover {
  border-color: var(--juicy-ink);
  box-shadow: var(--juicy-drop-lg), var(--juicy-shine);
  color: var(--juicy-bubblegum);
  transform: translateY(-2px);
}

.btn.btn:not(.minimal, :disabled):active {
  box-shadow:
    0 1px 0 var(--juicy-ink),
    var(--juicy-shine);
  transform: translateY(2px) scale(0.97);
}

.btn:not(.minimal):focus,
.btn:not(.minimal).focus {
  box-shadow: var(--juicy-drop), var(--juicy-ring);
}

/*
 * The picked button of a group (a list's display modes, its page numbers, a
 * bulk edit's Overwrite, Add and Remove) is pressed in: it sits down on its
 * drop with its shine turned to shade, and stays down on hover.
 */
.btn.btn:not(.minimal, :disabled, .disabled).active {
  border-color: var(--juicy-ink);
  box-shadow:
    0 1px 0 var(--juicy-ink),
    var(--juicy-press);
  filter: none;
  transform: translateY(2px);
}

.btn.btn:not(.minimal, :disabled, .disabled).active:focus {
  box-shadow:
    0 1px 0 var(--juicy-ink),
    var(--juicy-press),
    var(--juicy-ring);
}

/* A picked plum button turns pink candy, like the chosen pill or match */
.btn.btn-secondary:not(.minimal, :disabled, .disabled).active {
  background-color: var(--juicy-pink);
  background-image: var(--juicy-gloss-pink);
  color: var(--juicy-ink);
}

/* A picked pink one, among pink ones, is pressed to magenta */
.btn.btn-primary:not(.minimal, :disabled, .disabled).active {
  background-color: var(--juicy-magenta);
  background-image: var(--juicy-gloss-magenta);
  color: var(--juicy-ink);
}

.btn.minimal {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--juicy-text-muted);
}

.btn.minimal:hover,
.btn.minimal:focus {
  background-color: var(--juicy-pink-soft);
  border-color: transparent;
  box-shadow: none;
  color: var(--juicy-bubblegum);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
}

.btn.btn:not(.minimal):disabled,
.btn.btn:not(.minimal).disabled {
  background-color: var(--juicy-card-raised);
  background-image: none;
  border-color: var(--juicy-line);
  box-shadow: none;
  color: var(--juicy-text-dim);
  filter: none;
  transform: none;
}

.btn-group > .btn:not(.minimal, :first-child) {
  margin-left: calc(var(--juicy-outline) * -1);
}

/*
 * Buttons joined to a field stay put: no drop and no lift. Their outer corners
 * match the field's, so a tall group (a scrape dialog row) keeps square-ish
 * ends instead of a half-circle.
 */
.input-group .btn:not(.minimal),
.input-group .btn:not(.minimal):hover,
.input-group .btn.btn:not(.minimal, :disabled):active {
  box-shadow: var(--juicy-shine);
  transform: none;
}

.input-group > .input-group-prepend:first-child > .btn:first-child {
  border-bottom-left-radius: var(--juicy-radius);
  border-top-left-radius: var(--juicy-radius);
}

.input-group > .input-group-append:last-child > .btn:last-child {
  border-bottom-right-radius: var(--juicy-radius);
  border-top-right-radius: var(--juicy-radius);
}

/* Selects styled as buttons (the page-size picker in list toolbars) */
select.btn-secondary:not(.minimal) {
  background-color: var(--juicy-card-raised);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill);
  box-shadow: var(--juicy-drop);
  color: var(--juicy-text);
}

select option {
  background-color: var(--juicy-card-raised);
  color: var(--juicy-text);
}

/* Player chrome that Stash renders as plain buttons: keep it quiet */
#root .scene-divider .btn,
#root .scrubber-button {
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  color: var(--juicy-bubblegum);
  transform: none;
}

#root .scrubber-button {
  background-color: var(--juicy-card-raised);
  border-radius: var(--juicy-radius-sm);
}

/* The marker strip above the scrubber thumbnails */
#root .scrubber-tags-background {
  background-color: var(--juicy-card-raised);
}

#root .scene-divider .btn:hover,
#root .scrubber-button:hover {
  background-color: var(--juicy-pink-soft);
  color: var(--juicy-pink);
}

/* 30-cards.css */
/* Cards: stickers with an ink outline that lift, tilt and catch a lime halo */
.card {
  background-color: var(--juicy-card);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-lg);
  box-shadow: var(--juicy-drop-lg);
  color: var(--juicy-text);
}

.grid-card {
  overflow: hidden;
  transition:
    transform var(--juicy-medium) var(--juicy-ease-bounce),
    box-shadow var(--juicy-fast);
}

.grid-card:hover {
  box-shadow:
    0 0 0 3px var(--juicy-lime),
    0 8px 0 var(--juicy-ink);
  transform: translateY(-4px) rotate(-0.6deg);
}

.grid-card:nth-child(even):hover {
  transform: translateY(-4px) rotate(0.6deg);
}

.grid-card .thumbnail-section {
  border-bottom: var(--juicy-outline) solid var(--juicy-ink);
  overflow: hidden;
  position: relative;
}

/* A gloss sheen sweeps across the thumbnail on hover */
.grid-card .thumbnail-section::after {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgb(255 255 255 / 28%) 50%,
    transparent 65%
  );
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-120%);
}

.grid-card:hover .thumbnail-section::after {
  animation: juicy-shine 700ms var(--juicy-ease-out);
}

.card-section-title {
  color: var(--juicy-text);
}

.grid-card a:hover .card-section-title {
  color: var(--juicy-bubblegum);
}

.scene-card__date,
.performer-card__age {
  color: var(--juicy-text-dim);
}

.card hr {
  border-top: 2px dashed var(--juicy-line);
}

/* Overlays on the thumbnail */
.scene-specs-overlay span,
.scene-interactive-speed-overlay {
  background-color: rgb(1 2 36 / 78%);
  border-radius: var(--juicy-radius-pill);
  color: var(--juicy-text);
  font-family: var(--juicy-font-display);
  font-weight: 600;
  padding: 0 0.45em;
}

.overlay-resolution {
  color: var(--juicy-lime) !important;
}

.rating-banner {
  background-color: var(--juicy-gold) !important;
  background-image: var(--juicy-gloss-gold);
  border: 2px solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill);
  box-shadow: 0 2px 0 var(--juicy-ink);
  color: var(--juicy-ink);
  font-family: var(--juicy-font-display);
  font-weight: 700;
  left: 0.5rem;
  padding: 0.05rem 0.6rem;
  top: 0.5rem;
  transform: rotate(-4deg);
  width: auto;
}

/*
 * The pill sits where Stash puts the card's checkbox (0.5rem in, 1.5rem wide
 * on touch screens). With a mouse Stash hides the pill while the card is
 * hovered, which is when the checkbox shows. Where both show, the pill moves
 * past the checkbox: on a selected card, and always on touch screens, where
 * the checkbox never hides (and a group's drag handle joins it).
 */
.grid-card:has(.card-check:checked) .rating-banner {
  left: 2.4rem;
}

@media (hover: none), (pointer: coarse) {
  .grid-card .rating-banner {
    left: 2.4rem;
  }

  .grid-card:has(.card-drag-handle) .rating-banner {
    left: 4.4rem;
  }
}

/* A card's resume bar. Bootstrap's progress bars are in 80-pages.css. */
.grid-card .progress-bar {
  background-color: rgb(1 2 36 / 70%);
}

.grid-card .progress-indicator {
  background-image: linear-gradient(
    90deg,
    var(--juicy-pink),
    var(--juicy-bubblegum)
  );
}

/* Counts under the card */
.card-popovers .btn.minimal {
  color: var(--juicy-text-muted);
}

.card-popovers .btn.minimal:hover {
  background-color: var(--juicy-lime-soft);
  color: var(--juicy-lime);
}

.card-popovers .organized .btn,
.card-popovers .organized svg {
  color: var(--juicy-lime);
}

/* Favourite heart */
#root .favorite-button.favorite,
#root .favorite-button.favorite:hover,
#root .name-icons .favorite,
#root .favourite-data .favorite {
  color: var(--juicy-pink);
  filter: drop-shadow(0 0 6px rgb(252 61 159 / 70%));
}

.favorite-button.not-favorite {
  color: var(--juicy-text-dim);
}

/*
 * The zoom button on image cards, which opens the lightbox. Stash draws it as
 * a bare 5em magnifier in the middle of the picture, and the candy pill rule
 * turned it into a pink disc there. It is a small candy sticker in the
 * bottom-right corner instead, clear of the checkbox and rating ribbon
 * (top-left) and the studio logo (top-right). #root outranks Stash's hover,
 * focus and active reset and Juicy's own button states.
 */
#root .image-card .preview-button {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.5rem;

  /* Only the sticker takes the pointer; the rest is the picture and its link */
  pointer-events: none;
}

#root .image-card .preview-button .btn {
  align-items: center;
  background-color: var(--juicy-pink);
  background-image: var(--juicy-gloss-pink);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill);
  box-shadow: var(--juicy-drop), var(--juicy-shine);
  color: var(--juicy-ink);
  display: inline-flex;
  filter: none;
  height: 36px;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  position: relative;
  transition:
    opacity var(--juicy-fast),
    transform var(--juicy-medium) var(--juicy-ease-bounce),
    box-shadow var(--juicy-fast),
    filter var(--juicy-fast);
  width: 36px;
}

/* A 44px hit area around the 36px sticker */
#root .image-card .preview-button .btn::after {
  content: '';
  inset: calc(-4px - var(--juicy-outline));
  position: absolute;
}

#root .image-card .preview-button .fa-icon {
  color: inherit;
  filter: none;
  height: 16px;
  opacity: 1;
  transition: none;
  width: 16px;
}

/*
 * With a mouse the sticker waits for the card: it pops in on hover, or when
 * the keyboard reaches anything on the card. :focus-visible rather than
 * :focus-within, so focus that Stash hands back after a mouse-opened lightbox
 * doesn't pin it open. Touch screens have no hover, so there it always shows.
 */
@media (hover: hover) and (pointer: fine) {
  #root .image-card .preview-button .btn {
    opacity: 0;
    transform: scale(0.4) rotate(-25deg);
  }

  #root .image-card:hover .preview-button .btn,
  #root .image-card:has(:focus-visible) .preview-button .btn {
    opacity: 1;
    transform: none;
  }

  #root .image-card .preview-button .btn:hover {
    box-shadow: var(--juicy-drop-lg), var(--juicy-shine);
    filter: brightness(1.07);
    transform: translateY(-2px) rotate(-12deg);
  }
}

#root .image-card .preview-button .btn:active {
  box-shadow:
    0 1px 0 var(--juicy-ink),
    var(--juicy-shine);
  filter: none;
  transform: translateY(2px) scale(0.92);
}

#root .image-card .preview-button .btn:focus-visible {
  box-shadow: var(--juicy-drop), var(--juicy-ring);
}

/* 40-tags.css */
/* Tags and badges: purple candy chips */
.tag-item,
.badge-secondary {
  background-color: var(--juicy-purple);
  border: 2px solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill);
  box-shadow: 0 2px 0 var(--juicy-ink);
  color: #fff;
  font-family: var(--juicy-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--juicy-medium) var(--juicy-ease-bounce);
}

.tag-item:hover,
a.tag-item:hover {
  background-color: #ae55ff;
  color: #fff;
  transform: translateY(-1px) rotate(-2deg);
}

.badge-primary {
  background-color: var(--juicy-pink);
  border: 2px solid var(--juicy-ink);
  color: var(--juicy-ink);
}

.badge-info {
  background-color: var(--juicy-cyan);
  color: var(--juicy-ink);
}

/* 50-rating.css */
/* Ratings: gold hearts instead of stars. The Font Awesome star paths are
   hidden and the svg box paints a heart through a mask. */
.rating-stars svg {
  background-color: currentcolor;
  mask: url('assets/icons/glyph-heart-outline.svg') center / 90% no-repeat;
}

.rating-stars .filled-star svg {
  mask-image: url('assets/icons/glyph-heart.svg');
}

.rating-stars svg path {
  visibility: hidden;
}

.rating-stars .unfilled-star svg {
  color: var(--juicy-text-dim);
}

.rating-stars .filled-star svg,
.rating-stars .unfilled-star .set {
  color: var(--juicy-gold);
  filter: drop-shadow(0 1px 0 var(--juicy-ink));
}

.rating-stars button {
  transition: transform var(--juicy-medium) var(--juicy-ease-bounce);
}

.rating-stars .btn:not(:disabled):hover {
  transform: scale(1.2) rotate(-8deg);
}

.star-rating-number {
  color: var(--juicy-gold);
  font-family: var(--juicy-font-display);
  font-weight: 700;
}

/* The O counter wears a drip. Stash draws it with its own SweatDrops svg (no
   Font Awesome class) and swaps in a thumbs-up in SFW mode, which this skips. */
.o-counter svg:not(.svg-inline--fa),
.count-button .count-icon svg:not(.svg-inline--fa) {
  background-color: currentcolor;
  mask: url('assets/icons/glyph-drip.svg') center / 85% no-repeat;
}

.o-counter svg:not(.svg-inline--fa) path,
.count-button .count-icon svg:not(.svg-inline--fa) path {
  visibility: hidden;
}

.o-counter .btn.minimal,
.count-button:has(svg:not(.svg-inline--fa)) .btn.minimal {
  color: var(--juicy-bubblegum);
}

/* 60-forms.css */
/* Inputs, selects, switches and checkboxes */
.form-control,
.custom-select,
.input-control {
  background-color: var(--juicy-bg-deep);
  border: 2px solid var(--juicy-line);
  border-radius: var(--juicy-radius);
  color: var(--juicy-text);
  transition:
    border-color var(--juicy-fast),
    box-shadow var(--juicy-fast);
}

.form-control::placeholder {
  color: var(--juicy-text-dim);
}

.form-control:focus,
.custom-select:focus {
  background-color: var(--juicy-bg-deep);
  border-color: var(--juicy-pink);
  box-shadow: 0 0 0 3px var(--juicy-pink-soft);
  color: var(--juicy-text);
}

.input-group-text {
  background-color: var(--juicy-card-raised);
  border: 2px solid var(--juicy-line);
  color: var(--juicy-text-muted);
}

/* Validation, as in the stash-box endpoint form: lime when valid, red when not */
.form-control.is-valid,
.was-validated .form-control:valid {
  background-image: none;
  border-color: var(--juicy-lime);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: var(--juicy-lime);
  box-shadow: 0 0 0 3px var(--juicy-lime-soft);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--juicy-danger);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: var(--juicy-danger);
  box-shadow: 0 0 0 3px rgb(255 90 78 / 25%);
}

.invalid-feedback {
  color: var(--juicy-danger);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--juicy-pink);
  border-color: var(--juicy-ink);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--juicy-pink-soft);
}

.custom-control-label::before {
  background-color: var(--juicy-bg-deep);
  border: 2px solid var(--juicy-line);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: var(--juicy-ink);
}

.custom-switch .custom-control-label::after {
  background-color: var(--juicy-text-dim);
}

.custom-checkbox .custom-control-label::before {
  border-radius: 6px;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url('assets/icons/glyph-check.svg');
  background-size: 70%;
}

/* Stash's searchable selects (react-select) */
.react-select__control {
  background-color: var(--juicy-bg-deep) !important;
  border: 2px solid var(--juicy-line) !important;
  border-radius: var(--juicy-radius) !important;
}

.react-select__control--is-focused {
  border-color: var(--juicy-pink) !important;
  box-shadow: 0 0 0 3px var(--juicy-pink-soft) !important;
}

/*
 * The Tagger fills a select when its match links to something already in
 * Stash. The fill above would hide that, so the chosen select turns pink candy
 * like the chosen Create or Skip button beside it.
 */
:is(.performer-select-active, .studio-select-active) .react-select__control {
  background-color: var(--juicy-pink) !important;
  background-image: var(--juicy-gloss-pink);
  border-color: var(--juicy-ink) !important;
}

:is(.performer-select-active, .studio-select-active)
  .react-select__control
  :is(.react-select__single-value, .react-select__indicator) {
  color: var(--juicy-ink);
}

.react-select__menu {
  background-color: var(--juicy-card-raised) !important;
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius) !important;
  box-shadow: var(--juicy-drop-lg) !important;
}

.react-select__option--is-focused {
  background-color: var(--juicy-pink-soft) !important;
}

.react-select__multi-value {
  background-color: var(--juicy-purple) !important;
  border-radius: var(--juicy-radius-pill) !important;
}

.react-select__multi-value__label {
  color: #fff !important;
}

/* Sliders: Stash draws its own (styles/_range.scss), so repaint track and thumb */
#root input[type='range']::-webkit-slider-runnable-track {
  background: var(--juicy-pink);
}

#root input[type='range']:focus::-webkit-slider-runnable-track {
  background: var(--juicy-bubblegum);
}

#root input[type='range']::-webkit-slider-thumb {
  background: var(--juicy-lime);
  border: 2px solid var(--juicy-ink);
  height: 16px;
  margin-top: -5px;
  width: 16px;
}

#root input[type='range']::-moz-range-track {
  background: var(--juicy-pink);
}

#root input[type='range']::-moz-range-thumb {
  background: var(--juicy-lime);
  border: 2px solid var(--juicy-ink);
}

/* 70-overlays.css */
/*
 * Dropdowns, modals, popovers, tooltips, toasts. Stash paints its menus slate
 * through div.dropdown-menu rules, so Juicy's menu rules name the div too. The
 * list toolbars' Sort by and more menus and a scene's Operations menu also put
 * Bootstrap's !important bg-secondary and text-white on the menu and every
 * item, so their colours need !important as well.
 */
.dropdown-menu,
div.dropdown-menu,
.popover {
  background-color: var(--juicy-card-raised);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius);
  box-shadow: var(--juicy-drop-lg);
  color: var(--juicy-text);
}

.dropdown-item,
div.dropdown-menu .dropdown-item {
  border-radius: var(--juicy-radius-sm);
  color: var(--juicy-text);
}

.dropdown-item:hover,
.dropdown-item:focus,
div.dropdown-menu .dropdown-item:hover,
div.dropdown-menu .dropdown-item:focus {
  background-color: var(--juicy-pink-soft);
  color: var(--juicy-bubblegum);
}

.dropdown-item.active,
.dropdown-item:active,
div.dropdown-menu .dropdown-item.active,
div.dropdown-menu .dropdown-item:active {
  background-image: var(--juicy-gloss-pink);
  color: var(--juicy-ink);
}

.dropdown-menu.bg-secondary {
  background-color: var(--juicy-card-raised) !important;
}

.dropdown-menu .dropdown-item.bg-secondary {
  background-color: transparent !important;
}

.dropdown-menu .dropdown-item.text-white {
  color: var(--juicy-text) !important;
}

.dropdown-menu .dropdown-item.bg-secondary:hover,
.dropdown-menu .dropdown-item.bg-secondary:focus {
  background-color: var(--juicy-pink-soft) !important;
}

.dropdown-menu .dropdown-item.text-white:hover,
.dropdown-menu .dropdown-item.text-white:focus {
  color: var(--juicy-bubblegum) !important;
}

.dropdown-menu .dropdown-item.text-white.active,
.dropdown-menu .dropdown-item.text-white:active {
  color: var(--juicy-ink) !important;
}

.popover-body {
  color: var(--juicy-text);
}

.modal-content {
  background-color: var(--juicy-card);
  border: 3px solid var(--juicy-ink);
  border-radius: var(--juicy-radius-lg);
  box-shadow:
    0 0 0 3px var(--juicy-pink),
    0 10px 0 var(--juicy-ink);
  color: var(--juicy-text);
}

/* Stash paints each modal section slate; let the plum content show through. */
.modal-header,
.modal-body,
.modal-footer {
  background-color: transparent;
  color: var(--juicy-text);
}

.modal-header,
.modal-footer {
  border-color: var(--juicy-line);
}

.modal-backdrop.show {
  backdrop-filter: blur(3px);
  background-color: var(--juicy-bg-deep);
  opacity: 0.8;
}

.tooltip-inner {
  background-color: var(--juicy-ink);
  border: 2px solid var(--juicy-lime);
  border-radius: var(--juicy-radius-sm);
  color: var(--juicy-lime);
  font-family: var(--juicy-font-display);
  font-weight: 600;
}

.toast {
  background-color: var(--juicy-card-raised);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-left: 8px solid var(--juicy-pink);
  border-radius: var(--juicy-radius);
  box-shadow: var(--juicy-drop-lg);
  color: var(--juicy-text);
}

.toast-header {
  background-color: transparent;
  border-bottom-color: var(--juicy-line);
  color: var(--juicy-text);
  font-family: var(--juicy-font-display);
  font-weight: 600;
}

.alert {
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius);
  box-shadow: var(--juicy-drop);
}

/* 75-stash-box.css */
/*
 * Stash-box screens: the Tagger, the scrape dialogs, StashID links and the
 * stash-box search lists. Stash paints these slate in its own stylesheet. The
 * Tagger is a work surface where people clear hundreds of rows, so its rows are
 * flat plum panels with no tilt, sheen or lift; the gloss stays on the buttons
 * that act.
 */

/* Tagger rows, and the stash-box result lists that reuse .search-item */
.search-item {
  background-color: var(--juicy-card);
  border: 2px solid var(--juicy-line);
  border-radius: var(--juicy-radius);
}

/* The performer, studio and tag taggers sit inside a card, so raise them */
.PerformerTagger-performer,
.StudioTagger-studio,
.TagTagger-tag,
.modal .search-item {
  background-color: var(--juicy-card-raised);
  border: 2px solid var(--juicy-line);
  border-radius: var(--juicy-radius);
}

.StudioTagger-studio .studio-card img,
.TagTagger-tag .tag-card img {
  background-color: var(--juicy-bg-deep);
}

/* Clickable results in the stash-box search modals take the selection halo */
.PerformerScrapeModal-list .search-item:hover,
.StashBoxIDSearchModal-list .search-item:hover {
  border-color: var(--juicy-lime);
}

/* Scene Tagger results: the picked one is raised with a lime edge */
.search-result {
  background-color: var(--juicy-bg);
  border-radius: var(--juicy-radius-sm);
}

.search-result:hover {
  background-color: var(--juicy-pink-soft);
}

.selected-result,
.selected-result:hover {
  background-color: var(--juicy-card-raised);
  box-shadow: inset 0 0 0 2px var(--juicy-lime);
}

.tagger-container .scene-card-preview,
.search-result .scene-image,
.search-item .scene-image {
  border-radius: var(--juicy-radius-sm);
}

/* Fields left out of a save, or missing from the result */
li.active .optional-field.missing .optional-field-content,
li.active .optional-field.excluded .optional-field-content,
li.active .optional-field.excluded .scene-link {
  color: var(--juicy-text-dim);
}

/* StashID links: the box name on pink candy and the ID on plum, one chip */
.stash-id-pill {
  border: 2px solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill);
  box-shadow: 0 2px 0 var(--juicy-ink);
  font-family: var(--juicy-font-display);
  font-weight: 600;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.stash-id-pill span {
  background-color: var(--juicy-pink);
  background-image: var(--juicy-gloss-pink);
  border-radius: 0;
  color: var(--juicy-ink);
}

.stash-id-pill a {
  background-color: var(--juicy-card-raised);
  border-left: 2px solid var(--juicy-ink);
  border-radius: 0;
  color: var(--juicy-cyan);
}

.stash-id-pill a:hover {
  color: var(--juicy-bubblegum);
}

/*
 * Scrape dialogs set Stash's current value against the scraped one, and the
 * toggle in front of each says which wins. Stash paints the fields slate with
 * Bootstrap's !important utilities, so these need !important too. The winning
 * side's toggle turns lime and its field takes a lime edge.
 */
.scrape-dialog .bg-secondary {
  background-color: var(--juicy-bg-deep) !important;
}

.scrape-dialog .border-secondary {
  border-color: var(--juicy-line) !important;
}

.scrape-dialog .column-label {
  color: var(--juicy-text-muted);
  font-family: var(--juicy-font-display);
  font-weight: 600;
}

.scrape-dialog .input-group-prepend .btn:has(.text-success) {
  background-color: var(--juicy-lime);
  background-image: var(--juicy-gloss-lime);
}

.scrape-dialog .input-group-prepend .btn .text-success {
  color: var(--juicy-ink) !important;
}

.scrape-dialog
  .input-group:has(> .input-group-prepend .text-success)
  :is(.form-control, .react-select__control) {
  border-color: var(--juicy-lime) !important;
}

/* The filter bar at the top of the "Scrape with…" menu */
.scraper-menu .dropdown-menu .scraper-filter-container {
  background-color: var(--juicy-card-raised);
  border-bottom: 2px solid var(--juicy-line);
  border-radius: calc(var(--juicy-radius) - var(--juicy-outline))
    calc(var(--juicy-radius) - var(--juicy-outline)) 0 0;
}

/* Identify task: the ordered list of sources */
.scraper-source-list .list-group-item {
  background-color: var(--juicy-bg-deep);
  border-color: var(--juicy-line);
  color: var(--juicy-text);
}

.identify-source-editor .default-value {
  color: var(--juicy-text-dim);
}

/* 80-pages.css */
/* List toolbars, sidebars, tabs, pagination, detail headers, the player */
.filtered-list-toolbar,
.sidebar {
  background-color: var(--juicy-card);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-lg);
}

.sidebar .sidebar-section-header,
.sidebar h3,
.sidebar h4 {
  color: var(--juicy-bubblegum);
  font-family: var(--juicy-font-display);
}

.nav-tabs {
  border-bottom: 2px solid var(--juicy-line);
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  border: 0;
  border-radius: var(--juicy-radius-pill);
  color: var(--juicy-text-muted);
  font-family: var(--juicy-font-display);
  font-weight: 600;
}

.nav-tabs .nav-link:hover {
  background-color: var(--juicy-pink-soft);
  color: var(--juicy-bubblegum);
}

.nav-tabs .nav-link.active {
  background-image: var(--juicy-gloss-pink);
  box-shadow: var(--juicy-shine);
  color: var(--juicy-ink);
}

.pagination .page-link {
  background-color: var(--juicy-card-raised);
  border: 2px solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill) !important;
  color: var(--juicy-text);
  font-family: var(--juicy-font-display);
  font-weight: 600;
  margin: 0 0.15rem;
}

.pagination .page-link:hover {
  background-color: var(--juicy-pink-soft);
  border-color: var(--juicy-ink);
  color: var(--juicy-bubblegum);
}

.pagination .page-link:focus {
  box-shadow: var(--juicy-ring);
}

.pagination .page-item.active .page-link {
  background-color: var(--juicy-pink);
  background-image: var(--juicy-gloss-pink);
  border-color: var(--juicy-ink);
  color: var(--juicy-ink);
}

.detail-header {
  background-color: var(--juicy-bg-deep);
  background-image: linear-gradient(
    160deg,
    rgb(252 61 159 / 18%) 0%,
    transparent 55%
  );
}

.detail-header .name {
  color: var(--juicy-text);
  text-shadow: 0 3px 0 var(--juicy-ink);
}

/* video.js player */
.video-js .vjs-control-bar {
  background-image: linear-gradient(
    0deg,
    rgb(13 5 32 / 92%),
    rgb(13 5 32 / 0%)
  );
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
  background-color: var(--juicy-pink);
}

.video-js .vjs-play-progress::before {
  color: var(--juicy-lime);
}

.video-js .vjs-load-progress div,
.video-js .vjs-load-progress {
  background-color: rgb(252 104 178 / 25%);
}

/* Settings sidebar and other pill navs */
.nav-pills .nav-link {
  border-radius: var(--juicy-radius-pill);
  color: var(--juicy-text-muted);
  font-family: var(--juicy-font-display);
  font-weight: 600;
}

.nav-pills .nav-link:hover {
  background-color: var(--juicy-pink-soft);
  color: var(--juicy-bubblegum);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--juicy-pink);
  background-image: var(--juicy-gloss-pink);
  box-shadow: var(--juicy-shine);
  color: var(--juicy-ink);
}

/* The job list, which Stash paints slate two classes deep */
#root .job-table.card {
  background-color: var(--juicy-card);
}

/*
 * Bootstrap's progress bars, as in a running job or a bracket in Cherry Pick:
 * pink candy along a deep plum groove. The candy covers the stripes Stash
 * asks of a running job's bar, which still slide it along by their width, so
 * pink lies under the candy and no seam shows.
 */
.progress {
  background-color: var(--juicy-bg-deep);
  border-radius: var(--juicy-radius-pill);
}

.progress .progress-bar {
  background: var(--juicy-pink)
    linear-gradient(90deg, var(--juicy-pink), var(--juicy-bubblegum)) no-repeat;
  color: var(--juicy-ink);
  font-family: var(--juicy-font-display);
  font-weight: 600;
}

/*
 * Tables: plum header, hairline rows. Modals render outside #root, so
 * :is(#root, .modal) keeps #root's weight and reaches tables in dialogs too.
 */
:is(#root, .modal) table thead {
  background-color: var(--juicy-card-raised);
}

:is(#root, .modal) .table thead th {
  border-bottom: 2px solid var(--juicy-line);
  color: var(--juicy-bubblegum);
  font-family: var(--juicy-font-display);
}

:is(#root, .modal) .table td {
  border-top-color: var(--juicy-line);
}

/* The scene edit form's sticky button bar, which Stash paints slate */
#scene-edit-details .edit-buttons-container {
  background-color: var(--juicy-bg);
}

/* 81-suite-tokens.css */
/*
 * Insights from 2.12 and Performers Toolkit from 0.13 work out their own
 * colours from the page and keep them in --sx-* tokens, which their newer
 * rules and charts use directly. Insights keeps the shades in between (row
 * dividers, its error box, tinted verdicts and its calendars' steps) in
 * --ins-* tokens. With a restyle off, those already follow Juicy. With
 * one on, these rules point them at the palette 82-insights.css and
 * 83-performers-toolkit.css give that plugin, so its older and newer rules
 * agree. Earlier releases have no such tokens and ignore these.
 */
.juicy-restyle-insights #root #insights,
.juicy-restyle-toolkit
  #root
  :is(
    .pt,
    .ptc,
    .pt-strip,
    .pt-entry,
    .pt-fb,
    .pt-side,
    .pt-pane,
    .performer-head[data-pt-tidy]
  ),
.juicy-restyle-toolkit :is(#pt-toast, .pt-ov) {
  --sx-bg: var(--bg);
  --sx-bg2: var(--bg2);
  --sx-ui: var(--ui);
  --sx-ui2: var(--ui2);
  --sx-ui3: var(--ui3);
  --sx-raise: var(--ui2);
  --sx-line: var(--ui3);
  --sx-line2: var(--ui3);
  --sx-edge: var(--juicy-line);
  --sx-deep: var(--juicy-ink);
  --sx-slab: var(--juicy-card-raised);
  --sx-tx3: var(--tx3);
  --sx-tx2b: var(--tx2b, var(--tx2));
  --sx-tx2: var(--tx2);
  --sx-tx1b: var(--tx1b);
  --sx-tx: var(--tx);
  --sx-hi: var(--hi);
  --sx-grey: var(--tx2);
  --sx-paper: var(--juicy-text);
  --sx-on: var(--juicy-ink);
  --sx-acc: var(--juicy-pink);
  --sx-acc-tx: var(--juicy-ink);

  /* Each hue reads on the panels as it is; its light and dark steps are
     mixed toward white and toward the page */
  --sx-re: var(--re);
  --sx-re-tx: var(--re);
  --sx-re-l: color-mix(in srgb, var(--re) 60%, #fff);
  --sx-re-d: color-mix(in srgb, var(--re) 45%, var(--bg));
  --sx-or: var(--or);
  --sx-or-tx: var(--or);
  --sx-or-l: color-mix(in srgb, var(--or) 60%, #fff);
  --sx-or-d: color-mix(in srgb, var(--or) 45%, var(--bg));
  --sx-ye: var(--ye);
  --sx-ye-tx: var(--ye);
  --sx-ye-l: color-mix(in srgb, var(--ye) 60%, #fff);
  --sx-ye-d: color-mix(in srgb, var(--ye) 45%, var(--bg));
  --sx-gr: var(--gr);
  --sx-gr-tx: var(--gr);
  --sx-gr-l: color-mix(in srgb, var(--gr) 60%, #fff);
  --sx-gr-d: color-mix(in srgb, var(--gr) 45%, var(--bg));
  --sx-cy: var(--cy);
  --sx-cy-tx: var(--cy);
  --sx-cy-l: color-mix(in srgb, var(--cy) 60%, #fff);
  --sx-cy-d: color-mix(in srgb, var(--cy) 45%, var(--bg));
  --sx-bl: var(--bl);
  --sx-bl-tx: var(--bl);
  --sx-bl-l: color-mix(in srgb, var(--bl) 60%, #fff);
  --sx-bl-d: color-mix(in srgb, var(--bl) 45%, var(--bg));
  --sx-pu: var(--pu);
  --sx-pu-tx: var(--pu);
  --sx-pu-l: color-mix(in srgb, var(--pu) 60%, #fff);
  --sx-pu-d: color-mix(in srgb, var(--pu) 45%, var(--bg));
  --sx-ma: var(--ma);
  --sx-ma-tx: var(--ma);
  --sx-ma-l: color-mix(in srgb, var(--ma) 60%, #fff);
  --sx-ma-d: color-mix(in srgb, var(--ma) 45%, var(--bg));
}

/* Insights draws its calendars' empty days, its rings' tracks and its
   charts' grid lines in --sx-ui, sunk into the panel as its earlier inline
   colours are in 82-insights.css. Its shades in between come from the same
   palette, and its calendars climb from an empty day to the hue in five
   steps: O's, watch time and hours each in their own colour. */
.juicy-restyle-insights #root #insights {
  --sx-ui: var(--juicy-bg-deep);
  --ins-err-bd: color-mix(in srgb, var(--down) 45%, var(--ui));
  --ins-err-bg: color-mix(in srgb, var(--down) 12%, var(--ui));
  --ins-err-tx: var(--down);
  --ins-div1: color-mix(in srgb, var(--ui3) 45%, var(--ui));
  --ins-div2: color-mix(in srgb, var(--ui3) 75%, var(--ui));
  --ins-up-bg: color-mix(in srgb, var(--up) 18%, var(--ui));
  --ins-down-bg: color-mix(in srgb, var(--down) 18%, var(--ui));
  --ins-warn-bg: color-mix(in srgb, var(--ye) 18%, var(--ui));
  --ins-o1: color-mix(in srgb, var(--o) 22%, var(--sx-ui));
  --ins-o2: color-mix(in srgb, var(--o) 42%, var(--sx-ui));
  --ins-o3: color-mix(in srgb, var(--o) 66%, var(--sx-ui));
  --ins-o4: var(--o);
  --ins-o5: color-mix(in srgb, var(--o) 55%, #fff);
  --ins-watch1: color-mix(in srgb, var(--cy) 22%, var(--sx-ui));
  --ins-watch2: color-mix(in srgb, var(--cy) 42%, var(--sx-ui));
  --ins-watch3: color-mix(in srgb, var(--cy) 66%, var(--sx-ui));
  --ins-watch4: var(--cy);
  --ins-watch5: color-mix(in srgb, var(--cy) 55%, #fff);
  --ins-hour1: color-mix(in srgb, var(--pu) 22%, var(--sx-ui));
  --ins-hour2: color-mix(in srgb, var(--pu) 42%, var(--sx-ui));
  --ins-hour3: color-mix(in srgb, var(--pu) 66%, var(--sx-ui));
  --ins-hour4: var(--pu);
  --ins-hour5: color-mix(in srgb, var(--pu) 55%, #fff);
}

/* 82-insights.css */
/*
 * Insights, the stats dashboard another author's plugin draws on Stash's
 * Stats page (gitlab.com/allisless0/stash-plugins), in Juicy's candy.
 *
 * Insights paints itself in the Flexoki palette from custom properties it
 * sets on #insights, and adds its stylesheet to the page the first time Stats
 * opens, after this one. The rules here therefore start at `#root #insights`,
 * which outranks its own. Everything but the sidebar offset waits for the
 * Restyle Insights setting: juicy.js puts .juicy-restyle-insights on <html>
 * when it is on. Off, Insights keeps the look it shares with its sibling
 * plugins, for anyone who prefers it.
 *
 * Its heatmaps, codec and resolution colours and the colours of other
 * plugins' cards come from its JavaScript as inline colours, so they keep
 * Insights' own tones; only their empty cells and the charts' grey lines
 * and labels move to the plum.
 */

/* The Restyle Insights setting shows only while Insights is on. Stash puts
   a script tag for each enabled plugin into the page's head, and gives the
   setting's switch the id plugin-<plugin>-<setting>. */
:root:not(:has(script[src*='/plugin/Insights/']))
  .setting:has([id='plugin-Theme-Juicy-restyleInsights']) {
  display: none;
}

/* The "What works for you" sidebar sticks under the navbar at Stash's
   48.75px. Juicy's bar is as tall but draws its 3px pink rule below it, so
   the sidebar moves down past the rule, whether the setting is on or not. */
#root #insights .ins-side {
  top: 63px;
}

/* Insights' palette in Juicy's: plum cards in deep plum wells, Juicy's text
   tones, and a candy colour for each tab. You is pink, Actions coral, Library
   tangerine, Files cyan, Metadata health gold, Collection lime and Movies
   purple. O's are bubblegum, as on the O counter. */
.juicy-restyle-insights #root #insights {
  --bg: var(--juicy-bg);
  --bg2: var(--juicy-bg-deep);
  --ui: var(--juicy-card);
  --ui2: var(--juicy-card-raised);
  --ui3: var(--juicy-line);
  --tx3: var(--juicy-text-faint);
  --tx2b: var(--juicy-text-dim);
  --tx2: var(--juicy-text-dim);
  --tx1b: var(--juicy-text-muted);
  --tx: var(--juicy-text);
  --hi: #fff;
  --re: var(--juicy-danger);
  --or: var(--juicy-tangerine);
  --ye: var(--juicy-gold);
  --gr: var(--juicy-lime);
  --cy: var(--juicy-cyan);
  --bl: var(--juicy-blueberry);
  --pu: var(--juicy-purple);
  --ma: var(--juicy-pink);
  --up: var(--juicy-lime);
  --down: var(--juicy-danger);
  --o: var(--juicy-bubblegum);
  --otx: var(--juicy-bubblegum);

  /* No slab of its own: the cards sit on the polka dots like Stash's own
     pages */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The head: the name in Fredoka on an ink drop, and the tabs as candy pills
   on a plum tray, the open one filled with its own colour */
.juicy-restyle-insights #root #insights .ins-title {
  color: var(--juicy-text);
  font-family: var(--juicy-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 0 var(--juicy-ink);
}

.juicy-restyle-insights #root #insights .ins-title .ins-ic {
  color: var(--juicy-pink);
  filter: drop-shadow(0 2px 0 var(--juicy-ink));
  height: 24px;
  width: 24px;
}

.juicy-restyle-insights #root #insights .ins-tabs {
  background: var(--juicy-card);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill);
  box-shadow: var(--juicy-drop);
  padding: 4px;
}

/* On phones Insights sets its tabs out in rows, so the tray takes a card's
   corners */
@media (width <= 576px) {
  .juicy-restyle-insights #root #insights .ins-tabs {
    border-radius: var(--juicy-radius-lg);
  }
}

.juicy-restyle-insights #root #insights .ins-tab {
  border: 0;
  border-radius: var(--juicy-radius-pill);
  color: var(--juicy-text-muted);
  font-family: var(--juicy-font-display);
  font-weight: 600;
  transition:
    background-color var(--juicy-fast),
    color var(--juicy-fast),
    transform var(--juicy-medium) var(--juicy-ease-bounce);
}

.juicy-restyle-insights #root #insights .ins-tab:hover {
  background: var(--juicy-pink-soft);
  color: var(--juicy-bubblegum);
}

.juicy-restyle-insights #root #insights .ins-tab.on {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tc), #fff 30%) 0%,
    var(--tc) 55%,
    color-mix(in srgb, var(--tc), #000 10%) 100%
  );
  box-shadow: var(--juicy-shine);
  color: var(--juicy-ink);
}

.juicy-restyle-insights #root #insights .ins-tab.on .ins-ic {
  color: var(--juicy-ink);
}

/* Cards are plum stickers on a hard ink drop. They never tilt: a dashboard
   is read, not handled. Clickable ones take the lime halo on hover. */
.juicy-restyle-insights #root #insights .ins-card {
  background: var(--juicy-card);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-lg);
  box-shadow: var(--juicy-drop-lg);
}

.juicy-restyle-insights #root #insights :is(.ins-tile.click, .ins-pull):hover {
  border-color: var(--juicy-ink);
  box-shadow:
    0 0 0 3px var(--juicy-lime),
    var(--juicy-drop-lg);
}

.juicy-restyle-insights #root #insights .ins-ch b {
  font-family: var(--juicy-font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

/* A card's icon is a small candy sticker in its colour */
.juicy-restyle-insights #root #insights .ins-badge {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c, var(--acc)), #fff 30%) 0%,
    var(--c, var(--acc)) 55%,
    color-mix(in srgb, var(--c, var(--acc)), #000 10%) 100%
  );
  border: 2px solid var(--juicy-ink);
  border-radius: 10px;
  box-shadow:
    0 2px 0 var(--juicy-ink),
    var(--juicy-shine);
  color: var(--juicy-ink);
}

.juicy-restyle-insights #root #insights .ins-sq {
  border-radius: 10px;
}

/* A tile's colour edge is a flat candy stripe, without a glow */
.juicy-restyle-insights #root #insights .ins-tile::before {
  box-shadow: none;
  width: 6px;
}

/* Numbers and small caps in Fredoka */
.juicy-restyle-insights
  #root
  #insights
  :is(
    .ins-hero .big,
    .ins-tile .v,
    .ins-stats b,
    .ins-nb .v,
    .ins-hubt b,
    .ins-ring .mid b,
    .ins-hkn
  ) {
  font-family: var(--juicy-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0;
}

.juicy-restyle-insights
  #root
  #insights
  :is(
    .ins-hero .k,
    .ins-nb .l,
    .ins-pull .k,
    .ins-dims .g,
    .ins-side .h,
    .ins-strip span,
    .ins-sum em
  ) {
  font-family: var(--juicy-font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Data wells are deep plum with a plum line, like Stash's fields in Juicy;
   chips and switches are pills */
.juicy-restyle-insights #root #insights :is(.ins-well, .ins-hubqueue) {
  background: var(--juicy-bg-deep);
  border: 2px solid var(--juicy-line);
  border-radius: var(--juicy-radius);
  box-shadow: none;
}

.juicy-restyle-insights
  #root
  #insights
  :is(.ins-chip, .ins-nav, .ins-pill, .ins-seg, .ins-hchip) {
  background: var(--juicy-bg-deep);
  border: 2px solid var(--juicy-line);
  border-radius: var(--juicy-radius-pill);
  box-shadow: none;
}

.juicy-restyle-insights #root #insights :is(.ins-chip, .ins-seg button) {
  font-family: var(--juicy-font-display);
  font-weight: 500;
}

.juicy-restyle-insights
  #root
  #insights
  :is(.ins-chip:hover, .ins-pill:hover, .ins-seg button:hover) {
  color: var(--juicy-bubblegum);
}

.juicy-restyle-insights #root #insights .ins-seg button {
  border-radius: var(--juicy-radius-pill);
}

/* The chosen chip of a row is pink candy, like Stash's active pills */
.juicy-restyle-insights #root #insights :is(.ins-chip.on, .ins-seg button.on) {
  background: var(--juicy-gloss-pink);
  border-color: var(--juicy-ink);
  box-shadow: var(--juicy-shine);
  color: var(--juicy-ink);
  font-weight: 600;
}

.juicy-restyle-insights #root #insights .ins-hchip.on {
  background: color-mix(in srgb, var(--c) 22%, var(--juicy-card-raised));
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}

/* The dimensions of What works are a pill list, like Stash's settings
   sidebar: pink candy for the open one */
.juicy-restyle-insights #root #insights .ins-side-b {
  border-radius: var(--juicy-radius-pill);
}

.juicy-restyle-insights #root #insights .ins-side-b:hover {
  background: var(--juicy-pink-soft);
  color: var(--juicy-bubblegum);
}

.juicy-restyle-insights #root #insights .ins-side-b.on {
  background: var(--juicy-gloss-pink);
  box-shadow: var(--juicy-shine);
  color: var(--juicy-ink);
  font-weight: 600;
}

/* Buttons are glossy candy pills on a hard ink drop: plum, pink for the one
   that goes ahead, coral for the one that deletes. They lift on hover and
   squish when pressed. */
.juicy-restyle-insights #root #insights .ins-btn {
  background: var(--juicy-gloss-plum);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill);
  box-shadow: var(--juicy-drop), var(--juicy-shine);
  color: var(--juicy-text);
  font-family: var(--juicy-font-display);
  font-weight: 600;
  transition:
    transform var(--juicy-medium) var(--juicy-ease-bounce),
    box-shadow var(--juicy-fast),
    filter var(--juicy-fast),
    color var(--juicy-fast);
}

.juicy-restyle-insights #root #insights .ins-btn:not(:disabled):hover {
  box-shadow: var(--juicy-drop-lg), var(--juicy-shine);
  color: var(--juicy-bubblegum);
  transform: translateY(-2px);
}

.juicy-restyle-insights #root #insights .ins-btn:not(:disabled):active {
  box-shadow:
    0 1px 0 var(--juicy-ink),
    var(--juicy-shine);
  transform: translateY(2px) scale(0.97);
}

.juicy-restyle-insights #root #insights .ins-btn.ins-pri,
.juicy-restyle-insights #root #insights .ins-btn.ins-pri:not(:disabled):hover {
  background: var(--juicy-gloss-pink);
  color: var(--juicy-ink);
}

.juicy-restyle-insights #root #insights .ins-btn.danger,
.juicy-restyle-insights #root #insights .ins-btn.danger:not(:disabled):hover {
  background: linear-gradient(180deg, #ff8a7f 0%, var(--juicy-danger) 60%);
  color: var(--juicy-ink);
}

.juicy-restyle-insights
  #root
  #insights
  :is(.ins-btn.ins-pri, .ins-btn.danger):hover {
  filter: brightness(1.07);
}

.juicy-restyle-insights #root #insights .ins-btn.danger.armed {
  box-shadow:
    0 0 0 3px var(--juicy-lime),
    var(--juicy-drop),
    var(--juicy-shine);
}

.juicy-restyle-insights #root #insights .ins-btn:disabled {
  background: var(--juicy-card-raised);
  border-color: var(--juicy-line);
  box-shadow: none;
  color: var(--juicy-text-dim);
  filter: none;
  opacity: 0.6;
}

/* Links read in cyan and turn bubblegum, as everywhere in Juicy */
.juicy-restyle-insights #root #insights :is(.ins-go, .ins-hlink) {
  color: var(--juicy-cyan);
}

.juicy-restyle-insights
  #root
  #insights
  :is(.ins-go:hover, .ins-hlink:hover:not(:disabled)) {
  color: var(--juicy-bubblegum);
}

/* Rules between rows */
.juicy-restyle-insights
  #root
  #insights
  :is(
    .ins-li + .ins-li,
    .ins-chk + .ins-chk,
    .ins-dg + .ins-dg,
    .ins-hki + .ins-hki,
    .ins-hkc + .ins-hki
  ) {
  border-top-color: var(--juicy-line);
}

.juicy-restyle-insights #root #insights .ins-con tr + tr td {
  border-top-color: var(--juicy-line);
}

.juicy-restyle-insights #root #insights .ins-hkc {
  border: 2px solid var(--juicy-line);
  border-radius: var(--juicy-radius);
}

/* Up and down, keep and delete: their status colours on the plum */
.juicy-restyle-insights #root #insights :is(.ins-lift, .ins-k) {
  border-radius: var(--juicy-radius-pill);
  font-family: var(--juicy-font-display);
}

.juicy-restyle-insights #root #insights :is(.ins-lift.up, .ins-k.keep) {
  background: color-mix(in srgb, var(--juicy-lime) 16%, var(--juicy-card));
}

.juicy-restyle-insights #root #insights :is(.ins-lift.down, .ins-k.del) {
  background: color-mix(in srgb, var(--juicy-danger) 18%, var(--juicy-card));
}

.juicy-restyle-insights #root #insights .ins-k.look {
  background: color-mix(in srgb, var(--juicy-gold) 16%, var(--juicy-card));
}

.juicy-restyle-insights #root #insights .ins-error {
  background: color-mix(in srgb, var(--juicy-danger) 14%, var(--juicy-card));
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-left: 8px solid var(--juicy-danger);
  border-radius: var(--juicy-radius);
  box-shadow: var(--juicy-drop);
  color: var(--juicy-text);
}

/* Ticked copies are pink candy with an ink tick, like Stash's checkboxes
   in Juicy; switches are a pink track with an ink knob */
.juicy-restyle-insights #root #insights .ins-bx {
  border: 2px solid var(--juicy-line);
  border-radius: 6px;
}

.juicy-restyle-insights #root #insights .ins-bx.on {
  background: var(--juicy-gloss-pink);
  border-color: var(--juicy-ink);
}

.juicy-restyle-insights #root #insights .ins-bx.on::after {
  border-color: var(--juicy-ink);
  left: 3px;
  top: 0;
}

.juicy-restyle-insights #root #insights .ins-tog i {
  background: var(--juicy-bg-deep);
  box-shadow: inset 0 0 0 2px var(--juicy-line);
}

.juicy-restyle-insights #root #insights .ins-tog i::after {
  background: var(--juicy-text-dim);
}

.juicy-restyle-insights #root #insights .ins-tog.on i {
  background: var(--juicy-gloss-pink);
  box-shadow: inset 0 0 0 1.5px var(--juicy-ink);
}

.juicy-restyle-insights #root #insights .ins-tog.on i::after {
  background: var(--juicy-ink);
}

/* Treemap type, the calendar's hover ring and the thumbnails' corners */
.juicy-restyle-insights #root #insights .ins-tm div {
  color: var(--juicy-ink);
}

.juicy-restyle-insights #root #insights .ins-cal i:hover:not(.f) {
  outline-color: var(--juicy-lime);
}

.juicy-restyle-insights #root #insights :is(.ins-th, .ins-poster) {
  border-radius: 6px;
}

/* Empty heatmap cells and the charts' grey lines and labels, which Insights
   writes as inline colours */
.juicy-restyle-insights
  #root
  #insights
  :is(.ins-cal, .ins-hm, .ins-legend)
  i[style*='#282726' i] {
  background: var(--juicy-bg-deep) !important;
}

/* The tag picked in Top tags, a lighter green than the tab's: a lighter
   lime here. Insights sets it as the row's --c. */
.juicy-restyle-insights #root #insights .ins-row[style*='#A9BA5A' i] {
  --c: color-mix(in srgb, var(--juicy-lime), #fff 50%) !important;
}

.juicy-restyle-insights #root #insights .ins-ring circle[stroke='#282726' i] {
  stroke: var(--juicy-bg-deep);
}

.juicy-restyle-insights
  #root
  #insights
  svg
  line:is([stroke='#282726' i], [stroke='var(--sx-ui)']) {
  stroke: var(--juicy-line);
}

.juicy-restyle-insights #root #insights svg line[stroke='#575653' i] {
  stroke: var(--juicy-text-faint);
}

.juicy-restyle-insights #root #insights svg text[fill='#878580' i] {
  fill: var(--juicy-text-dim);
}

.juicy-restyle-insights #root #insights svg path[stroke='#A9BA5A' i] {
  stroke: var(--juicy-lime);
}

.juicy-restyle-insights #root #insights svg stop[stop-color='#879A39' i] {
  stop-color: var(--juicy-lime);
}

/* Its tooltip is ink with lime text, like Stash's in Juicy. It sits on
   <body>, outside #insights. */
.juicy-restyle-insights #ins-tip {
  background: var(--juicy-ink);
  border: 2px solid var(--juicy-lime);
  border-radius: var(--juicy-radius-sm);
  box-shadow: var(--juicy-drop);
  color: var(--juicy-lime);
  font-family: var(--juicy-font-display);
  font-weight: 500;
}

/* 83-performers-toolkit.css */
/*
 * Performers Toolkit, another author's plugin from the same suite as
 * Insights (gitlab.com/allisless0/stash-plugins), in Juicy's candy: its page
 * at /performerstoolkit (.pt), the Stats and Catalog tabs it adds to a
 * performer's page (.ptc), the strip under the performer's name
 * (#pt-strip), its button on the Performers list (.pt-entry, a Stash button
 * Juicy already dresses) and its toast (#pt-toast, on <body>).
 *
 * It paints them in the same Flexoki palette as Insights, from custom
 * properties it sets on those five roots, in a stylesheet it adds after this
 * one. These rules start at `#root`, or at the toast's id, so they outrank
 * its own, and all of them wait for the Restyle Performers Toolkit setting
 * (.juicy-restyle-toolkit on <html>, from juicy.js), but for the Catalog
 * tab's count and the one that hides that setting while the plugin is off.
 * It places its toast and its review bar on a phone from Stash's navbar, so
 * it needs no offset for Juicy's.
 */

/* The Restyle Performers Toolkit setting shows only while Performers
   Toolkit is on, as Restyle Insights does for Insights */
:root:not(:has(script[src*='/plugin/PerformersToolkit/']))
  .setting:has([id='plugin-Theme-Juicy-restylePerformersToolkit']) {
  display: none;
}

/* The count on the Catalog tab is a Stash badge, a purple tag chip in
   Juicy, that also carries Performers Toolkit's .pt-badge, whose ink type
   comes after Juicy's white and reads at 3.9:1 on the purple. It keeps the
   white of the other tabs' counts, whether the setting is on or not. */
#root .pt-tablink .badge.pt-badge {
  color: #fff;
}

/* Its palette in Juicy's, as for Insights. Each tab's accent follows:
   blueberry for Find, pink for Performers, purple for History, lime for
   Sources and tangerine for Clean-up. From 0.13 it also paints a
   performer's header (when it tidies it), its full-body pictures, side
   panes and overlays. */
.juicy-restyle-toolkit
  #root
  :is(
    .pt,
    .ptc,
    .pt-strip,
    .pt-entry,
    .pt-fb,
    .pt-side,
    .pt-pane,
    .performer-head[data-pt-tidy]
  ),
.juicy-restyle-toolkit :is(#pt-toast, .pt-ov) {
  --bg: var(--juicy-bg);
  --bg2: var(--juicy-bg-deep);
  --ui: var(--juicy-card);
  --ui2: var(--juicy-card-raised);
  --ui3: var(--juicy-line);
  --tx3: var(--juicy-text-faint);
  --tx2: var(--juicy-text-dim);
  --tx1b: var(--juicy-text-muted);
  --tx: var(--juicy-text);
  --hi: #fff;
  --re: var(--juicy-danger);
  --or: var(--juicy-tangerine);
  --ye: var(--juicy-gold);
  --gr: var(--juicy-lime);
  --cy: var(--juicy-cyan);
  --bl: var(--juicy-blueberry);
  --pu: var(--juicy-purple);
  --ma: var(--juicy-pink);
}

/* The page has no slab of its own: its cards sit on the polka dots */
.juicy-restyle-toolkit #root .pt {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The head: the name in Fredoka on an ink drop, and the tabs as candy pills
   on a plum tray, the open one filled with its own colour */
.juicy-restyle-toolkit #root .pt-title {
  color: var(--juicy-text);
  font-family: var(--juicy-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 0 var(--juicy-ink);
}

.juicy-restyle-toolkit #root .pt-title .pt-ic {
  color: var(--juicy-pink);
  filter: drop-shadow(0 2px 0 var(--juicy-ink));
  height: 24px;
  width: 24px;
}

.juicy-restyle-toolkit #root .pt-tabs {
  background: var(--juicy-card);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill);
  box-shadow: var(--juicy-drop);
  padding: 4px;
}

/* On phones the tabs sit in rows, so the tray takes a card's corners */
@media (width <= 575.98px) {
  .juicy-restyle-toolkit #root .pt-tabs {
    border-radius: var(--juicy-radius-lg);
  }
}

.juicy-restyle-toolkit #root .pt-tab {
  border: 0;
  border-radius: var(--juicy-radius-pill);
  color: var(--juicy-text-muted);
  font-family: var(--juicy-font-display);
  font-weight: 600;
  transition:
    background-color var(--juicy-fast),
    color var(--juicy-fast);
}

.juicy-restyle-toolkit #root .pt-tab:hover {
  background: var(--juicy-pink-soft);
  color: var(--juicy-bubblegum);
}

.juicy-restyle-toolkit #root .pt-tab.on {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tc), #fff 30%) 0%,
    var(--tc) 55%,
    color-mix(in srgb, var(--tc), #000 10%) 100%
  );
  box-shadow: var(--juicy-shine);
  color: var(--juicy-ink);
}

.juicy-restyle-toolkit #root .pt-tab.on .pt-ic {
  color: var(--juicy-ink);
}

/* Cards, the review bar, the catalog's cards and the Stats tab's figures
   and charts are plum stickers on a hard ink drop. A card's coloured top
   edge, which says what it is, becomes a candy lip inside the outline. */
.juicy-restyle-toolkit
  #root
  :is(.pt-card, .pt-mcard, .pt-ccard, .pt-rvbar, .pt-kpi, .pt-cc) {
  background: var(--juicy-card);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-lg);
  box-shadow: var(--juicy-drop-lg);
}

.juicy-restyle-toolkit #root .pt-card.pt-err {
  box-shadow:
    inset 0 4px 0 var(--juicy-danger),
    var(--juicy-drop-lg);
}

.juicy-restyle-toolkit
  #root
  :is(.pt-card.pt-msg, .pt-card.pt-runend, .pt-mcard.ex) {
  box-shadow:
    inset 0 4px 0 var(--juicy-lime),
    var(--juicy-drop-lg);
}

.juicy-restyle-toolkit #root :is(.pt-card.pt-busy, .pt-card.pt-run) {
  box-shadow:
    inset 0 4px 0 var(--juicy-cyan),
    var(--juicy-drop-lg);
}

.juicy-restyle-toolkit #root .pt-card.pt-flow {
  box-shadow:
    inset 0 4px 0 var(--juicy-blueberry),
    var(--juicy-drop-lg);
}

/* On a phone the review bar is fixed to the bottom of the screen, so only
   its top corners round */
@media (width <= 575.98px) {
  .juicy-restyle-toolkit #root .pt-rvbar {
    border-bottom: 0;
    border-radius: var(--juicy-radius-lg) var(--juicy-radius-lg) 0 0;
  }
}

/* Its sheets are dialogs, like Stash's modals in Juicy: a plum sticker with
   a pink ring, over a blurred veil */
.juicy-restyle-toolkit #root .pt-veil {
  backdrop-filter: blur(3px);
  background: rgb(13 5 32 / 80%);
}

.juicy-restyle-toolkit #root .pt-sheet {
  background: var(--juicy-card);
  border: 3px solid var(--juicy-ink);
  border-radius: var(--juicy-radius-lg);
  box-shadow:
    0 0 0 3px var(--juicy-pink),
    0 10px 0 var(--juicy-ink);
}

/* Card titles, small caps and numbers in Fredoka */
.juicy-restyle-toolkit
  #root
  :is(.pt-ch b, .pt-flowt, .pt-herot b, .pt-cct, .pt-s3t) {
  font-family: var(--juicy-font-display);
  font-weight: 600;
}

.juicy-restyle-toolkit #root :is(.pt-sh, .pt-kpik) {
  font-family: var(--juicy-font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.juicy-restyle-toolkit
  #root
  :is(.pt-kpi b, .pt-ring b, .pt-pnum, .pt-dmid b, .pt-rvdone b) {
  font-family: var(--juicy-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Wells, fields, chips and the cards inside a panel are deep plum with a
   plum line, like Stash's fields in Juicy; chips are pills */
.juicy-restyle-toolkit
  #root
  :is(
    .pt-chip,
    .pt-pill,
    .pt-tog,
    .pt-input,
    .pt-sel,
    .pt-acct select,
    .pt-seg select,
    .pt-step,
    .pt-frow,
    .pt-way,
    .pt-src1,
    .pt-boxr,
    .pt-rc,
    .pt-edit,
    .pt-none,
    .pt-ct,
    .pt-sc,
    .pt-scard,
    .pt-cand,
    .pt-dcard,
    .pt-prow,
    .pt-box,
    .pt-banner,
    .pt-wait,
    .pt-fbr,
    .pt-rec,
    .pt-dup
  ) {
  border-color: var(--juicy-line);
  border-radius: var(--juicy-radius);
  box-shadow: none;
}

/* Switches keep a field's corners, since their labels can wrap */
.juicy-restyle-toolkit #root :is(.pt-chip, .pt-pill, .pt-step, .pt-rc) {
  border-radius: var(--juicy-radius-pill);
}

.juicy-restyle-toolkit #root .pt-box {
  border-radius: 6px;
}

.juicy-restyle-toolkit #root :is(.pt-chip, .pt-step, .pt-tog) {
  font-family: var(--juicy-font-display);
  font-weight: 500;
}

.juicy-restyle-toolkit #root :is(.pt-input, .pt-sel, .pt-acct select) {
  border-width: 2px;
}

.juicy-restyle-toolkit #root :is(.pt-input, .pt-sel, .pt-acct select):focus {
  border-color: var(--juicy-pink);
  box-shadow: 0 0 0 3px var(--juicy-pink-soft);
  outline: none;
}

.juicy-restyle-toolkit #root :is(.pt-shot, .pt-pbig, .pt-gcell, .pt-pc) {
  border-color: var(--juicy-line);
  border-radius: var(--juicy-radius-sm);
}

.juicy-restyle-toolkit #root :is(.pt-shot, .pt-pbig) {
  border-radius: var(--juicy-radius);
}

.juicy-restyle-toolkit #root .pt kbd {
  border-color: var(--juicy-line);
}

.juicy-restyle-toolkit #root :is(a.pt-chip:hover, .pt-chip:hover) {
  border-color: var(--juicy-line);
  color: var(--juicy-bubblegum);
}

/* The chosen chip or step is pink candy, like Stash's active pills in
   Juicy. A card in a list takes the lime selection edge on hover and when
   chosen, like the Tagger's picked match. */
.juicy-restyle-toolkit #root :is(.pt-chip.on, .pt-step.on) {
  background: var(--juicy-gloss-pink);
  border-color: var(--juicy-ink);
  box-shadow: var(--juicy-shine);
  color: var(--juicy-ink);
  font-weight: 600;
}

.juicy-restyle-toolkit #root .pt-step.on b {
  background: var(--juicy-ink);
  color: var(--juicy-pink);
}

.juicy-restyle-toolkit
  #root
  :is(.pt-sc, .pt-cand, .pt-scard, .pt-dcard, .pt-prow):hover {
  border-color: var(--juicy-lime);
}

.juicy-restyle-toolkit
  #root
  :is(.pt-sc.on, .pt-cand.on, .pt-scard.on, .pt-dcard.on, .pt-prow.on) {
  background: var(--juicy-card-raised);
  border-color: var(--juicy-lime);
  box-shadow: inset 0 0 0 1px var(--juicy-lime);
}

/* Buttons are glossy candy pills on a hard ink drop: plum, pink for the one
   that goes ahead, coral for the one that deletes. They lift on hover and
   squish when pressed. */
.juicy-restyle-toolkit #root .pt-btn {
  background: var(--juicy-gloss-plum);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-radius: var(--juicy-radius-pill);
  box-shadow: var(--juicy-drop), var(--juicy-shine);
  color: var(--juicy-text);
  font-family: var(--juicy-font-display);
  font-weight: 600;
  transition:
    transform var(--juicy-medium) var(--juicy-ease-bounce),
    box-shadow var(--juicy-fast),
    filter var(--juicy-fast),
    color var(--juicy-fast);
}

.juicy-restyle-toolkit #root .pt-btn:not(:disabled):hover {
  box-shadow: var(--juicy-drop-lg), var(--juicy-shine);
  color: var(--juicy-bubblegum);
  transform: translateY(-2px);
}

.juicy-restyle-toolkit #root .pt-btn:not(:disabled):active {
  box-shadow:
    0 1px 0 var(--juicy-ink),
    var(--juicy-shine);
  transform: translateY(2px) scale(0.97);
}

.juicy-restyle-toolkit #root .pt-btn.pt-pri,
.juicy-restyle-toolkit #root .pt-btn.pt-pri:not(:disabled):hover {
  background: var(--juicy-gloss-pink);
  color: var(--juicy-ink);
}

.juicy-restyle-toolkit #root .pt-btn.pt-pri kbd {
  background: rgb(255 255 255 / 25%);
  border-color: rgb(1 2 36 / 35%);
  color: var(--juicy-ink);
}

.juicy-restyle-toolkit #root .pt-btn.pt-danger,
.juicy-restyle-toolkit #root .pt-btn.pt-danger:not(:disabled):hover {
  background: linear-gradient(180deg, #ff8a7f 0%, var(--juicy-danger) 60%);
  color: var(--juicy-ink);
}

.juicy-restyle-toolkit #root :is(.pt-btn.pt-pri, .pt-btn.pt-danger):hover {
  filter: brightness(1.07);
}

.juicy-restyle-toolkit #root .pt-btn.pt-dangerl {
  color: var(--juicy-danger);
}

.juicy-restyle-toolkit #root .pt-btn.pt-dangerl:not(:disabled):hover {
  color: #ff8a7f;
}

.juicy-restyle-toolkit #root .pt-btn:disabled {
  background: var(--juicy-card-raised);
  border-color: var(--juicy-line);
  box-shadow: none;
  color: var(--juicy-text-dim);
  filter: none;
  opacity: 0.6;
}

/* Switches are a pink track with an ink knob, like Stash's in Juicy */
.juicy-restyle-toolkit #root .pt-tog i {
  background: var(--juicy-bg-deep);
  box-shadow: inset 0 0 0 2px var(--juicy-line);
}

.juicy-restyle-toolkit #root .pt-tog i::after {
  background: var(--juicy-text-dim);
}

.juicy-restyle-toolkit #root .pt-tog.on i {
  background: var(--juicy-gloss-pink);
  box-shadow: inset 0 0 0 1.5px var(--juicy-ink);
}

.juicy-restyle-toolkit #root .pt-tog.on i::after {
  background: var(--juicy-ink);
}

/* Links read in cyan and turn bubblegum, as everywhere in Juicy */
.juicy-restyle-toolkit #root :is(.pt-link, a.pt-pill),
.juicy-restyle-toolkit #pt-toast .pt-link {
  color: var(--juicy-cyan);
}

.juicy-restyle-toolkit
  #root
  :is(
    .pt-link:hover,
    a.pt-pill:hover,
    a.pt-fname:hover,
    .pt-mtitle a:hover,
    .pt-sctitle:hover,
    .pt-cctt:hover,
    .pt-srow:hover .pt-srt
  ),
.juicy-restyle-toolkit #pt-toast .pt-link:hover {
  color: var(--juicy-bubblegum);
}

.juicy-restyle-toolkit #root .pt-c-bl {
  color: var(--juicy-cyan);
}

/* Good and bad in Juicy's lime and coral */
.juicy-restyle-toolkit
  #root
  :is(
    .pt-c-gr,
    .pt-pill.pt-good,
    .pt-why .ok,
    .pt-delkeep,
    .pt-fwc b,
    .pt-banner.pt-b-gr,
    .pt-frow b.pt-c-gr
  ) {
  color: var(--juicy-lime);
}

.juicy-restyle-toolkit
  #root
  :is(.pt-err, .pt-c-re, .pt-why .no, .pt-rvstat.pt-s-error) {
  color: var(--juicy-danger);
}

/* Ink on the filled badges and tags, which are candy pills. The count on
   the Catalog tab is also a .pt-badge, but a Stash .badge in a Stash tab,
   which keeps Juicy's purple tag chip. */
.juicy-restyle-toolkit
  #root
  :is(
    .pt-badge:not(.badge),
    .pt-covtag,
    .pt-cpick,
    .pt-dcard.on .pt-dtag,
    .pt-scard.on .pt-scpick
  ) {
  border-radius: var(--juicy-radius-pill);
  color: var(--juicy-ink);
  font-family: var(--juicy-font-display);
  font-weight: 600;
}

/* Labels laid over pictures sit on ink */
.juicy-restyle-toolkit
  #root
  :is(
    .pt-shothint,
    .pt-sccov kbd,
    .pt-scpick,
    .pt-ccpill,
    .pt-poor,
    .pt-ckey kbd,
    .pt-pcsz
  ) {
  background: rgb(1 2 36 / 80%);
}

.juicy-restyle-toolkit #root .pt-scard.on .pt-scpick {
  background: var(--juicy-cyan);
}

/* Status edges in the review bar: cyan for news, as for Juicy's links */
.juicy-restyle-toolkit #root .pt-rvstat {
  --sk: var(--juicy-cyan);
}

.juicy-restyle-toolkit #root .pt-rvstat.pt-s-done {
  --sk: var(--juicy-lime);
}

.juicy-restyle-toolkit #root .pt-rvstat.pt-s-warn {
  --sk: var(--juicy-gold);
}

.juicy-restyle-toolkit #root .pt-rvstat.pt-s-error {
  --sk: var(--juicy-danger);
}

.juicy-restyle-toolkit #root .pt-zoom input {
  accent-color: var(--juicy-pink);
}

.juicy-restyle-toolkit #root :is(.pt-sheet, .pt-fbl, .pt-strip, .pt-hitems) {
  scrollbar-color: var(--juicy-pink) transparent;
}

/* Its toast is a raised plum sticker with its kind on a thick left edge,
   like Stash's toasts in Juicy */
.juicy-restyle-toolkit #pt-toast {
  --tk: var(--juicy-pink);

  background: var(--juicy-card-raised);
  border: var(--juicy-outline) solid var(--juicy-ink);
  border-left: 8px solid var(--tk);
  border-radius: var(--juicy-radius);
  box-shadow: var(--juicy-drop-lg);
  color: var(--juicy-text);
}

.juicy-restyle-toolkit #pt-toast.pt-t-done {
  --tk: var(--juicy-lime);
}

.juicy-restyle-toolkit #pt-toast.pt-t-warn {
  --tk: var(--juicy-gold);
}

.juicy-restyle-toolkit #pt-toast.pt-t-error {
  --tk: var(--juicy-danger);
}

/* 85-loading.css */
/* Loading: a gum bubble that swells and pops instead of Bootstrap's spinner */
.LoadingIndicator .spinner-border {
  animation: juicy-bubble 1.4s var(--juicy-ease-out) infinite;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 9%, transparent 10%),
    radial-gradient(
      circle at 40% 35%,
      #ffc2e2 0%,
      var(--juicy-bubblegum) 55%,
      #e2399a 100%
    );
  border: 3px solid var(--juicy-ink);
  box-shadow: 0 0 0 4px var(--juicy-lime);
}

.LoadingIndicator-message {
  color: var(--juicy-bubblegum);
  font-family: var(--juicy-font-display);
}

/* 90-motion.css */
/* Keyframes, burst particles and the calm switch */
@keyframes juicy-shine {
  to {
    transform: translateX(120%);
  }
}

@keyframes juicy-bubble {
  0% {
    opacity: 1;
    transform: scale(0.25);
  }

  70% {
    opacity: 1;
    transform: scale(1);
  }

  82% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@keyframes juicy-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      scale(1) rotate(var(--spin));
  }
}

@keyframes juicy-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-8deg);
  }

  75% {
    transform: rotate(8deg);
  }
}

.juicy-burst {
  animation: juicy-burst 650ms var(--juicy-ease-out) forwards;
  background: url('assets/icons/heart.svg') center / contain no-repeat;
  height: 22px;
  pointer-events: none;
  position: fixed;
  width: 22px;
  z-index: 2000;
}

.juicy-burst.is-sparkle {
  background-image: url('assets/icons/sparkle.svg');
}

.juicy-burst.is-drip {
  background-image: url('assets/icons/drip.svg');
}

.juicy-calm *,
.juicy-calm *::before,
.juicy-calm *::after {
  animation: none !important;
  transition: none !important;
}

.juicy-calm .LoadingIndicator .spinner-border {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .juicy-burst {
    display: none;
  }
}

/* 95-sfw.css */
/* Stash's SFW content mode keeps the candy and drops the cheek */
body:has(.sfw-content-mode) .juicy-burst.is-drip {
  background-image: url('assets/icons/sparkle.svg');
}

.juicy-empty {
  align-items: center;
  color: var(--juicy-text-muted);
  display: flex;
  flex-direction: column;
  font-family: var(--juicy-font-display);
  font-size: 1.25rem;
  gap: 0.75rem;
  padding: 2rem 1rem;
}

.juicy-empty::before {
  animation: juicy-wiggle 2.4s ease-in-out infinite;
  background: url('assets/icons/mascot.svg') center / contain no-repeat;
  content: '';
  height: 120px;
  width: 120px;
}

body:has(.sfw-content-mode) .juicy-empty::before {
  background-image: url('assets/icons/heart.svg');
}

/* An empty list: Stash shows only "0-0 of 0", and juicy.js adds the line */
.paginationIndex[data-juicy-empty] {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.paginationIndex[data-juicy-empty]::after {
  background: url('assets/icons/mascot.svg') top center / 120px no-repeat;
  color: var(--juicy-text-muted);
  content: attr(data-juicy-empty);
  display: block;
  font-family: var(--juicy-font-display);
  font-size: 1.25rem;
  margin-top: 2rem;
  padding-top: 132px;
}

/* Plain labels or SFW mode: a heart and no line */
.paginationIndex[data-juicy-empty='']::after {
  background-image: url('assets/icons/heart.svg');
  width: 120px;
}