/* 00-fonts.css */
/*
 * Mr Dafoe, Jost and a subset of Zen Maru Gothic (all SIL OFL 1.1), bundled
 * because Stash's CSP blocks web font hosts. City Pop's own family names keep
 * a copy installed on the viewer's system from standing in. Zen Maru Gothic
 * holds only the Japanese characters the theme draws (tools/zen-maru.sh), and
 * its unicode-range says so, so it downloads only where one of them shows.
 */
@font-face {
  font-display: swap;
  font-family: 'CityPop Dafoe';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/mr-dafoe/mr-dafoe-latin-ext-400-normal.woff2')
    format('woff2');
  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: 'CityPop Dafoe';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/mr-dafoe/mr-dafoe-latin-400-normal.woff2')
    format('woff2');
  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;
}

@font-face {
  font-display: swap;
  font-family: 'CityPop Jost';
  font-style: normal;
  font-weight: 100 900;
  src: url('assets/fonts/jost/jost-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: 'CityPop Jost';
  font-style: normal;
  font-weight: 100 900;
  src: url('assets/fonts/jost/jost-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;
}

@font-face {
  font-display: swap;
  font-family: 'CityPop Jost';
  font-style: italic;
  font-weight: 100 900;
  src: url('assets/fonts/jost/jost-latin-ext-wght-italic.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: 'CityPop Jost';
  font-style: italic;
  font-weight: 100 900;
  src: url('assets/fonts/jost/jost-latin-wght-italic.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;
}

/* シティポップ真夜中ラジオ面夕焼け, and nothing else */
@font-face {
  font-display: swap;
  font-family: 'CityPop Zen Maru';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/zen-maru-gothic/zen-maru-gothic-subset-500.woff2')
    format('woff2');
  unicode-range:
    U+3051, U+30A3, U+30AA, U+30B7, U+30B8, U+30C3, U+30C6, U+30D7, U+30DD,
    U+30E9, U+4E2D, U+5915, U+591C, U+713C, U+771F, U+9762;
}

@font-face {
  font-display: swap;
  font-family: 'CityPop Zen Maru';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/zen-maru-gothic/zen-maru-gothic-subset-700.woff2')
    format('woff2');
  unicode-range:
    U+3051, U+30A3, U+30AA, U+30B7, U+30B8, U+30C3, U+30C6, U+30D7, U+30DD,
    U+30E9, U+4E2D, U+5915, U+591C, U+713C, U+771F, U+9762;
}

/* 01-tokens.css */
/*
 * City Pop design tokens. Stash compiles its colours from SCSS and exposes no
 * custom properties, so every rule in this theme reads from these instead.
 * Every url() here resolves against citypop.css.
 */
:root {
  color-scheme: dark;
  accent-color: var(--citypop-sun);

  /* The dusk: night blue overhead, violet low down */
  --citypop-night: #0c0e30;
  --citypop-panel: #1a1848;
  --citypop-raised: #252262;
  --citypop-line: #3a3678;
  --citypop-edge: #332f72;
  --citypop-key: #4a4596;
  --citypop-well: #0e0f33;

  /* The sunset, from the sun's top to its foot */
  --citypop-gold: #ffe08a;
  --citypop-apricot: #ffb36b;
  --citypop-sun: #ff7a6b;
  --citypop-coral: #ff8a7a;
  --citypop-pink: #f5508a;
  --citypop-magenta: #c23a8e;
  --citypop-violet: #6a3fb0;
  --citypop-lilac: #b9a6f0;

  /* Pool water, the second accent */
  --citypop-pool: #4fe3da;
  --citypop-pool-hi: #6ff0e6;
  --citypop-pool-deep: #1596b0;

  /* Sky, the info colour */
  --citypop-sky: #a3bbff;

  /* Type and paper */
  --citypop-ink: #1b1145;
  --citypop-cream: #fff6ea;
  --citypop-paper: #fbf6ef;
  --citypop-text: #fff4ec;
  --citypop-muted: #cbc3ec;
  --citypop-dim: #a39bd3;
  --citypop-unlit: #8f87c9;

  /* Status text keeps its meaning in the dusk's own tones */
  --citypop-success: #6ff0e6;
  --citypop-warning: #ffc27a;
  --citypop-danger: #ff7d92;

  /* The hard airbrush shadow: crisp, offset, violet-black */
  --citypop-drop: rgb(4 3 22 / 62%);
  --citypop-hard: 6px 6px 0 var(--citypop-drop);
  --citypop-hard-sm: 3px 3px 0 rgb(4 3 22 / 70%);

  /* Panels: deep navy-violet, lit a touch from the top */
  --citypop-panel-grad: linear-gradient(180deg, #1f1c55 0%, #181546 100%);

  /* The sunset gradient, and its button cut, which stops short of deep
     magenta so navy type stays 5:1 or better on it */
  --citypop-sunset: linear-gradient(
    180deg,
    #ffe08a 0%,
    #ffb36b 28%,
    #ff7a6b 55%,
    #f5508a 80%,
    #c23a8e 100%
  );
  --citypop-sunset-x: linear-gradient(90deg, #ffb36b, #ff7a6b 45%, #f5508a);
  --citypop-sunset-btn: linear-gradient(
    180deg,
    #ffc98a 0%,
    #ff9a6e 38%,
    #ff7a6b 62%,
    #f5608a 100%
  );
  --citypop-night-btn: linear-gradient(180deg, #312d78, #232060);
  --citypop-pool-grad: linear-gradient(
    180deg,
    #7ff3ea 0%,
    #4fe3da 45%,
    #2fc4cc 75%,
    #1fa6bd 100%
  );

  /* The cel gloss: a crisp white highlight over the top of anything glossy */
  --citypop-gloss: linear-gradient(
    180deg,
    rgb(255 255 255 / 30%) 0 44%,
    rgb(255 255 255 / 0%) 44%
  );
  --citypop-gloss-soft: linear-gradient(
    180deg,
    rgb(255 255 255 / 9%) 0 44%,
    transparent 44%
  );

  /* The J-card stripe band: apricot, coral, pink, violet */
  --citypop-stripes: linear-gradient(
    180deg,
    #ffb36b 0 2px,
    transparent 2px 3.5px,
    #ff7a6b 3.5px 5.5px,
    transparent 5.5px 7px,
    #f5508a 7px 8.5px,
    transparent 8.5px 10px,
    #8a5ad8 10px 11px,
    transparent 11px
  );

  /* The chrome on the wordmark: pink sky over a hard horizon */
  --citypop-chrome: linear-gradient(
    180deg,
    #fff 0%,
    #fff0fb 20%,
    #ffc4e1 40%,
    #ff8fb8 51%,
    #fff 51.6%,
    #fff 52.6%,
    #341a73 53%,
    #5b3aa8 64%,
    #a98cf0 82%,
    #f4e9ff 100%
  );

  /*
   * Light on pool water, a seamless tile. Each screen density gets its own
   * lossless file at its own pixels, and the tile is always drawn at its
   * native size, since resampling the edges would show the seam.
   */
  --citypop-caustic: image-set(
      url('assets/icons/caustic-1x.webp') 1x,
      url('assets/icons/caustic-2x.webp') 2x,
      url('assets/icons/caustic-3x.webp') 3x
    )
    0 0 / 200px 200px;
  --citypop-glint: url('assets/icons/glint.svg');

  /* Shape */
  --citypop-radius: 4px;
  --citypop-band: 11px;

  /*
   * The navbar carries the stripe band along its foot, so it is taller than
   * Stash's own 48.75px bar. Stash spaces the page, the sidebar and its sticky
   * headers by that height, so 80-pages.css moves them with this.
   */
  --citypop-nav-height: 60px;

  /* Type: the brush script for titles, Jost for the rest, her lines in
     Jost's light italic (the thin Futura oblique of 80s liner notes) */
  --citypop-font-display: 'CityPop Dafoe', 'Brush Script MT', cursive;
  --citypop-font-label:
    'CityPop Jost', 'CityPop Zen Maru', futura, 'Century Gothic', sans-serif;
  --citypop-font-ja:
    'CityPop Zen Maru', 'Hiragino Maru Gothic ProN', sans-serif;
  --citypop-font-body:
    system-ui, -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial,
    sans-serif;

  /* Motion */
  --citypop-ease: cubic-bezier(0.2, 0.8, 0.25, 1);
  --citypop-fast: 140ms;
  --citypop-medium: 240ms;
}

/* 02-base.css */
/* Page, type, links, focus, selection, the dusk and the setting sun */
::selection {
  background: var(--citypop-pink);
  color: #fff;
}

/*
 * The dusk: night blue overhead, violet low down and a sunset glow along the
 * bottom edge, with stars and palm silhouettes. It is fixed, so it stays
 * while you scroll, and it sits behind the page, never over it.
 */
body {
  background: var(--citypop-night);
  color: var(--citypop-text);
}

body::before {
  background:
    url('assets/icons/palms-backdrop.svg') left -2vh bottom -1px / auto
      min(44vh, 80vw) no-repeat,
    url('assets/icons/stars.svg') center top / 100% auto no-repeat,
    radial-gradient(
      40% 22% at 80% 100%,
      rgb(255 150 110 / 34%),
      rgb(245 80 138 / 14%) 55%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      #0a0c2c 0%,
      #111344 34%,
      #1d185a 62%,
      #2f1f66 82%,
      #45215f 93%,
      #552262 100%
    );
  content: '';
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

/*
 * The setting sun, smaller and dimmer than the art, low in the right corner.
 * Text over its disc would be hard to read, so it stays down wherever
 * full-width content crosses the horizon and rises only where the horizon is
 * free (90-motion.css).
 */
body::after {
  background: url('assets/icons/sun-horizon.svg') right 6vw bottom -1px / auto
    min(22vh, 30vw) no-repeat;
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

a {
  color: var(--citypop-text);
}

a:hover {
  color: var(--citypop-coral);
}

/*
 * Headings are Jost. The brush script is kept for the wordmark, section
 * titles and the names on detail pages and performer cards (here and in
 * 80-pages.css and 30-cards.css), so it never has to carry small or long text.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--citypop-font-label);
  font-weight: 500;
}

.setting-section > h1,
.recommendation-row-head h2 {
  color: var(--citypop-text);
  font-family: var(--citypop-font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow:
    2px 2px 0 var(--citypop-magenta),
    4px 5px 0 rgb(4 3 22 / 55%);
  text-transform: none;
  word-spacing: 0.2em;
}

/* The front page's row titles, which Stash sets small and in caps */
.recommendation-row-head h2 {
  font-size: 2.2rem;
  line-height: 1.1;
}

[lang='ja'] {
  font-family: var(--citypop-font-ja);
  font-weight: 700;
}

/* Her lines (toasts, the loader, empty states) speak in a light italic,
   close and readable; the script stays for titles */
.toast-header,
.LoadingIndicator-message,
.citypop-empty,
.paginationIndex[data-citypop-empty]:not([data-citypop-empty=''])::after {
  font-family: var(--citypop-font-label);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: none;
}

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

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

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

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

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

code {
  color: var(--citypop-coral);
}

/* Focus is pool water: a turquoise ring that never reads as an action colour */
:focus-visible {
  outline: 2px solid var(--citypop-pool);
  outline-offset: 2px;
}

* {
  scrollbar-color: #3a3678 var(--citypop-night);
}

/* 10-navbar.css */
/*
 * Navigation: night sky with the J-card stripe band along its foot. Stash
 * paints the bar and its folded menu with Bootstrap's !important bg-dark, so
 * these need !important too.
 */
.top-nav.navbar {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 50%),
    linear-gradient(180deg, #0d0f36 0%, #16144a 100%) !important;
  border-bottom: 0;
  box-shadow: 0 6px 0 rgb(4 3 22 / 45%);
  min-height: var(--citypop-nav-height);
  padding: 0.45rem 1rem calc(0.45rem + var(--citypop-band));
}

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

.top-nav.navbar::after {
  background: var(--citypop-stripes) 0 0 / 100% var(--citypop-band) no-repeat;
  bottom: 0;
  content: '';
  height: var(--citypop-band);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* Stash fixes the bar to 48.75px on wide screens */
@media (width >= 1200px) {
  .top-nav.navbar {
    height: var(--citypop-nav-height);
  }

  /* Stash pads its page links for the folded menu's tiles; on the bar they
     are pills, so the bar keeps its height */
  .top-nav .navbar-nav .nav-link > .btn.minimal {
    padding: 0.35rem 0.85rem !important;
  }
}

.top-nav .btn.minimal {
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.top-nav .btn.minimal:not(:disabled):hover {
  background: rgb(255 255 255 / 6%);
  color: #fff;
}

/* The active page is a sunset sticker */
.top-nav .btn.minimal.active,
.top-nav .btn.minimal.active:not(:disabled):hover {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  box-shadow: var(--citypop-hard-sm);
  color: var(--citypop-ink);
  font-weight: 600;
}

/* The brand is chrome script with a hard horizon, beside the striped sun */
.top-nav .brand-link.btn.minimal {
  align-items: center;
  background: var(--citypop-chrome);
  background-clip: text;
  border-radius: 0;
  color: transparent;
  display: inline-flex !important;
  filter: drop-shadow(2px 2px 0 #c23a8e)
    drop-shadow(2px 2px 0 rgb(4 3 22 / 60%));
  font-family: var(--citypop-font-display);
  font-size: 2.3rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 0.6rem 0.15rem 2rem;
  position: relative;
  text-transform: none;
}

.top-nav .brand-link.btn.minimal::before {
  background: url('assets/icons/sun.svg') center / contain no-repeat;
  content: '';
  height: 26px;
  left: 0;
  position: absolute;
  top: calc(50% - 14px);
  width: 26px;
}

.top-nav .brand-link.btn.minimal:not(:disabled):hover {
  background: var(--citypop-chrome);
  background-clip: text;
  color: transparent;
}

.top-nav .navbar-brand {
  padding-block: 0;
}

/* The menu toggle Stash shows below 1200px: a small night-violet key */
.top-nav .navbar-toggler {
  background: linear-gradient(180deg, #2d2970, #221f5c);
  border: 0;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px var(--citypop-key),
    2px 2px 0 rgb(4 3 22 / 70%);
  color: var(--citypop-text);
  padding: 0.3rem 0.55rem;
}

.top-nav .navbar-toggler:focus-visible {
  box-shadow: 0 0 0 2px var(--citypop-pool);
  outline: none;
}

/*
 * The folded menu: Stash's grid of icon tiles, in tracked caps on the night
 * sky. The bar keeps --citypop-nav-height while folded, so its row sits a
 * little tighter.
 */
@media (width < 1200px) {
  .top-nav.navbar {
    padding-block: 0.35rem calc(0.35rem + var(--citypop-band));
  }

  .top-nav .navbar-collapse .btn.minimal {
    border-radius: 5px;
    letter-spacing: 0.12em;
  }

  .top-nav .navbar-collapse .nav-menu-icon {
    color: var(--citypop-dim);
  }

  .top-nav .navbar-collapse .btn.minimal.active .nav-menu-icon {
    color: var(--citypop-ink);
  }
}

@media (width <= 720px) {
  .top-nav .brand-link.btn.minimal {
    font-size: 2rem;
  }
}

/*
 * On a phone held upright Stash docks the bar at the bottom of the screen, so
 * the stripe band moves to its top edge and the shadow falls upward.
 */
@media (width <= 575.98px) and (orientation: portrait) {
  .top-nav.navbar {
    box-shadow: 0 -6px 0 rgb(4 3 22 / 45%);
    padding: calc(0.35rem + var(--citypop-band)) 2rem 0.35rem;
  }

  .top-nav.navbar::after {
    bottom: auto;
    top: 0;
  }
}

/* 20-buttons.css */
/*
 * Buttons: glossy airbrushed enamel on a crisp offset shadow, like late sun.
 * Pressing pushes the button down onto its shadow. Stash renders its icon
 * buttons as `.btn.btn-primary.minimal`, so every enamel rule skips
 * `.minimal` and those stay flat.
 */
.btn {
  --citypop-btn-shadow:
    inset 0 1px 0 rgb(255 255 255 / 40%), inset 0 -2px 0 rgb(0 0 0 / 14%),
    3px 3px 0 rgb(4 3 22 / 70%);

  border-radius: 5px;
  font-family: var(--citypop-font-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    transform var(--citypop-fast) var(--citypop-ease),
    box-shadow var(--citypop-fast) var(--citypop-ease),
    filter var(--citypop-fast) var(--citypop-ease),
    color var(--citypop-fast) var(--citypop-ease);
}

/*
 * The glint hangs off the button, so it needs a position. A zero-specificity
 * rule keeps every Stash rule that places a button absolutely (card
 * favourites, the Tagger's sprite button) in charge.
 */
:where(.btn:not(.minimal, .btn-link)) {
  position: relative;
}

.btn:not(.minimal, .btn-link) {
  border: 0 !important;
  box-shadow: var(--citypop-btn-shadow);
  font-size: 0.82rem;
}

.btn:focus,
.btn.focus {
  box-shadow: var(--citypop-btn-shadow) !important;
  outline: none;
}

.btn:focus-visible {
  box-shadow:
    var(--citypop-btn-shadow),
    0 0 0 2px var(--citypop-night),
    0 0 0 4px var(--citypop-pool) !important;
}

/* Pressed: the button drops onto its own shadow */
.btn:not(.minimal, .btn-link, :disabled, .disabled):active,
.btn:not(.minimal, .btn-link).active {
  --citypop-btn-shadow:
    inset 0 2px 3px rgb(0 0 0 / 25%), 1px 1px 0 rgb(4 3 22 / 70%);

  transform: translate(2px, 2px);
}

/* Primary is the sunset with navy type */
.btn-primary:not(.minimal),
.btn-primary:not(.minimal):hover,
.btn-primary:not(.minimal):focus,
.btn-primary:not(.minimal, :disabled, .disabled):active,
.btn-primary:not(.minimal, :disabled, .disabled).active,
.show > .btn-primary.dropdown-toggle:not(.minimal) {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  color: var(--citypop-ink);
  font-weight: 600;
}

.btn-primary:not(.minimal) {
  padding-inline: 1.5rem;
}

/* The glint: a four-point sparkle on the top-right corner of the gloss */
.btn-primary:not(.minimal)::after {
  background: var(--citypop-glint) center / contain no-repeat;
  content: '';
  height: 16px;
  pointer-events: none;
  position: absolute;
  right: 5px;
  top: -6px;
  transform: scale(0.75) rotate(0deg);
  transition: transform var(--citypop-medium) var(--citypop-ease);
  width: 16px;
}

/* Rows of the Tagger repeat their buttons hundreds of times; they keep the
   sunset and drop the glint */
.search-item .btn-primary:not(.minimal)::after {
  content: none;
}

.btn-primary:not(.minimal, :disabled, .disabled):hover::after {
  transform: scale(1.1) rotate(90deg);
}

.btn-primary:not(.minimal, :disabled, .disabled):hover {
  filter: brightness(1.06) saturate(1.08);
}

/* Secondary is night violet */
.btn-secondary:not(.minimal),
.btn-secondary:not(.minimal):hover,
.btn-secondary:not(.minimal):focus,
.btn-secondary:not(.minimal, :disabled, .disabled):active,
.show > .btn-secondary.dropdown-toggle:not(.minimal) {
  --citypop-btn-shadow:
    inset 0 0 0 1px var(--citypop-key), inset 0 1px 0 rgb(255 255 255 / 18%),
    3px 3px 0 rgb(4 3 22 / 70%);

  background: var(--citypop-gloss-soft), var(--citypop-night-btn);
  color: var(--citypop-text);
}

.btn-secondary:not(.minimal, :disabled, .disabled):hover {
  color: #fff;
  filter: brightness(1.15);
}

/* The chosen item of a group is the sunset */
.btn.btn-secondary:not(.minimal, :disabled, .disabled).active {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  color: var(--citypop-ink);
  font-weight: 600;
}

/* Success is pool turquoise, warning apricot, info sky and danger hot coral */
.btn-success:not(.minimal),
.btn-success:not(.minimal):hover,
.btn-success:not(.minimal):focus,
.btn-success:not(.minimal, :disabled, .disabled):active {
  background: var(--citypop-gloss), var(--citypop-pool-grad);
  color: var(--citypop-ink);
  font-weight: 600;
}

.btn-warning:not(.minimal),
.btn-warning:not(.minimal):hover,
.btn-warning:not(.minimal):focus,
.btn-warning:not(.minimal, :disabled, .disabled):active {
  background:
    var(--citypop-gloss), linear-gradient(180deg, #ffe7a0, #ffc27a 55%, #ffa060);
  color: var(--citypop-ink);
  font-weight: 600;
}

.btn-info:not(.minimal),
.btn-info:not(.minimal):hover,
.btn-info:not(.minimal):focus,
.btn-info:not(.minimal, :disabled, .disabled):active {
  background:
    var(--citypop-gloss), linear-gradient(180deg, #c6d6ff, #a3bbff 55%, #8aa4f6);
  color: var(--citypop-ink);
  font-weight: 600;
}

.btn-danger:not(.minimal),
.btn-danger:not(.minimal):hover,
.btn-danger:not(.minimal):focus,
.btn-danger:not(.minimal, :disabled, .disabled):active {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 22%) 0 44%, transparent 44%),
    linear-gradient(180deg, #f0365a, #d62452 55%, #b81846);
  color: #fff;
  font-weight: 600;
}

:is(.btn-success, .btn-warning, .btn-info, .btn-danger):not(
    .minimal,
    :disabled,
    .disabled
  ):hover {
  filter: brightness(1.07) saturate(1.08);
}

.btn:disabled,
.btn.disabled {
  box-shadow: none !important;
  cursor: not-allowed;
  filter: saturate(0.3) brightness(0.8);
  opacity: 0.45;
  transform: none;
}

.btn:disabled::after,
.btn.disabled::after {
  display: none;
}

.btn-sm:not(.minimal, .btn-link) {
  font-size: 0.72rem;
}

.btn-sm.btn-primary:not(.minimal) {
  padding-inline: 1.15rem;
}

.btn.minimal {
  --citypop-btn-shadow: none;

  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--citypop-muted);
}

.btn.minimal:not(:disabled):hover,
.btn.minimal:not(:disabled, .disabled):active {
  background: rgb(255 255 255 / 6%);
  border-color: transparent;
  color: #fff;
}

.btn-link {
  --citypop-btn-shadow: none;

  color: var(--citypop-coral);
  text-decoration: underline 1px rgb(255 138 122 / 55%);
  text-underline-offset: 5px;
}

.btn-link:hover {
  color: var(--citypop-apricot);
  text-decoration-color: var(--citypop-apricot);
}

/*
 * Joined buttons share one hard shadow, so seams stay flush and a pressed or
 * chosen button never steps out of line. The pager is one strip with the
 * current page in sunset.
 */
.btn-group:has(> .btn:not(.minimal, .btn-link)) {
  border-radius: 5px;
  box-shadow: 3px 3px 0 rgb(4 3 22 / 70%);
}

.btn-group > .btn:not(.minimal, .btn-link) {
  --citypop-btn-shadow:
    inset 0 1px 0 rgb(255 255 255 / 40%), inset 0 -2px 0 rgb(0 0 0 / 14%);
}

.btn-group > .btn-secondary:not(.minimal) {
  --citypop-btn-shadow:
    inset 0 0 0 1px var(--citypop-key), inset 0 1px 0 rgb(255 255 255 / 18%);
}

.btn-group > .btn:not(.minimal, .btn-link, :disabled, .disabled):active,
.btn-group > .btn:not(.minimal, .btn-link).active {
  --citypop-btn-shadow: inset 0 2px 3px rgb(0 0 0 / 22%);

  transform: none;
}

/* A disabled end of the pager stays part of the strip, just unlit */
.btn-group > .btn-secondary:not(.minimal):disabled {
  background: linear-gradient(180deg, #1f1c56, #1a1749);
  box-shadow: inset 0 0 0 1px var(--citypop-line) !important;
  color: rgb(203 195 236 / 38%);
  filter: none;
  opacity: 1;
}

/* Buttons joined to a field stay put */
.input-group .btn:not(.minimal, .btn-link, :disabled, .disabled):active {
  transform: none;
}

/* Selects styled as buttons (the page-size picker in list toolbars) */
select.btn-secondary {
  background:
    url('assets/icons/chevron.svg') right 0.6rem center / 12px 12px no-repeat,
    var(--citypop-night-btn);
  border: 0;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px var(--citypop-key),
    3px 3px 0 rgb(4 3 22 / 70%);
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  letter-spacing: 0.08em;
}

select option {
  background-color: var(--citypop-panel);
  color: var(--citypop-text);
}

/*
 * Chrome that Stash renders as plain buttons: the bars that fold the details
 * panel away on scene and gallery pages, and the player's scrubber arrows.
 * Keep them quiet.
 */
#root :is(.scene-divider, .gallery-divider, .details-divider) .btn,
#root .scrubber-button {
  background: none;
  box-shadow: none;
  color: var(--citypop-dim);
  transform: none;
}

#root :is(.scene-divider, .gallery-divider, .details-divider) .btn::after,
#root .scrubber-button::after {
  content: none;
}

#root .scrubber-button {
  background: var(--citypop-raised);
}

#root :is(.scene-divider, .gallery-divider, .details-divider) .btn:hover,
#root .scrubber-button:hover {
  color: var(--citypop-coral);
}

#root .scrubber-tags-background {
  background-color: var(--citypop-raised);
}

/* 30-cards.css */
/* Cards: record sleeves on a hard airbrush shadow */
.card {
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-edge);
  border-radius: var(--citypop-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    var(--citypop-hard);
  color: var(--citypop-text);
}

/* Catalogue numbers for the sleeves: 28CP-001, 28CP-002 … */
@counter-style citypop-cat {
  system: extends decimal;
  pad: 3 '0';
}

body {
  counter-reset: citypop-cat;
}

/* Stash zeroes each card type's padding two classes deep */
.grid-card.card {
  counter-increment: citypop-cat;
  padding: 6px;
  transition:
    transform var(--citypop-medium) var(--citypop-ease),
    box-shadow var(--citypop-medium) var(--citypop-ease);
}

/* Hover lifts the sleeve off its shadow */
.grid-card:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    9px 9px 0 var(--citypop-drop);
  transform: translate(-2px, -2px);
}

.grid-card .thumbnail-section {
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

/* Stash leaves a 5px gap under the picture; the sleeve closes round it */
.grid-card :is(.scene-card-preview, .image-card-preview, .gallery-card-cover) {
  margin-bottom: 0;
}

/*
 * The printed white keyline inside the picture, and the sunset that sweeps
 * across it on hover
 */
.grid-card .thumbnail-section::after {
  background: linear-gradient(
      100deg,
      transparent 38%,
      rgb(255 179 107 / 0%) 39%,
      rgb(255 179 107 / 45%) 42%,
      rgb(255 138 110 / 70%) 45.5%,
      rgb(245 80 138 / 65%) 49%,
      rgb(140 70 200 / 45%) 52.5%,
      transparent 56%
    )
    82% 0 / 320% 100% no-repeat;
  content: '';
  inset: 0;
  mix-blend-mode: screen;
  outline: 1px solid rgb(255 250 244 / 72%);
  outline-offset: -6px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.grid-card:hover .thumbnail-section::after {
  animation: citypop-sweep 1000ms cubic-bezier(0.4, 0, 0.3, 1) forwards;
}

/* The glint that flashes on the sleeve's corner as the sunset passes */
.grid-card .thumbnail-section::before {
  background: var(--citypop-glint) center / contain no-repeat;
  content: '';
  height: 40px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 26%;
  top: 18%;
  transform: scale(0) rotate(-60deg);
  width: 38px;
  z-index: 3;
}

.grid-card:hover .thumbnail-section::before {
  animation: citypop-glint 1000ms 420ms ease-out both;
}

/* What Stash puts on the picture stays above the keyline and the sweep */
.grid-card .card-controls {
  left: calc(6px + 0.5rem);
  top: calc(6px + 0.5rem);
  z-index: 3;
}

.grid-card .thumbnail-section :is(.rating-banner, .favorite-button, .fi) {
  z-index: 2;
}

.card a {
  color: inherit;
  text-decoration: none;
}

.grid-card .card-section {
  flex-grow: 1;
  padding: 0.6rem 0.45rem 0.2rem;
}

.card-section-title,
.grid-card a .card-section-title {
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

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

/* Performers sign their sleeve, in the script */
.performer-card .card-section-title .performer-name {
  font-family: var(--citypop-font-display);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
  word-spacing: 0.2em;
}

.performer-card .card-section {
  padding-top: 0.85rem;
}

:is(
  .scene-card__details,
  .gallery-card__details,
  .image-card__details,
  .studio-card__details
) {
  color: var(--citypop-dim);
}

:is(
  .scene-card__date,
  .gallery-card__date,
  .image-card__date,
  .performer-card__age
) {
  color: var(--citypop-dim);
  font-family: var(--citypop-font-label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*
 * The catalogue label printed on the spine: side and number. Forty of them
 * read as data, so it shows only on the sleeve you are looking at. A scene's
 * sits at the end of its date line, a performer's under her name.
 */
.scene-card__details {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
}

.scene-card__details > * {
  flex-basis: 100%;
  order: 2;
}

.scene-card__details > .scene-card__date {
  flex-basis: auto;
  order: 0;
}

.scene-card__details::after,
.performer-card .card-section::after {
  color: var(--citypop-dim);
  content: 'A面 · 28CP-' counter(citypop-cat, citypop-cat);
  font-family: var(--citypop-font-label);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  margin-left: auto;
  opacity: 0;
  order: 1;
  transition: opacity var(--citypop-medium) var(--citypop-ease);
  white-space: nowrap;
}

.performer-card .card-section::after {
  content: 'B面 · 28CP-' counter(citypop-cat, citypop-cat);
  display: block;
  text-align: right;
}

.grid-card:hover :is(.scene-card__details, .card-section)::after {
  opacity: 1;
}

/* The card rule is the sleeve's fold: a pressed crease, dark under light */
.grid-card > hr {
  border: 0;
  border-top: 1px solid rgb(4 3 22 / 60%);
  box-shadow: 0 1px 0 rgb(185 166 240 / 16%);
  height: 0;
  margin: 0.55rem 0.15rem 0.45rem;
  opacity: 1;
}

/* Overlays on the picture */
.studio-overlay a {
  color: #fff;
  font-family: var(--citypop-font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-shadow:
    1px 1px 0 rgb(10 6 40 / 90%),
    0 0 8px rgb(10 6 40 / 85%),
    0 0 16px rgb(10 6 40 / 60%);
  text-transform: uppercase;
}

.scene-specs-overlay {
  display: flex;
  gap: 0.3rem;
  text-shadow: none;
}

.scene-specs-overlay > span:not(:last-child) {
  margin-right: 0;
}

.scene-specs-overlay > span,
.scene-interactive-speed-overlay:not(:empty) {
  background: rgb(12 14 48 / 84%);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 0.14rem 0.42rem;
}

.scene-specs-overlay > .extra-scene-info {
  display: none;
}

.scene-specs-overlay .overlay-resolution {
  color: var(--citypop-pool-hi);
}

/*
 * The rating is a small cassette-label sticker with a coral edge, set on
 * barely crooked, in place of Stash's diagonal ribbon, so half a grid of them
 * stays quiet. Stash names a star rating rating-1 to rating-5 and finer
 * ratings rating-100-0 to rating-100-20, each with its own colour.
 */
.rating-banner,
.rating-banner[class*='rating-'] {
  background:
    linear-gradient(var(--citypop-sun), var(--citypop-sun)) 0 0 / 100% 2px
      no-repeat,
    var(--citypop-cream);
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgb(4 3 22 / 55%);
  color: var(--citypop-ink);
  font-family: var(--citypop-font-label);
  font-size: 0.6rem;
  font-weight: 600;
  left: 12px;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 0.45rem 0.5rem 0.32rem;
  text-transform: uppercase;
  top: 12px;
  transform: rotate(-2deg);
}

/*
 * Stash shows the card's checkbox in the picture's top-left corner whenever a
 * card is hovered or selected, and always on touch screens, so the sticker
 * sits to its right (and past a group's drag handle where there is one).
 */
.grid-card .rating-banner {
  left: calc(6px + 0.5rem + 1.75rem);
}

.grid-card:has(.card-drag-handle) .rating-banner {
  left: calc(6px + 0.5rem + 3.75rem);
}

/*
 * A guessed rating, such as Cherry Pick's Your score, is the same sticker
 * left blank: night blue with cream type and a dashed pool edge, so it reads
 * over any cover and never passes for a rating of Stash's. Cherry Pick sets
 * its own dim, outline and case at two classes, so this names the card too
 * and wins in either stylesheet order; its hidden width line stays.
 */
.grid-card .rating-banner.cherrypick-score-banner {
  background: linear-gradient(180deg, #1f1c55, var(--citypop-well))
    var(--citypop-panel);
  box-shadow: 2px 2px 0 rgb(4 3 22 / 55%);
  color: var(--citypop-cream);
  outline: 1px dashed rgb(79 227 218 / 85%);
  outline-offset: -3px;
  text-transform: uppercase;
}

.grid-card .rating-banner.cherrypick-score-banner .cherrypick-star {
  color: var(--citypop-pool-hi);
}

/* Progress is an FM dial: ticks along the band, a sunset to the needle */
.grid-card .progress-bar {
  background:
    repeating-linear-gradient(
        90deg,
        rgb(203 195 236 / 55%) 0 1px,
        transparent 1px 8px
      )
      0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(
        90deg,
        rgb(255 255 255 / 80%) 0 1px,
        transparent 1px 40px
      )
      0 0 / 100% 5px no-repeat,
    rgb(9 8 32 / 86%);
  bottom: 0;
  height: 7px;
  z-index: 2;
}

.grid-card .progress-indicator {
  background: linear-gradient(
    90deg,
    rgb(255 179 107 / 75%),
    rgb(255 122 107 / 90%) 60%,
    #f5508a
  );
  height: 7px;
  position: relative;
}

.grid-card .progress-indicator::after {
  background: #fff;
  box-shadow: 0 0 0 1px rgb(194 58 142 / 60%);
  content: '';
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
}

/* Counts under the card */
.card-popovers .btn.minimal {
  color: var(--citypop-muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.card-popovers .btn.minimal:not(:disabled):hover {
  color: var(--citypop-coral);
}

.card-popovers .count-button .btn.minimal {
  color: var(--citypop-pool-hi);
}

.card-popovers .count-button .count-value.btn.minimal {
  color: var(--citypop-muted);
}

.card-popovers .organized .btn,
.card-popovers .organized svg {
  color: var(--citypop-pool-hi);
}

/*
 * Audio-only scenes have no picture, so citypop.js gives their sleeve a
 * cassette laid across a pool at dusk. Stash's own hover preview and scrubber
 * stay above it.
 */
.citypop-audio-cover {
  align-items: center;
  background:
    url('assets/icons/stars.svg') center top / 220% auto no-repeat,
    linear-gradient(
      180deg,
      #121244 0%,
      #2a1f6e 26%,
      #7a2f88 46%,
      #e0507e 58%,
      #ff9a72 64%
    );
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}

/* The sun on the horizon */
.citypop-audio-cover::before {
  background: url('assets/icons/sun-horizon.svg') 50% 100% / auto 92% no-repeat;
  content: '';
  inset: 0 0 36%;
  position: absolute;
}

/* The pool: turquoise at dusk, with soft caustics and the sun's reflection in
   bars. Kept a shade deep, since a third of some grids is tapes */
.citypop-audio-cover::after {
  background:
    repeating-linear-gradient(
        180deg,
        transparent 0 4px,
        rgb(255 154 114 / 48%) 4px 6px
      )
      50% 0 / 30% 70% no-repeat,
    linear-gradient(rgb(14 60 112 / 42%), rgb(14 60 112 / 42%)),
    var(--citypop-caustic),
    linear-gradient(180deg, #3cc4cc 0%, #1a8cae 40%, #11477e 100%);
  border-top: 1px solid #ffd9b0;
  bottom: 0;
  content: '';
  height: 36%;
  left: 0;
  position: absolute;
  right: 0;
}

/* The tape: its shell, two reels that turn on hover, the label and two glints */
.citypop-tape {
  aspect-ratio: 248 / 172;
  background: url('assets/icons/tape-blank.svg') center / contain no-repeat;
  container-type: inline-size;
  position: relative;
  transform: translateY(6%) rotate(-7deg);
  transition: transform var(--citypop-medium) var(--citypop-ease);
  width: 58%;
  z-index: 1;
}

.grid-card:hover .citypop-tape {
  transform: translateY(4%) rotate(-5deg) scale(1.03);
}

.citypop-tape::before,
.citypop-tape::after {
  aspect-ratio: 1;
  background: url('assets/icons/reel.svg') center / contain no-repeat;
  content: '';
  left: 26.61%;
  position: absolute;
  top: 33.72%;
  width: 9.68%;
}

.citypop-tape::after {
  left: 60.48%;
}

.grid-card:hover .citypop-tape::before,
.grid-card:hover .citypop-tape::after {
  animation: citypop-spin 1.6s linear infinite;
}

/* A grid can hold a dozen tapes: their glints wait for the pointer instead of
   sparkling all at once */
.citypop-tape-glints::before,
.citypop-tape-glints::after {
  aspect-ratio: 1;
  background: var(--citypop-glint) center / contain no-repeat;
  content: '';
  left: 22.18%;
  opacity: 0;
  position: absolute;
  top: 25.58%;
  transition: opacity var(--citypop-medium) var(--citypop-ease);
  width: 8.87%;
}

.citypop-tape-glints::after {
  left: 83.47%;
  top: 61.05%;
  width: 5.65%;
}

.grid-card:hover .citypop-tape-glints::before,
.grid-card:hover .citypop-tape-glints::after {
  opacity: 1;
}

/* Handwritten on the label, and the side stamped on its corner */
.citypop-tape-title {
  color: #3a2a7a;
  font-size: 6.4cqi;
  left: 25%;
  letter-spacing: 0.12em;
  line-height: 1;
  position: absolute;
  top: 13.5%;
  transform: rotate(-1.5deg);
  white-space: nowrap;
}

.citypop-tape-side {
  background: var(--citypop-ink);
  border-radius: 2px;
  color: var(--citypop-cream);
  font-size: 4.2cqi;
  left: 11%;
  line-height: 1;
  padding: 0.3em 0.25em 0.25em;
  position: absolute;
  top: 14%;
}

/*
 * The zoom button on image cards, which opens the lightbox. Stash draws it as
 * a bare 5em magnifier in the middle of the picture. Here it is a glossy
 * sunset bubble in the bottom-right corner. #root outranks Stash's hover,
 * focus and active reset.
 */
#root .image-card .preview-button {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.6rem;

  /* Only the bubble takes the pointer; the rest is the picture and its link */
  pointer-events: none;
  z-index: 2;
}

#root .image-card .preview-button .btn {
  align-items: center;
  background:
    var(--citypop-glint) 22% 18% / 46% 46% no-repeat,
    var(--citypop-gloss),
    var(--citypop-sunset-btn);
  border-radius: 50%;
  box-shadow: 2px 2px 0 rgb(4 3 22 / 75%);
  color: var(--citypop-ink);
  display: inline-flex;
  filter: none;
  height: 34px;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  position: relative;
  transition:
    opacity var(--citypop-fast) var(--citypop-ease),
    transform var(--citypop-medium) var(--citypop-ease);
  width: 34px;
}

#root .image-card .preview-button .btn::after {
  content: none;
}

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

/*
 * With a mouse the bubble waits for the card: it shows on hover, or when the
 * keyboard reaches anything on the card. 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.7);
  }

  #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 {
    filter: brightness(1.06) saturate(1.08);
  }
}

#root .image-card .preview-button .btn:active {
  box-shadow: 1px 1px 0 rgb(4 3 22 / 75%);
  transform: translate(1px, 1px) scale(0.94);
}

#root .image-card .preview-button .btn:focus-visible {
  box-shadow:
    2px 2px 0 rgb(4 3 22 / 75%),
    0 0 0 2px var(--citypop-night),
    0 0 0 4px var(--citypop-pool);
}

.grid-card .card-check {
  accent-color: var(--citypop-sun);
}

/* 40-tags.css */
/* Tags: night-violet pills with a striped sun for a dot */
.tag-item.badge,
.badge-secondary {
  align-items: center;
  background: linear-gradient(180deg, #2a2566, #211d56);
  border: 1px solid var(--citypop-key);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgb(4 3 22 / 60%);
  color: #f1ebff;
  display: inline-flex;
  font-family: var(--citypop-font-label);
  font-size: 0.72rem;
  font-weight: 500;
  gap: 0.45em;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 0.5em 0.95em 0.5em 0.65em;
  text-transform: uppercase;
}

.tag-item.badge::before {
  background: var(--citypop-sunset);
  content: '';
  flex: none;
  height: 1.05em;
  mask: url('assets/icons/glyph-sun.svg') center / contain no-repeat;
  width: 1.05em;
}

.tag-item.badge a {
  color: inherit;
}

.tag-item.badge:hover,
.tag-item.badge a:hover {
  border-color: var(--citypop-coral);
  color: #fff;
  text-decoration: none;
}

.badge-primary {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgb(4 3 22 / 60%);
  color: var(--citypop-ink);
  font-family: var(--citypop-font-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.badge-info {
  background: var(--citypop-gloss), var(--citypop-pool-grad);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgb(4 3 22 / 60%);
  color: var(--citypop-ink);
  font-family: var(--citypop-font-label);
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* 50-rating.css */
/*
 * Ratings: striped sunset suns; an empty one is the same sun drawn in
 * outline. The Font Awesome star paths are hidden and the svg box paints the
 * sun through a mask.
 */
.rating-stars svg {
  background: var(--citypop-unlit);
  mask: url('assets/icons/glyph-sun-line.svg') center / 92% no-repeat;
}

.rating-stars .filled-star svg {
  background: var(--citypop-sunset);
  mask-image: url('assets/icons/glyph-sun.svg');
}

.rating-stars .filled-star {
  filter: drop-shadow(1.5px 1.5px 0 rgb(4 3 22 / 80%));
}

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

/* A full sun covers its outline */
.rating-stars .star-fill-100 .unfilled-star {
  visibility: hidden;
}

.rating-stars .btn.minimal {
  transition: transform var(--citypop-medium) var(--citypop-ease);
}

.rating-stars .btn.minimal:not(:disabled):hover,
.rating-stars .btn.minimal:not(:disabled, .disabled):active {
  background: none;
}

.rating-stars .btn.minimal:not(:disabled):hover {
  transform: translateY(-3px);
}

.rating-stars .btn.minimal:not(:disabled):active {
  transform: translateY(1px) scale(0.9);
}

.star-rating-number {
  color: var(--citypop-coral);
  font-family: var(--citypop-font-label);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/*
 * Favourite: a heart in outline; favourited, a glossy sunset heart with a
 * white glint. Stash colours favourites and their shadow three classes deep,
 * so these rules start at #root.
 */
.favorite-button svg {
  background-color: currentcolor;
  mask: url('assets/icons/glyph-heart-line.svg') center / contain no-repeat;
}

.favorite-button svg path,
.favorite-button svg use {
  visibility: hidden;
}

#root button.btn.favorite-button.not-favorite {
  color: var(--citypop-unlit);
}

#root button.btn.favorite-button.not-favorite:hover {
  color: var(--citypop-coral);
}

.favorite-button.favorite svg {
  background:
    var(--citypop-glint) 24% 22% / 44% 44% no-repeat,
    linear-gradient(160deg, #ffd59a 0%, #ff8a6e 38%, #f5508a 72%, #c23a8e 100%);
  mask-image: url('assets/icons/glyph-heart.svg');
}

#root button.btn.favorite-button.favorite,
#root button.btn.favorite-button.favorite:hover {
  filter: drop-shadow(1.5px 2px 0 rgb(4 3 22 / 80%));
}

/* The heart beside a name, on detail pages */
.name-icons .favorite-button svg {
  height: 1.5rem;
  width: 1.5rem;
}

/* On a card the heart sits on the picture, so it takes a dark edge */
#root .grid-card button.btn.favorite-button svg {
  height: 28px;
  width: 28px;
}

#root .grid-card button.btn.favorite-button {
  filter: drop-shadow(1px 1px 0 rgb(4 3 22 / 90%))
    drop-shadow(0 0 4px rgb(4 3 22 / 60%));
}

#root .grid-card button.btn.favorite-button.not-favorite {
  color: rgb(255 250 244 / 85%);
}

#root .grid-card button.btn.favorite-button.favorite {
  filter: drop-shadow(1.5px 2px 0 rgb(4 3 22 / 90%))
    drop-shadow(0 0 4px rgb(4 3 22 / 50%));
}

/*
 * The O counter is a drop falling into a pool ripple. Stash draws it with its
 * own SweatDrops svg (no Font Awesome class), and the play count beside it
 * uses Font Awesome, so the mask skips those.
 */
.count-button .count-icon svg:not(.svg-inline--fa) {
  background-color: currentcolor;
  mask: url('assets/icons/glyph-splash.svg') center / 100% no-repeat;
}

.count-button .count-icon svg:not(.svg-inline--fa) :is(path, rect, use) {
  visibility: hidden;
}

.count-button .btn.minimal {
  color: var(--citypop-pool-hi);
}

.count-button .btn.minimal:not(:disabled):hover,
.count-button button.count-icon:hover {
  color: #b5fbf5;
}

.count-button .count-value.btn.minimal {
  color: var(--citypop-text);
}

.count-value {
  font-family: var(--citypop-font-label);
  font-weight: 600;
}

/* 60-forms.css */
/* Forms: night-blue wells, and a pool-turquoise ring on focus */
.form-control,
.custom-select,
.input-control,
div.react-select__control {
  background: var(--citypop-well);
  border: 1px solid var(--citypop-line);
  border-radius: 5px;
  box-shadow:
    inset 0 2px 0 rgb(0 0 0 / 30%),
    0 1px 0 rgb(255 255 255 / 6%);
  color: var(--citypop-text);
}

.custom-select {
  background:
    url('assets/icons/chevron.svg') right 0.8rem center / 12px 12px no-repeat,
    var(--citypop-well);
  padding-right: 2.2rem;
}

.custom-select option {
  background: var(--citypop-panel);
  color: var(--citypop-text);
}

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

.form-control:focus,
.custom-select:focus,
.input-control:focus,
div.react-select__control--is-focused {
  background-color: var(--citypop-well);
  border-color: var(--citypop-pool);
  box-shadow:
    inset 0 2px 0 rgb(0 0 0 / 30%),
    0 0 0 3px rgb(79 227 218 / 25%);
  color: var(--citypop-text);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: rgb(14 15 51 / 60%);
  color: var(--citypop-muted);
}

/* Bootstrap paints these fields (the scrape dialogs) with !important */
.form-control.bg-secondary {
  background: var(--citypop-raised) !important;
}

.form-control.border-secondary {
  border-color: var(--citypop-key) !important;
}

.input-group-text {
  background: var(--citypop-raised);
  border: 1px solid var(--citypop-line);
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  letter-spacing: 0.06em;
}

/* The clear button inside Stash's search fields: a secondary button by
   class, but part of the well, so it drops the enamel and its shadow */
.btn-secondary.clearable-text-field-clear:not(.minimal),
.btn-secondary.clearable-text-field-clear:not(.minimal):is(
    :hover,
    :focus,
    :active
  ) {
  --citypop-btn-shadow: none;

  background: transparent !important;
  color: var(--citypop-dim);
  filter: none;
  transform: none;
}

.clearable-text-field-clear:hover {
  color: var(--citypop-coral);
}

/* Validation, as in the stash-box endpoint form */
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--citypop-success);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: var(--citypop-success);
  box-shadow:
    inset 0 2px 0 rgb(0 0 0 / 30%),
    0 0 0 3px rgb(111 240 230 / 25%);
}

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

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: var(--citypop-danger);
  box-shadow:
    inset 0 2px 0 rgb(0 0 0 / 30%),
    0 0 0 3px rgb(255 125 146 / 28%);
}

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

/* Checkboxes: night wells that fill with pool water */
.custom-control-label::before {
  background: var(--citypop-well);
  border: 1px solid var(--citypop-key);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 50%);
}

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

.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--citypop-gloss), var(--citypop-pool-grad);
  border-color: #7ff3ea;
  box-shadow: 2px 2px 0 rgb(4 3 22 / 60%);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b1145' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 50%),
    0 0 0 3px rgb(79 227 218 / 30%);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--citypop-pool);
}

.custom-control-input:disabled ~ .custom-control-label {
  color: var(--citypop-dim);
}

/* Switches: a pool lane with a pearl float */
.custom-switch {
  padding-left: 2.9rem;
}

.custom-switch .custom-control-label::before {
  border-radius: 999px;
  height: 1.25rem;
  left: -2.9rem;
  top: 0.12rem;
  width: 2.4rem;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--citypop-caustic), var(--citypop-pool-grad);
}

.custom-switch .custom-control-label::after,
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background: radial-gradient(
    circle at 34% 30%,
    #fff 0 22%,
    #f1eaff 48%,
    #b9a6f0 100%
  );
  border-radius: 50%;
  box-shadow: 1px 1px 0 rgb(4 3 22 / 70%);
  height: calc(1.25rem - 6px);
  left: calc(-2.9rem + 3px);
  top: calc(0.12rem + 3px);
  transition: transform var(--citypop-medium) var(--citypop-ease);
  width: calc(1.25rem - 6px);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background: radial-gradient(
    circle at 34% 30%,
    #fff 0 22%,
    #fff4ec 48%,
    #ffb36b 100%
  );
  transform: translateX(1.15rem);
}

/* Stash's searchable selects (react-select) */
div.react-select__control .react-select__single-value,
div.react-select__control .react-select__input-container {
  color: var(--citypop-text);
}

.react-select__placeholder {
  color: var(--citypop-dim) !important;
}

.react-select__indicator {
  color: var(--citypop-lilac) !important;
}

.react-select__indicator-separator {
  background-color: var(--citypop-line) !important;
}

/*
 * The Tagger marks a match linked to something already in Stash by
 * colouring its select. Here it takes the turquoise ring of a focused field.
 */
.search-result
  :is(.performer-select-active, .studio-select-active)
  div.react-select__control,
:is(.performer-select-active, .studio-select-active) div.react-select__control {
  border-color: var(--citypop-pool);
  box-shadow:
    inset 0 2px 0 rgb(0 0 0 / 30%),
    0 0 0 3px rgb(79 227 218 / 25%);
}

/* Select menus match the dropdowns: navy panels on a hard shadow */
div.react-select__menu {
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-line);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    var(--citypop-hard);
  color: var(--citypop-text);
  overflow: hidden;
}

div.react-select__menu .react-select__menu-list {
  padding: 0.35rem;
}

div.react-select__menu .react-select__option {
  border-radius: 3px;
  color: var(--citypop-text);
}

div.react-select__menu .react-select__option--is-focused {
  background: linear-gradient(
    90deg,
    rgb(255 122 107 / 26%),
    rgb(245 80 138 / 6%)
  );
  box-shadow: inset 3px 0 0 var(--citypop-sun);
  color: #fff;
}

div.react-select__menu .react-select__option--is-selected {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  box-shadow: none;
  color: var(--citypop-ink);
}

div.react-select__control .react-select__multi-value {
  background: linear-gradient(180deg, #2a2566, #211d56);
  border: 1px solid var(--citypop-key);
  border-radius: 999px;
  color: var(--citypop-text);
}

.react-select__multi-value__label {
  color: var(--citypop-text) !important;
  font-family: var(--citypop-font-label);
  letter-spacing: 0.06em;
}

/*
 * Sliders: Stash draws its own (styles/_range.scss), so repaint the track and
 * the thumb as a pool lane and a pearl. The scene filter sliders keep their
 * colour tracks.
 */
#root
  input[type='range']:not(
    .blue-slider,
    .brightness-slider,
    .contrast-slider,
    .double-range-slider-max,
    .green-slider,
    .hue-rotate-slider,
    .red-slider,
    .saturation-slider,
    .white-balance-slider
  )::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--citypop-pool-deep), #2a2566);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 60%);
}

#root input[type='range']::-webkit-slider-thumb {
  background: radial-gradient(
    circle at 34% 30%,
    #fff 0 22%,
    #fff4ec 48%,
    #ffb36b 100%
  );
  border: 0;
  box-shadow: 1px 1px 0 rgb(4 3 22 / 70%);
  height: 16px;
  margin-top: -5px;
  width: 16px;
}

#root
  input[type='range']:not(
    .blue-slider,
    .brightness-slider,
    .contrast-slider,
    .double-range-slider-max,
    .green-slider,
    .hue-rotate-slider,
    .red-slider,
    .saturation-slider,
    .white-balance-slider
  )::-moz-range-track {
  background: linear-gradient(90deg, var(--citypop-pool-deep), #2a2566);
}

#root input[type='range']::-moz-range-thumb {
  background: radial-gradient(
    circle at 34% 30%,
    #fff 0 22%,
    #fff4ec 48%,
    #ffb36b 100%
  );
  border: 0;
}

/* 70-overlays.css */
/*
 * Menus, popovers, tooltips, toasts and modals: navy panels on the hard
 * shadow. Stash paints its menus slate through div.dropdown-menu rules, so the
 * menu rules name the div too, and some menus and their items carry
 * Bootstrap's !important bg-secondary.
 */
.dropdown-menu,
div.dropdown-menu {
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-line);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    var(--citypop-hard);
  color: var(--citypop-text);
  padding: 0.5rem;
}

.dropdown-menu.bg-secondary {
  background-color: var(--citypop-panel) !important;
}

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

.dropdown-item,
div.dropdown-menu .dropdown-item {
  border-radius: 3px;
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.38rem 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus,
div.dropdown-menu .dropdown-item:hover,
div.dropdown-menu .dropdown-item:focus {
  background: linear-gradient(
    90deg,
    rgb(255 122 107 / 26%),
    rgb(245 80 138 / 6%)
  );
  box-shadow: inset 3px 0 0 var(--citypop-sun);
  color: #fff;
}

.dropdown-item.active,
.dropdown-item:active,
div.dropdown-menu .dropdown-item.active,
div.dropdown-menu .dropdown-item:active {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  box-shadow: none;
  color: var(--citypop-ink);
  font-weight: 500;
}

.dropdown-divider {
  border-top: 1px solid var(--citypop-line);
}

.dropdown-header {
  color: var(--citypop-dim);
  font-family: var(--citypop-font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.popover {
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-line);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    var(--citypop-hard);
}

.popover-header {
  background: var(--citypop-raised);
  border-bottom: 1px solid var(--citypop-line);
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^='top'] > .arrow::after {
  border-top-color: #181546;
}

.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^='bottom'] > .arrow::after {
  border-bottom-color: #1f1c55;
}

.bs-popover-left > .arrow::after,
.bs-popover-auto[x-placement^='left'] > .arrow::after {
  border-left-color: var(--citypop-panel);
}

.bs-popover-right > .arrow::after,
.bs-popover-auto[x-placement^='right'] > .arrow::after {
  border-right-color: var(--citypop-panel);
}

/* Tooltips are cream cassette labels with a sunset edge */
.tooltip {
  font-family: var(--citypop-font-label);
}

.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background:
    linear-gradient(
      180deg,
      #ff7a6b 0 3px,
      #f5508a 3px 4.5px,
      transparent 4.5px
    ),
    var(--citypop-cream);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgb(4 3 22 / 65%);
  color: var(--citypop-ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 0.55rem 0.8rem 0.42rem;
  text-transform: uppercase;
}

/* A title Stash cut short reads in full in its tooltip, in sentence case */
.TruncatedText-tooltip .tooltip-inner {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^='top'] .arrow::before {
  border-top-color: var(--citypop-cream);
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^='bottom'] .arrow::before {
  border-bottom-color: var(--citypop-sun);
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^='left'] .arrow::before {
  border-left-color: var(--citypop-cream);
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^='right'] .arrow::before {
  border-right-color: var(--citypop-cream);
}

/*
 * Toasts: Stash puts the whole message in the toast's header and colours the
 * toast by kind. Here every toast is a navy panel under the stripe band, the
 * message speaks in her light italic beside a striped sun, and a coloured
 * edge on the left says which kind it is.
 */
.toast,
.toast-container .toast {
  backdrop-filter: none;
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-line);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    var(--citypop-hard);
  color: var(--citypop-text);
  overflow: hidden;
  position: relative;
}

.toast::before {
  background: var(--citypop-stripes) 0 0 / 100% var(--citypop-band) no-repeat;
  content: '';
  height: var(--citypop-band);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* Stash hangs toasts 4rem from the top, under its own shorter bar, and on
   a phone 4rem from the bottom, over it */
.toast-container {
  opacity: 1;
}

@media (width >= 576px) {
  .toast-container {
    top: calc(var(--citypop-nav-height) + 1rem);
  }
}

@media (width <= 575.98px) {
  .toast-container {
    bottom: calc(var(--citypop-nav-height) + 1rem);
  }
}

.toast-container .toast.danger {
  box-shadow:
    inset 5px 0 0 var(--citypop-danger),
    var(--citypop-hard);
}

.toast-container .toast.warning {
  box-shadow:
    inset 5px 0 0 var(--citypop-warning),
    var(--citypop-hard);
}

.toast-header,
.toast-container .toast-header {
  align-items: center;
  background: none;
  border-bottom: 0;
  color: var(--citypop-text);
  font-size: 1.2rem;
  gap: 0.6rem;
  line-height: 1.35;
  padding: 1.15rem 1rem 0.9rem;
}

.toast-header::before {
  align-self: flex-start;
  background: var(--citypop-sunset);
  content: '';
  flex: none;
  height: 14px;
  margin-top: 0.35em;
  mask: url('assets/icons/glyph-sun.svg') center / contain no-repeat;
  width: 14px;
}

.toast-container .toast-header .close {
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-style: normal;
  text-shadow: none;
}

.toast-body:empty {
  display: none;
}

/* Modals: navy panels with the stripe band under the title */
.modal-content {
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-line);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    10px 10px 0 var(--citypop-drop);
  color: var(--citypop-text);
}

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

.modal-content > .modal-header {
  align-items: center;
  border-bottom: 0;
  font-family: var(--citypop-font-label);
  font-size: 1.3rem;
  font-weight: 500;
  gap: 0.6rem;
  justify-content: flex-start;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 1rem 1.25rem 1.6rem;
  position: relative;
}

.modal-content > .modal-header::after {
  background: var(--citypop-stripes) 0 0 / 100% var(--citypop-band) no-repeat;
  bottom: 0.45rem;
  content: '';
  height: var(--citypop-band);
  left: 1.25rem;
  pointer-events: none;
  position: absolute;
  right: 1.25rem;
}

.modal-title {
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.modal-header .fa-icon {
  color: var(--citypop-coral);
  height: 0.8em;
}

/*
 * Cherry Pick's bracket dialogs carry buttons in the header: the speaker and
 * the map sizes. The coral is for the icon before a title; an icon on a
 * button takes the button's ink, so the speaker reads on the sunset when
 * sound is on, and its height, so it lines up with the size marks. The
 * speaker keeps one width on and off, so the sizes beside it stay put.
 */
.cherrypick-dialog .modal-header .btn .fa-icon {
  color: inherit;
  height: 1em;
}

.cherrypick-dialog .modal-header .cherrypick-sound.btn {
  padding-inline: 0.5rem;
}

.modal-body {
  color: var(--citypop-muted);
}

.modal-footer {
  border-top: 1px solid var(--citypop-line);
}

.modal-header .close,
.modal .close {
  color: var(--citypop-muted);
  text-shadow: none;
}

/* The edit filter dialog's criteria are a list, not sleeves */
.edit-filter-dialog .criterion-list .card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--citypop-line);
  border-radius: 0;
  box-shadow: none;
}

.edit-filter-dialog .criterion-list .card .filter-item-header {
  background: none;
  border-bottom: 0;
}

.modal-backdrop.show {
  background-color: #04031a;
  opacity: 0.72;
}

.alert {
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-line);
  border-radius: 5px;
  box-shadow:
    inset 4px 0 0 var(--citypop-sun),
    var(--citypop-hard-sm);
  color: var(--citypop-text);
}

.alert-danger {
  box-shadow:
    inset 4px 0 0 var(--citypop-danger),
    var(--citypop-hard-sm);
}

.alert-warning {
  box-shadow:
    inset 4px 0 0 var(--citypop-warning),
    var(--citypop-hard-sm);
}

.alert-success {
  box-shadow:
    inset 4px 0 0 var(--citypop-success),
    var(--citypop-hard-sm);
}

/* 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 navy panels that never lift or sweep; the chosen row takes a
 * sunset edge, and the gloss stays on the buttons that act.
 */

/* Tagger rows, and the stash-box result lists that reuse .search-item */
.search-item {
  background: var(--citypop-panel);
  border: 1px solid var(--citypop-edge);
  border-radius: 5px;
  box-shadow: var(--citypop-hard-sm);
}

/* The performer, studio and tag taggers sit inside a card, so raise them */
.PerformerTagger-performer,
.StudioTagger-studio,
.TagTagger-tag,
.modal .search-item {
  background: var(--citypop-raised);
  border: 1px solid var(--citypop-key);
  border-radius: 5px;
  box-shadow: var(--citypop-hard-sm);
}

.StudioTagger-studio .studio-card img,
.TagTagger-tag .tag-card img {
  background-color: var(--citypop-night);
}

/* Cards inside the Tagger keep still, without the sweep or the glint */
:is(
    .tagger-container,
    .PerformerTagger-performer,
    .StudioTagger-studio,
    .TagTagger-tag
  )
  .grid-card:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    var(--citypop-hard);
  transform: none;
}

:is(
    .tagger-container,
    .PerformerTagger-performer,
    .StudioTagger-studio,
    .TagTagger-tag
  )
  .grid-card:hover
  .thumbnail-section::before,
:is(
    .tagger-container,
    .PerformerTagger-performer,
    .StudioTagger-studio,
    .TagTagger-tag
  )
  .grid-card:hover
  .thumbnail-section::after {
  animation: none;
}

/* Clickable results in the stash-box search modals */
.PerformerScrapeModal-list .search-item:hover,
.StashBoxIDSearchModal-list .search-item:hover {
  box-shadow:
    inset 3px 0 0 var(--citypop-sun),
    var(--citypop-hard-sm);
}

/* Scene Tagger results: the picked one takes a sunset edge */
.search-result {
  background-color: transparent;
  border-radius: 3px;
}

.search-result + .search-result {
  border-top: 1px solid var(--citypop-line);
}

.search-result:hover {
  background-color: rgb(255 255 255 / 3%);
}

.selected-result,
.selected-result:hover {
  background: linear-gradient(90deg, rgb(255 122 107 / 14%), transparent 60%);
  box-shadow: inset 3px 0 0 var(--citypop-sun);
}

.search-result h4 {
  font-family: var(--citypop-font-label);
  font-size: 1.1rem;
  font-weight: 500;
}

.search-result h5 {
  color: var(--citypop-dim);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

/* Pictures in the Tagger keep the sleeve's printed keyline */
.tagger-container .scene-card-preview,
.search-result .scene-image,
.search-item .scene-image {
  border-radius: 3px;
  outline: 1px solid rgb(255 250 244 / 60%);
  outline-offset: -4px;
}

.entity-name {
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  letter-spacing: 0.04em;
}

/* 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(--citypop-dim);
}

/* StashID links: a pool-blue tab with the box name, the ID on night violet */
.stash-id-pill {
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgb(4 3 22 / 60%);
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.stash-id-pill span {
  background: var(--citypop-gloss), var(--citypop-pool-grad);
  border-radius: 0;
  color: var(--citypop-ink);
  font-family: var(--citypop-font-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stash-id-pill a {
  background: var(--citypop-raised);
  border-radius: 0;
  color: var(--citypop-text);
  font-family: ui-monospace, monospace;
  font-weight: 400;
}

.stash-id-pill a:hover {
  color: var(--citypop-coral);
}

/*
 * Scrape dialogs set Stash's current value against the scraped one, and the
 * toggle in front of each says which wins. The winning side's toggle is the
 * pool, and its field takes the turquoise ring.
 */
.scrape-dialog .column-label,
.scrape-dialog .col-form-label {
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.scrape-dialog .input-group-prepend .btn:has(.text-success) {
  background: var(--citypop-gloss), var(--citypop-pool-grad);
}

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

.scrape-dialog
  .input-group:has(> .input-group-prepend .text-success)
  :is(.form-control, div.react-select__control) {
  border-color: var(--citypop-pool) !important;
  box-shadow:
    inset 0 2px 0 rgb(0 0 0 / 30%),
    0 0 0 3px rgb(79 227 218 / 22%);
}

/* Icons on night buttons keep their meaning */
.btn-secondary .text-muted {
  color: var(--citypop-muted) !important;
}

/* The filter bar at the top of the "Scrape with…" menu */
.scraper-menu .dropdown-menu .scraper-filter-container {
  background: transparent;
  border-bottom: 1px solid var(--citypop-line);
}

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

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

/* 80-pages.css */
/*
 * The page under the taller navbar. Stash spaces the page, the filter sidebar
 * and its sticky bars by its own 48.75px bar (98.75px on detail pages, which
 * add a 50px tab bar), so each of those moves with --citypop-nav-height. On a
 * phone held upright the bar is at the bottom.
 */
body {
  padding-top: var(--citypop-nav-height);
}

.sidebar-pane .sidebar {
  margin-top: var(--citypop-nav-height);
}

.sidebar-toggle-button-container .sidebar-toggle-button {
  background: var(--citypop-night-btn);
  border-color: var(--citypop-key);
  box-shadow: var(--citypop-hard-sm);
  color: var(--citypop-text);
  opacity: 1;
  top: calc(var(--citypop-nav-height) + 0.5rem);
}

.sticky.detail-header,
.item-list-container .filtered-list-toolbar.has-selection {
  top: var(--citypop-nav-height);
}

.detail-body .sidebar-pane,
.detail-body .sidebar,
.detail-body .filtered-list-toolbar.has-selection {
  top: calc(var(--citypop-nav-height) + 50px);
}

.detail-body .sidebar {
  max-height: calc(100vh - var(--citypop-nav-height) - 69px);
}

.detail-body .sidebar-pane:not(.hide-sidebar) .sidebar {
  height: calc(100vh - var(--citypop-nav-height) - 69px);
}

.detail-body .sidebar-toggle-button-container .sidebar-toggle-button {
  top: calc(var(--citypop-nav-height) + 62px);
}

/* The task queue at the top of Settings > Tasks sticks under the bar */
@media (width >= 576px) and (height >= 600px) {
  #tasks-panel .tasks-panel-queue {
    background-color: var(--citypop-night);
    top: var(--citypop-nav-height);
  }
}

@media (width >= 575px) and (width <= 1199px) {
  #scene-edit-details .edit-buttons-container {
    top: var(--citypop-nav-height);
  }
}

#queue-viewer .queue-controls {
  background-color: var(--citypop-night);
}

#queue-viewer .current {
  background-color: var(--citypop-raised);
}

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

/* Bootstrap's progress bars, as in a running job: the sunset on an FM dial */
.progress {
  background:
    repeating-linear-gradient(
        90deg,
        rgb(203 195 236 / 35%) 0 1px,
        transparent 1px 8px
      )
      0 0 / 100% 3px no-repeat,
    var(--citypop-well);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 50%);
}

.progress .progress-bar {
  background: var(--citypop-sunset-x);
  color: var(--citypop-ink);
  font-family: var(--citypop-font-label);
  font-weight: 600;
}

@media (width <= 575.98px) {
  .detail-body .sidebar {
    height: calc(100vh - var(--citypop-nav-height));
    max-height: calc(100vh - var(--citypop-nav-height));
  }
}

@media (width <= 575.98px) and (orientation: portrait) {
  body {
    padding-bottom: var(--citypop-nav-height);
    padding-top: 0.5rem;
  }

  .pagination-footer-container {
    bottom: var(--citypop-nav-height);
  }

  .sidebar-pane .sidebar {
    margin-top: 0;
  }

  .troubleshooting-mode-overlay .troubleshooting-mode-alert {
    bottom: var(--citypop-nav-height);
  }
}

/* List toolbars and the filter sidebar */
.filtered-list-toolbar {
  background-color: transparent;
  gap: 0.75rem;
}

/* The search well and its filter keys read as one control */
.filtered-list-toolbar .search-term-input .clearable-text-field {
  border-radius: 5px 0 0 5px;
  border-right: 0;
}

.filtered-list-toolbar .search-term-input + .btn-group {
  margin-left: -0.75rem;
}

.filtered-list-toolbar .search-term-input + .btn-group > :first-child,
.filtered-list-toolbar .search-term-input + .btn-group > :first-child > .btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.filtered-list-toolbar .btn:not(.minimal, .btn-link) {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  justify-content: center;
  min-height: 38px;
}

.item-list-container .filtered-list-toolbar.has-selection {
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-line);
  border-radius: 5px;
  box-shadow: var(--citypop-hard-sm);
}

.filtered-list-toolbar .selected-items-info {
  border-color: var(--citypop-line);
  font-family: var(--citypop-font-label);
  letter-spacing: 0.08em;
}

.sidebar-pane .sidebar,
.sidebar {
  background: var(--citypop-panel-grad);
  border-right: 1px solid var(--citypop-line);
  box-shadow: 6px 0 0 rgb(4 3 22 / 45%);
}

/* The sidebar's sticky footer on phones */
.sidebar-pane .sidebar .sidebar-footer {
  background-color: var(--citypop-panel);
  border-top: 1px solid var(--citypop-line);
}

.sidebar .collapse-button.btn.minimal,
.sidebar-section .collapse-button {
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sidebar-section + .sidebar-section {
  border-top: 1px solid var(--citypop-line);
}

:is(.selectable-filter ul, ul.selectable-list)
  :is(.selected-object, .excluded-object, .unselected-object)
  a:is(:hover, :focus-visible),
.sidebar-saved-filter-list-container
  .saved-filter-item
  a:is(:hover, :focus-visible) {
  background-color: rgb(255 122 107 / 12%);
}

.selectable-filter .include-button,
ul.selectable-list .include-button {
  color: var(--citypop-pool-hi) !important;
}

.selectable-filter .exclude-button,
ul.selectable-list .exclude-button,
.sidebar-saved-filter-list-container .saved-filter-item .delete-button {
  color: var(--citypop-danger) !important;
}

/* The count is printed like the dial's scale: small tracked numerals */
.paginationIndex {
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pagination-footer-container .pagination {
  filter: drop-shadow(0 6px 10px rgb(4 3 22 / 60%));
}

/*
 * The pager: Stash builds it as one group of secondary buttons, numbered keys
 * or, past a few pages, a page count split button in the middle. It reads as
 * one strip with the current page in sunset.
 */
.btn-group.pagination .btn {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  min-width: 2.7rem;
  padding-inline: 0.8rem;
}

.pagination .page-count-container .btn.page-count {
  padding-left: 12px;
  padding-right: 12px;
}

.pagination .page-count-container .btn.page-count-dropdown {
  padding-left: 10px;
  padding-right: 10px;
}

/* Bootstrap's own page links, where Stash uses them */
.page-link {
  background: var(--citypop-panel);
  border: 1px solid var(--citypop-line);
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  font-weight: 500;
  min-width: 2.4rem;
  text-align: center;
}

.page-item:first-child .page-link {
  border-radius: 999px 0 0 999px;
}

.page-item:last-child .page-link {
  border-radius: 0 999px 999px 0;
}

.page-link:hover {
  background: var(--citypop-raised);
  border-color: var(--citypop-line);
  color: var(--citypop-coral);
}

.page-link:focus {
  box-shadow: 0 0 0 3px rgb(79 227 218 / 30%);
}

.page-item.active .page-link {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  border-color: #ff9a6e;
  color: var(--citypop-ink);
  font-weight: 600;
}

/* Tabs: the open tab is underlined with a single sunset bar (the stripe band
   is kept for frames) */
.nav-tabs {
  border-bottom: 1px solid var(--citypop-line);
  gap: 0.2rem;
}

.nav-tabs .nav-link {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  padding: 0.55rem 0.9rem 0.8rem;
  text-transform: uppercase;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #fff;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background: var(--citypop-sunset-x) 0 100% / 100% 3px no-repeat;
  color: #fff;
}

/* A tab's count is a small night-blue well; the open tab's turns sunset */
.nav-tabs .nav-link .badge {
  background: var(--citypop-well);
  border: 1px solid var(--citypop-line);
  border-radius: 999px;
  box-shadow: none;
  color: var(--citypop-muted);
  display: inline-block;
  font-family: var(--citypop-font-label);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  min-width: 1.9em;
  padding: 0.32em 0.6em;
  text-align: center;
  text-transform: none;
  vertical-align: 0.1em;
}

.nav-tabs .nav-link.active .badge {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  border-color: transparent;
  color: var(--citypop-ink);
}

/* Settings and other pill navs: the chosen pill is a sunset sticker */
.nav-pills .nav-link {
  border-radius: 999px;
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-pills .nav-link:hover {
  background: rgb(255 255 255 / 6%);
  color: #fff;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  box-shadow: var(--citypop-hard-sm);
  color: var(--citypop-ink);
  font-weight: 600;
}

/* Settings: script section titles (02-base.css), the rest on the system font */
.setting-section .setting h3,
.setting-section .sub-heading {
  font-family: var(--citypop-font-body);
}

.setting-section .setting h3 {
  font-size: 1rem;
  font-weight: 600;
}

/* Detail pages: a night-blue band under the navbar */
.detail-header {
  background: linear-gradient(180deg, #15134a 0%, #1c1953 100%);
  border-bottom: 1px solid rgb(4 3 22 / 70%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 1px 0 rgb(185 166 240 / 12%);
}

/* Stash's blurred picture, washed with night so the text reads over it */
.detail-header .background-image-container::after {
  background: linear-gradient(
    90deg,
    rgb(21 19 74 / 30%) 0%,
    rgb(21 19 74 / 72%) 40%,
    rgb(21 19 74 / 82%) 100%
  );
  content: '';
  inset: 0;
  position: absolute;
}

.detail-header :is(.studio-name, .tag-name, .group-name),
.detail-header .performer-name {
  color: var(--citypop-text);
  font-family: var(--citypop-font-display);
  font-weight: 400;
  word-spacing: 0.2em;
}

.detail-header :is(.studio-name, .tag-name, .group-name) {
  text-shadow:
    2px 2px 0 var(--citypop-magenta),
    4px 5px 0 rgb(4 3 22 / 55%);
}

.detail-item-title {
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.detail-header .alias-head {
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-size: 1rem;
  font-style: italic;
  font-weight: 300;
}

/*
 * The performer's page is an open J-card, the paper insert of a cassette
 * case: her picture is the cover, cut to the J-card's own 2:3 and weighted to
 * the top so any picture fits (Stash still opens the whole picture on a
 * click). Her name runs down the spine on a cream strip with the sunset
 * stripes, and her details are the flap's track listing, with dotted leaders.
 * On a phone the spine lies flat under the cover.
 */
#performer-page .detail-header {
  --citypop-cover: 228px;
}

/* The sticky header Stash shows once the page scrolls keeps its own padding */
#performer-page .detail-header:not(.sticky) {
  padding: 2rem 1.5rem 2.25rem;
}

#performer-page .detail-header.collapsed {
  --citypop-cover: 160px;
}

#performer-page .detail-header .detail-container {
  align-items: flex-start;
  display: flex;
}

/* The cover: a cream border round a 2:3 cut of her picture */
#performer-page .detail-header-image {
  border: 6px solid var(--citypop-paper);
  box-shadow: 8px 8px 0 var(--citypop-drop);
  flex: none;
  float: none;
  height: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}

#performer-page .detail-header-image .btn {
  border: 0;
  display: block;
  padding: 0;
}

#performer-page .detail-header-image img {
  aspect-ratio: 2 / 3;
  border-radius: 0;
  display: block;
  height: auto;
  margin: 0;
  max-width: none;
  object-fit: cover;
  object-position: 50% 18%;
  width: var(--citypop-cover);
}

/* The printed keyline inside the cover */
#performer-page .detail-header-image::after {
  content: '';
  inset: 6px;
  outline: 1px solid rgb(255 250 244 / 70%);
  pointer-events: none;
  position: absolute;
}

#performer-page .detail-header .detail-container > .row {
  flex: 1;
  margin: 0;
  min-width: 0;
}

#performer-page .detail-header .performer-head {
  column-gap: 2rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: repeat(10, auto) 1fr;
  padding: 0;
}

#performer-page .detail-header .performer-head > * {
  grid-column: 2;
  min-width: 0;
}

/* The spine: as tall as the cover, butted against it */
#performer-page .detail-header .performer-head > h2 {
  align-items: center;
  align-self: start;
  background:
    linear-gradient(
        180deg,
        #ffb36b 0 4px,
        transparent 4px 6px,
        #ff7a6b 6px 9px,
        transparent 9px 11px,
        #f5508a 11px 13px,
        transparent 13px
      )
      0 10px / 100% 13px no-repeat,
    linear-gradient(
      90deg,
      rgb(0 0 0 / 9%),
      transparent 28%,
      transparent 74%,
      rgb(0 0 0 / 12%)
    ),
    var(--citypop-cream);
  box-shadow: 8px 8px 0 var(--citypop-drop);
  color: var(--citypop-ink);
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  grid-column: 1;
  grid-row: 1 / -1;
  height: calc(var(--citypop-cover) * 1.5 + 12px);
  margin: 0;
  overflow: hidden;
  padding: 2.3rem 0 0.7rem;
  position: relative;
  width: 3.4rem;
  writing-mode: vertical-rl;
  z-index: 2;
}

/* Her name keeps the spine; the disambiguation gives way first */
#performer-page .detail-header .performer-head > h2 .performer-name {
  color: var(--citypop-ink);
  flex: 0 1 auto;
  font-size: 2rem;
  line-height: 1;
  min-height: 0;
  overflow: hidden;
  padding-block: 0.2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#performer-page .detail-header .performer-head > h2 .performer-disambiguation {
  color: var(--citypop-violet);
  flex: 1 1 0;
  min-height: 0;
  font-family: var(--citypop-font-label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#performer-page
  .detail-header
  .performer-head
  > h2
  :is(.detail-expand-collapse, .name-icons) {
  margin: 0;
}

#performer-page .detail-header .performer-head > h2 .detail-expand-collapse {
  margin-top: auto;
}

#performer-page .detail-header .performer-head > h2 .name-icons {
  align-items: center;
  display: flex;
}

#performer-page .detail-header .performer-head > h2 .btn.minimal {
  color: var(--citypop-violet);
  padding: 0.2rem;
}

#performer-page
  .detail-header
  .performer-head
  > h2
  .btn.minimal:not(:disabled):hover {
  background: rgb(27 17 69 / 8%);
  color: var(--citypop-magenta);
}

#root
  #performer-page
  .performer-head
  > h2
  button.btn.favorite-button.not-favorite {
  color: #8a7fc4;
}

/* The flap: aliases and rating, then the details as a track listing. Where
   Performers Toolkit has tidied the header ([data-pt-tidy]) it sets the
   details out as a grid of cells, each name over its value, and the track
   listing stands aside (83-performers-toolkit.css) */
#performer-page .detail-header .alias-head {
  display: block;
  margin: 0.15rem 0 0.2rem;
}

#performer-page .detail-header .quality-group {
  align-items: center;
  margin-top: 0.4rem;
}

#performer-page
  .detail-header
  :where(.performer-head:not([data-pt-tidy]))
  .detail-group {
  max-width: 40rem;
  padding-top: 0.6rem;
}

#performer-page
  .detail-header
  :where(.performer-head:not([data-pt-tidy]))
  .detail-item {
  align-items: baseline;
  column-gap: 1rem;
  display: flex;
  flex-flow: row nowrap;
  padding: 0.3rem 0;
}

#performer-page
  .detail-header
  :where(.performer-head:not([data-pt-tidy]))
  .detail-item-title {
  align-items: baseline;
  display: flex;
  flex: none;
  font-size: 0.72rem;
  gap: 0.6rem;
  letter-spacing: 0.16em;
  width: 12rem;
}

/* Dotted leaders, as a track listing runs to its times */
#performer-page
  .detail-header
  :where(.performer-head:not([data-pt-tidy]))
  .detail-item-title::after {
  border-bottom: 1px dotted rgb(185 166 240 / 42%);
  content: '';
  flex: 1;
  min-width: 1rem;
}

#performer-page .detail-header .detail-item-value {
  color: var(--citypop-text);
  font-size: 0.95rem;
  min-width: 0;
}

#performer-page .detail-header .detail-item-value.age {
  border-bottom: 0;
}

#performer-page .detail-header .details-edit {
  margin-top: 1.4rem;
}

/* Stash spaces some of these buttons and wraps others in bare divs, so they
   touch; on hard shadows each needs its own room */
.details-edit {
  column-gap: 0.6rem;
}

.details-edit > .btn,
.details-edit > .btn-group {
  margin-right: 0;
}

.details-edit > div:empty {
  display: none;
}

#performer-page .detail-header .performer-head > .col {
  padding: 0;
}

@media (width <= 720px) {
  #performer-page .detail-header {
    --citypop-cover: min(228px, 66vw);
  }

  #performer-page .detail-header:not(.sticky) {
    padding: 1.25rem 1rem 1.5rem;
  }

  #performer-page .detail-header .detail-container {
    align-items: flex-start;
    flex-direction: column;
  }

  #performer-page .detail-header .performer-head {
    display: block;
  }

  #performer-page .detail-header .performer-head > h2 {
    background:
      linear-gradient(
          90deg,
          #ffb36b 0 4px,
          transparent 4px 6px,
          #ff7a6b 6px 9px,
          transparent 9px 11px,
          #f5508a 11px 13px,
          transparent 13px
        )
        10px 0 / 13px 100% no-repeat,
      linear-gradient(
        180deg,
        rgb(0 0 0 / 6%),
        transparent 40%,
        rgb(0 0 0 / 10%)
      ),
      var(--citypop-cream);
    flex-wrap: wrap;
    height: auto;
    margin: 0 0 1.1rem;
    padding: 0.55rem 0.6rem 0.55rem 2.3rem;
    row-gap: 0;
    width: calc(var(--citypop-cover) + 12px);
    writing-mode: horizontal-tb;
  }

  #performer-page .detail-header .performer-head > h2 .performer-name {
    font-size: 1.8rem;
  }

  #performer-page .detail-header .performer-head > h2 .detail-expand-collapse {
    margin: 0 0 0 auto;
  }

  #performer-page
    .detail-header
    :where(.performer-head:not([data-pt-tidy]))
    .detail-item {
    flex-wrap: wrap;
  }

  #performer-page
    .detail-header
    :where(.performer-head:not([data-pt-tidy]))
    .detail-item-title {
    width: 100%;
  }

  #performer-page
    .detail-header
    :where(.performer-head:not([data-pt-tidy]))
    .detail-item-title::after {
    display: none;
  }

  .nav-tabs .nav-link {
    padding-inline: 0.6rem;
  }
}

/* video.js player: the sunset scrub bar over a fading night strip */
.video-js .vjs-control-bar {
  background-color: transparent;
  background-image: linear-gradient(
    0deg,
    rgb(12 14 48 / 92%),
    rgb(12 14 48 / 0%)
  );
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
  background: var(--citypop-sunset-x);
}

.video-js .vjs-play-progress::before {
  color: #fff;
}

.video-js .vjs-load-progress,
.video-js .vjs-load-progress div {
  background: rgb(203 195 236 / 25%);
}

/*
 * Tables: a raised header and 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(--citypop-raised);
}

:is(#root, .modal) .table td,
:is(#root, .modal) .table th {
  background-color: transparent;
  color: var(--citypop-text);
}

:is(#root, .modal) .table thead th {
  border-bottom: 1px solid var(--citypop-line);
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:is(#root, .modal) .table td {
  border-top: 1px solid rgb(185 166 240 / 14%);
}

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

/* 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 City Pop. 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.
 */
.citypop-restyle-insights #root #insights,
.citypop-restyle-toolkit
  #root
  :is(
    .pt,
    .ptc,
    .pt-strip,
    .pt-entry,
    .pt-fb,
    .pt-side,
    .pt-pane,
    .performer-head[data-pt-tidy]
  ),
.citypop-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(--citypop-edge);
  --sx-deep: var(--citypop-well);
  --sx-slab: var(--citypop-line);
  --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(--citypop-cream);
  --sx-on: var(--citypop-ink);
  --sx-acc: var(--citypop-sun);
  --sx-acc-tx: var(--citypop-ink);

  /* Each hue reads on the panels as it is; its light and dark steps are
     mixed toward white and toward the night */
  --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. */
.citypop-restyle-insights #root #insights {
  --sx-ui: var(--citypop-well);
  --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 City Pop's dusk.
 *
 * 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: citypop.js puts .citypop-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 dusk.
 */

/* 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-CityPop-restyleInsights']) {
  display: none;
}

/* The "What works for you" sidebar sticks under the navbar, which City Pop
   makes taller than Stash's 48.75px, whether the setting is on or not */
#root #insights .ins-side {
  top: calc(var(--citypop-nav-height) + 11.25px);
}

/* Insights' palette in City Pop's: navy panels in night-blue wells, the
   sunset for the You tab, apricot for Library, gold for Health, pool water
   for Collection and for O's, sky for Files, pink for Actions and lilac for
   Movies */
.citypop-restyle-insights #root #insights {
  --bg: var(--citypop-night);
  --bg2: var(--citypop-well);
  --ui: var(--citypop-panel);
  --ui2: var(--citypop-raised);
  --ui3: var(--citypop-line);
  --tx3: var(--citypop-key);
  --tx2b: var(--citypop-unlit);
  --tx2: var(--citypop-dim);
  --tx1b: var(--citypop-muted);
  --tx: var(--citypop-text);
  --hi: #fff;
  --re: var(--citypop-pink);
  --or: var(--citypop-apricot);
  --ye: var(--citypop-gold);
  --gr: var(--citypop-pool);
  --cy: var(--citypop-sky);
  --bl: var(--citypop-pool-deep);
  --pu: var(--citypop-lilac);
  --ma: var(--citypop-sun);
  --up: var(--citypop-success);
  --down: var(--citypop-danger);
  --o: var(--citypop-pool);
  --otx: var(--citypop-pool-hi);

  /* No slab of its own: the cards sit on the dusk like Stash's own pages,
     where the sun stays down */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The head: the name in the brush script, and the tabs as Stash's tabs,
   with one sunset bar under the open one */
.citypop-restyle-insights #root #insights .ins-head {
  border-bottom: 1px solid var(--citypop-line);
  margin-bottom: 20px;
}

.citypop-restyle-insights #root #insights .ins-title {
  color: var(--citypop-text);
  font-family: var(--citypop-font-display);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-shadow:
    2px 2px 0 var(--citypop-magenta),
    4px 5px 0 rgb(4 3 22 / 55%);
}

.citypop-restyle-insights #root #insights .ins-title .ins-ic {
  color: var(--citypop-sun);
  filter: drop-shadow(2px 2px 0 rgb(4 3 22 / 55%));
}

.citypop-restyle-insights #root #insights .ins-tabs {
  align-self: flex-end;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 0.2rem;
  padding: 0;
}

.citypop-restyle-insights #root #insights .ins-tab {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 0.55rem 0.75rem 0.8rem;
  text-transform: uppercase;
}

.citypop-restyle-insights #root #insights .ins-tab:hover {
  background: none;
  color: #fff;
}

.citypop-restyle-insights #root #insights .ins-tab.on {
  background: var(--citypop-sunset-x) 0 100% / 100% 3px no-repeat;
  color: #fff;
}

/* Cards are navy panels on the hard airbrush shadow */
.citypop-restyle-insights #root #insights .ins-card {
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-edge);
  border-radius: var(--citypop-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    var(--citypop-hard);
}

.citypop-restyle-insights #root #insights .ins-ch b {
  font-family: var(--citypop-font-label);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.citypop-restyle-insights #root #insights :is(.ins-badge, .ins-sq) {
  border-radius: var(--citypop-radius);
}

/* A tile's colour edge is a printed stripe, without a glow */
.citypop-restyle-insights #root #insights .ins-tile::before {
  box-shadow: none;
}

/* Numbers and small caps in Jost, the liner notes' Futura */
.citypop-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(--citypop-font-label);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0;
}

.citypop-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(--citypop-font-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Data wells, chips and switches are sunk into the panel like Stash's
   fields */
.citypop-restyle-insights
  #root
  #insights
  :is(
    .ins-well,
    .ins-hubqueue,
    .ins-chip,
    .ins-nav,
    .ins-pill,
    .ins-seg,
    .ins-hchip
  ) {
  background: var(--citypop-well);
  border: 1px solid var(--citypop-line);
  border-radius: 5px;
  box-shadow:
    inset 0 2px 0 rgb(0 0 0 / 30%),
    0 1px 0 rgb(255 255 255 / 6%);
}

/* The chosen chip of a row is the sunset, as in Stash's button groups */
.citypop-restyle-insights
  #root
  #insights
  :is(.ins-chip.on, .ins-seg button.on) {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  border-color: transparent;
  box-shadow: 2px 2px 0 rgb(4 3 22 / 70%);
  color: var(--citypop-ink);
  font-weight: 600;
}

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

/* Buttons are glossy enamel on a hard shadow: night violet, the sunset for
   the one that goes ahead, hot coral for the one that deletes */
.citypop-restyle-insights #root #insights .ins-btn {
  background: var(--citypop-gloss-soft), var(--citypop-night-btn);
  border: 0;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px var(--citypop-key),
    inset 0 1px 0 rgb(255 255 255 / 18%),
    3px 3px 0 rgb(4 3 22 / 70%);
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    transform var(--citypop-fast) var(--citypop-ease),
    filter var(--citypop-fast) var(--citypop-ease);
}

.citypop-restyle-insights #root #insights .ins-btn:not(:disabled):hover {
  color: #fff;
  filter: brightness(1.15);
}

.citypop-restyle-insights #root #insights .ins-btn:not(:disabled):active {
  box-shadow:
    inset 0 2px 3px rgb(0 0 0 / 25%),
    1px 1px 0 rgb(4 3 22 / 70%);
  transform: translate(2px, 2px);
}

.citypop-restyle-insights #root #insights .ins-btn.ins-pri {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  color: var(--citypop-ink);
  font-weight: 600;
  position: relative;
}

/* The glint on the sunset button's corner */
.citypop-restyle-insights #root #insights .ins-btn.ins-pri::after {
  background: var(--citypop-glint) center / contain no-repeat;
  content: '';
  height: 16px;
  pointer-events: none;
  position: absolute;
  right: 5px;
  top: -6px;
  transform: scale(0.75);
  width: 16px;
}

.citypop-restyle-insights #root #insights .ins-btn.danger,
.citypop-restyle-insights #root #insights .ins-btn.danger:hover {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 22%) 0 44%, transparent 44%),
    linear-gradient(180deg, #f0365a, #d62452 55%, #b81846);
  color: #fff;
  font-weight: 600;
}

.citypop-restyle-insights #root #insights .ins-btn.danger.armed {
  box-shadow:
    0 0 0 2px var(--citypop-night),
    0 0 0 4px var(--citypop-danger),
    3px 3px 0 rgb(4 3 22 / 70%);
}

.citypop-restyle-insights #root #insights .ins-btn:disabled {
  box-shadow: none;
  filter: saturate(0.3) brightness(0.8);
  opacity: 0.45;
}

/* Links read in coral, as everywhere in City Pop */
.citypop-restyle-insights #root #insights :is(.ins-go, .ins-hlink) {
  color: var(--citypop-coral);
}

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

/* Rules between rows */
.citypop-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(--citypop-edge);
}

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

.citypop-restyle-insights #root #insights .ins-hkc {
  border-color: var(--citypop-edge);
}

/* Up and down, keep and delete: their status colours on the panel */
.citypop-restyle-insights #root #insights :is(.ins-lift.up, .ins-k.keep) {
  background: color-mix(
    in srgb,
    var(--citypop-success) 16%,
    var(--citypop-panel)
  );
}

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

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

.citypop-restyle-insights #root #insights .ins-error {
  background: color-mix(
    in srgb,
    var(--citypop-danger) 12%,
    var(--citypop-panel)
  );
  border-color: var(--citypop-danger);
  border-radius: var(--citypop-radius);
  color: var(--citypop-text);
}

/* Ticked copies fill with pool water; switches are a pool lane with a
   pearl float */
.citypop-restyle-insights #root #insights .ins-bx.on {
  background: var(--citypop-gloss), var(--citypop-pool-grad);
  border-color: #7ff3ea;
}

.citypop-restyle-insights #root #insights .ins-bx.on::after {
  border-color: var(--citypop-ink);
}

.citypop-restyle-insights #root #insights .ins-tog i {
  background: var(--citypop-well);
  box-shadow:
    inset 0 0 0 1px var(--citypop-line),
    inset 0 2px 0 rgb(0 0 0 / 30%);
}

.citypop-restyle-insights #root #insights .ins-tog.on i {
  background: var(--citypop-caustic), var(--citypop-pool-grad);
}

.citypop-restyle-insights #root #insights .ins-tog i::after {
  background: radial-gradient(
    circle at 34% 30%,
    #fff 0 22%,
    #f1eaff 48%,
    #b9a6f0 100%
  );
}

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

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

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

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

/* The tag picked in Top tags */
.citypop-restyle-insights #root #insights .ins-trk i[style*='#A9BA5A' i] {
  background: var(--citypop-success) !important;
}

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

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

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

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

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

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

/* Its tooltip is a cream cassette label, like Stash's in City Pop. It sits
   on <body>, outside #insights. */
.citypop-restyle-insights #ins-tip {
  background:
    linear-gradient(
      180deg,
      #ff7a6b 0 3px,
      #f5508a 3px 4.5px,
      transparent 4.5px
    ),
    var(--citypop-cream);
  border: 0;
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgb(4 3 22 / 65%);
  color: var(--citypop-ink);
  font-family: var(--citypop-font-label);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.6rem 0.8rem 0.45rem;
}

/* 83-performers-toolkit.css */
/*
 * Performers Toolkit, another author's plugin from the same suite as
 * Insights (gitlab.com/allisless0/stash-plugins), in City Pop's dusk: 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
 * City Pop 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
 * (.citypop-restyle-toolkit on <html>, from citypop.js), but for the one
 * that hides that setting while the plugin is off and those that keep a
 * performer's header a J-card. It sizes its toast and
 * its review bar on a phone from Stash's navbar, so City Pop's taller bar
 * needs nothing here.
 */

/* 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-CityPop-restylePerformersToolkit']) {
  display: none;
}

/* From 0.10 it tidies a performer's header into rows that wrap, and from
   0.13 puts a side panel between the cover and the header, which would part
   the spine from the cover. From 0.17 the panel is the third column of a
   grid it makes of the header's container, whose gap would part them too.
   The J-card keeps its grid (the toolkit's order still places its rows),
   the cover meets the spine and the panel sits past the flap, whether the
   restyle is on or not. The details in the tidied header are its grid of
   cells, which City Pop's track listing leaves alone (80-pages.css); the
   bio keeps the flap's measure. */
#root #performer-page .detail-header .performer-head[data-pt-tidy] {
  align-items: normal;
  column-gap: 2rem;
  display: grid;
}

#root #performer-page .detail-header .detail-container {
  column-gap: 0;
}

#root #performer-page .detail-header .detail-container > .pt-side {
  margin-left: 2rem;
  order: 1;
}

#root
  #performer-page
  .detail-header
  .performer-head[data-pt-tidy]
  .detail-item-value.details {
  max-width: 40rem;
}

/* From 0.22 the head's grid seats the name beside the rating, runs the rest
   across both columns and pins Stash's buttons to the foot of a header
   stretched as tall as its tallest column, the picture with it. On the
   J-card the spine keeps the first column and the rest stays on the flap,
   and the cover keeps its 2:3, so the buttons sit at the foot of the cover
   and the spine. Under 1200px the panel lies across the header under the
   J-card, clear of its shadow and in line with the cover. */
#root #performer-page .detail-header .performer-head[data-pt-tidy] > :not(h2) {
  grid-column: 2;
}

@media (width >= 768px) {
  #root
    #performer-page
    .detail-header
    .detail-container
    > :is(.detail-header-image, .row) {
    align-self: start;
  }

  #root #performer-page .detail-header .performer-head[data-pt-tidy] {
    height: auto;
  }
}

@media (width < 1200px) {
  #root #performer-page .detail-header .detail-container > .pt-side {
    margin: 1.5rem 0 0;
  }
}

@media (width <= 720px) {
  #root #performer-page .detail-header .performer-head[data-pt-tidy] {
    display: block;
  }
}

/* Its palette in City Pop's, as for Insights. Each tab's accent follows:
   pool blue for Find and Performers, lilac for History, pool turquoise for
   Sources, apricot 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. */
.citypop-restyle-toolkit
  #root
  :is(
    .pt,
    .ptc,
    .pt-strip,
    .pt-entry,
    .pt-fb,
    .pt-side,
    .pt-pane,
    .performer-head[data-pt-tidy]
  ),
.citypop-restyle-toolkit :is(#pt-toast, .pt-ov) {
  --bg: var(--citypop-night);
  --bg2: var(--citypop-well);
  --ui: var(--citypop-panel);
  --ui2: var(--citypop-raised);
  --ui3: var(--citypop-line);
  --tx3: var(--citypop-key);
  --tx2: var(--citypop-dim);
  --tx1b: var(--citypop-muted);
  --tx: var(--citypop-text);
  --hi: #fff;
  --re: var(--citypop-pink);
  --or: var(--citypop-apricot);
  --ye: var(--citypop-gold);
  --gr: var(--citypop-pool);
  --cy: var(--citypop-sky);
  --bl: var(--citypop-pool-deep);
  --pu: var(--citypop-lilac);
  --ma: var(--citypop-sun);
}

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

/* The head: the name in the brush script, the tabs as Stash's tabs */
.citypop-restyle-toolkit #root .pt-head {
  border-bottom: 1px solid var(--citypop-line);
  margin-bottom: 18px;
}

.citypop-restyle-toolkit #root .pt-title {
  color: var(--citypop-text);
  font-family: var(--citypop-font-display);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-right: 0.5rem;
  text-shadow:
    2px 2px 0 var(--citypop-magenta),
    4px 5px 0 rgb(4 3 22 / 55%);
}

.citypop-restyle-toolkit #root .pt-title .pt-ic {
  color: var(--citypop-sun);
  filter: drop-shadow(2px 2px 0 rgb(4 3 22 / 55%));
}

.citypop-restyle-toolkit #root .pt-tabs {
  align-self: flex-end;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 0.2rem;
  padding: 0;
}

.citypop-restyle-toolkit #root .pt-tab {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 0.55rem 0.75rem 0.8rem;
  text-transform: uppercase;
}

.citypop-restyle-toolkit #root .pt-tab:hover {
  color: #fff;
}

.citypop-restyle-toolkit #root .pt-tab.on {
  background: var(--citypop-sunset-x) 0 100% / 100% 3px no-repeat;
  color: #fff;
}

/* Cards, the review bar, the catalog's cards and the Stats tab's figures
   and charts are navy panels on the hard shadow; a card's coloured top edge
   still says what it is */
.citypop-restyle-toolkit
  #root
  :is(.pt-card, .pt-mcard, .pt-ccard, .pt-rvbar, .pt-kpi, .pt-cc) {
  background: var(--citypop-panel-grad);
  border: 1px solid var(--citypop-edge);
  border-radius: var(--citypop-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    var(--citypop-hard);
}

.citypop-restyle-toolkit #root .pt-card.pt-err {
  border-color: var(--citypop-danger);
}

.citypop-restyle-toolkit #root :is(.pt-card.pt-msg, .pt-card.pt-runend) {
  border-top-color: var(--citypop-pool);
}

.citypop-restyle-toolkit #root :is(.pt-card.pt-busy, .pt-card.pt-run) {
  border-top-color: var(--citypop-sky);
}

.citypop-restyle-toolkit #root .pt-mcard.ex {
  border-top-color: var(--citypop-pool);
}

/* Its sheets are dialogs: a navy panel under the stripe band, over the
   night, like Stash's modals in City Pop */
.citypop-restyle-toolkit #root .pt-veil {
  background: rgb(4 3 26 / 72%);
}

.citypop-restyle-toolkit #root .pt-sheet {
  background:
    var(--citypop-stripes) 0 0 / 100% var(--citypop-band) no-repeat,
    var(--citypop-panel-grad);
  border: 1px solid var(--citypop-line);
  border-radius: var(--citypop-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    10px 10px 0 var(--citypop-drop);
  padding-top: calc(16px + var(--citypop-band));
}

/* Card titles and small caps in Jost; numbers too */
.citypop-restyle-toolkit
  #root
  :is(.pt-ch b, .pt-flowt, .pt-herot b, .pt-cct, .pt-s3t) {
  font-family: var(--citypop-font-label);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.citypop-restyle-toolkit #root :is(.pt-sh, .pt-kpik) {
  font-family: var(--citypop-font-label);
  font-weight: 500;
  letter-spacing: 0.14em;
}

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

/* In the tidied header, Stash's fields, the facts at a glance and the Also
   row are named in the flap's spaced capitals, over values in its type */
.citypop-restyle-toolkit
  #root
  #performer-page
  .performer-head[data-pt-tidy]
  :is(.detail-item-title, .pt-glk, .pt-alsok) {
  color: var(--citypop-muted);
  font-family: var(--citypop-font-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Hair and eyes share a cell under a name it writes in, as Stash's is
   hidden by a font size of 0 */
.citypop-restyle-toolkit
  #root
  #performer-page
  .performer-head[data-pt-tidy]
  .detail-item.hair_color[data-pt-he]
  > .detail-item-title::after {
  letter-spacing: 0.16em;
}

.citypop-restyle-toolkit
  #root
  #performer-page
  .performer-head[data-pt-tidy]
  .pt-gl
  > b {
  font-size: 0.95rem;
}

/* Their scenes' rating keeps the colour it takes when it is above or below
   the user's average */
.citypop-restyle-toolkit
  #root
  #performer-page
  .performer-head[data-pt-tidy]
  .pt-gl:not(.pt-gl-rating.pt-gl-up, .pt-gl-rating.pt-gl-down)
  > b {
  color: var(--citypop-text);
}

/* Wells, fields, chips and the cards inside a panel are sunk night blue */
.citypop-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(--citypop-line);
  border-radius: 5px;
}

.citypop-restyle-toolkit
  #root
  :is(.pt-input, .pt-sel, .pt-acct select, .pt-ct) {
  box-shadow:
    inset 0 2px 0 rgb(0 0 0 / 30%),
    0 1px 0 rgb(255 255 255 / 6%);
}

.citypop-restyle-toolkit #root :is(.pt-input, .pt-sel, .pt-acct select):focus {
  border-color: var(--citypop-pool);
  box-shadow:
    inset 0 2px 0 rgb(0 0 0 / 30%),
    0 0 0 2px rgb(79 227 218 / 35%);
  outline: none;
}

.citypop-restyle-toolkit
  #root
  :is(
    .pt-shot,
    .pt-pbig,
    .pt-gcell,
    .pt-pc,
    .pt-thumb,
    .pt-srimg,
    .pt-sccov,
    .pt-cimg,
    .pt-mcov,
    .pt-ava
  ) {
  border-color: var(--citypop-line);
  border-radius: var(--citypop-radius);
}

.citypop-restyle-toolkit #root .pt kbd {
  border-color: var(--citypop-line);
  border-radius: 3px;
}

/* The chosen chip or step is the sunset, as in Stash's button groups; a
   chosen card in a list takes a sunset edge */
.citypop-restyle-toolkit #root :is(.pt-chip.on, .pt-step.on) {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  border-color: transparent;
  color: var(--citypop-ink);
  font-weight: 600;
}

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

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

/* Buttons are enamel on a hard shadow: night violet, the sunset with a
   glint for the one that goes ahead, hot coral for the one that deletes */
.citypop-restyle-toolkit #root .pt-btn {
  background: var(--citypop-gloss-soft), var(--citypop-night-btn);
  border: 0;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px var(--citypop-key),
    inset 0 1px 0 rgb(255 255 255 / 18%),
    3px 3px 0 rgb(4 3 22 / 70%);
  color: var(--citypop-text);
  font-family: var(--citypop-font-label);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    transform var(--citypop-fast) var(--citypop-ease),
    filter var(--citypop-fast) var(--citypop-ease);
}

.citypop-restyle-toolkit #root .pt-btn.pt-sm {
  font-size: 0.66rem;
}

.citypop-restyle-toolkit #root .pt-btn.pt-big {
  font-size: 0.8rem;
}

.citypop-restyle-toolkit #root .pt-btn:not(:disabled):hover {
  color: #fff;
  filter: brightness(1.15);
}

.citypop-restyle-toolkit #root .pt-btn:not(:disabled):active {
  box-shadow:
    inset 0 2px 3px rgb(0 0 0 / 25%),
    1px 1px 0 rgb(4 3 22 / 70%);
  transform: translate(2px, 2px);
}

.citypop-restyle-toolkit #root .pt-btn.pt-pri {
  background: var(--citypop-gloss), var(--citypop-sunset-btn);
  color: var(--citypop-ink);
  font-weight: 600;
  position: relative;
}

.citypop-restyle-toolkit #root .pt-btn.pt-pri::after {
  background: var(--citypop-glint) center / contain no-repeat;
  content: '';
  height: 16px;
  pointer-events: none;
  position: absolute;
  right: 5px;
  top: -6px;
  transform: scale(0.75);
  width: 16px;
}

.citypop-restyle-toolkit #root .pt-btn.pt-pri kbd {
  background: rgb(255 255 255 / 30%);
  border-color: rgb(27 17 69 / 35%);
  color: var(--citypop-ink);
}

.citypop-restyle-toolkit #root .pt-btn.pt-danger {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 22%) 0 44%, transparent 44%),
    linear-gradient(180deg, #f0365a, #d62452 55%, #b81846);
  color: #fff;
  font-weight: 600;
}

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

.citypop-restyle-toolkit #root .pt-btn:disabled {
  box-shadow: none;
  filter: saturate(0.3) brightness(0.8);
  opacity: 0.45;
}

/* Switches are a pool lane with a pearl float */
.citypop-restyle-toolkit #root .pt-tog i {
  background: var(--citypop-well);
  box-shadow:
    inset 0 0 0 1px var(--citypop-line),
    inset 0 2px 0 rgb(0 0 0 / 30%);
}

.citypop-restyle-toolkit #root .pt-tog.on i {
  background: var(--citypop-caustic), var(--citypop-pool-grad);
}

.citypop-restyle-toolkit #root .pt-tog i::after,
.citypop-restyle-toolkit #root .pt-tog.on i::after {
  background: radial-gradient(
    circle at 34% 30%,
    #fff 0 22%,
    #f1eaff 48%,
    #b9a6f0 100%
  );
}

/* Links read in coral, as everywhere in City Pop; O's are pool water */
.citypop-restyle-toolkit #root :is(.pt-link, a.pt-pill),
.citypop-restyle-toolkit #pt-toast .pt-link {
  color: var(--citypop-coral);
}

.citypop-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
  ),
.citypop-restyle-toolkit #pt-toast .pt-link:hover {
  color: var(--citypop-apricot);
}

.citypop-restyle-toolkit #root .pt-c-bl {
  color: var(--citypop-pool-hi);
}

/* Good and bad in the dusk's own tones */
.citypop-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(--citypop-success);
}

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

/* Navy type on the filled badges and tags. The count on the Catalog tab is
   also a .pt-badge, but a Stash .badge in a Stash tab, which City Pop's tab
   rules already colour. */
.citypop-restyle-toolkit
  #root
  :is(
    .pt-badge:not(.badge),
    .pt-covtag,
    .pt-cpick,
    .pt-dcard.on .pt-dtag,
    .pt-scard.on .pt-scpick
  ) {
  color: var(--citypop-ink);
}

/* Labels laid over pictures sit on night blue */
.citypop-restyle-toolkit
  #root
  :is(
    .pt-shothint,
    .pt-sccov kbd,
    .pt-scpick,
    .pt-ccpill,
    .pt-poor,
    .pt-ckey kbd,
    .pt-pcsz
  ) {
  background: rgb(12 14 48 / 82%);
}

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

/* Status edges in the review bar */
.citypop-restyle-toolkit #root .pt-rvstat {
  --sk: var(--citypop-pool-deep);
}

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

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

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

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

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

/* Its toast is a navy panel under the stripe band, its kind on the left
   edge, like Stash's toasts in City Pop */
.citypop-restyle-toolkit #pt-toast {
  --tk: var(--citypop-pool-deep);

  background:
    var(--citypop-stripes) 0 0 / 100% var(--citypop-band) no-repeat,
    var(--citypop-panel-grad);
  border: 1px solid var(--citypop-line);
  border-left: 3px solid var(--tk);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    var(--citypop-hard);
  color: var(--citypop-text);
  padding-top: calc(9px + var(--citypop-band));
}

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

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

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

/* 85-loading.css */
/* Loading: a cassette with both reels turning, in place of Bootstrap's spinner */
.LoadingIndicator .spinner-border {
  animation: none;
  background: url('assets/icons/tape-shell.svg') center / contain no-repeat;
  border: 0;
  border-radius: 0;
  height: 104px;
  position: relative;
  width: 150px;
}

.LoadingIndicator .spinner-border::before,
.LoadingIndicator .spinner-border::after {
  animation: citypop-spin 1.4s linear infinite;
  background: url('assets/icons/reel.svg') center / contain no-repeat;
  content: '';
  height: 14.6px;
  left: calc(31.45% - 7.3px);
  position: absolute;
  top: calc(40.7% - 7.3px);
  width: 14.6px;
}

.LoadingIndicator .spinner-border::after {
  left: calc(65.32% - 7.3px);
}

/* Small and inline loaders, as in menus and the package manager, keep one reel */
.LoadingIndicator:is(.small, .inline) .spinner-border,
.saved-filter-list-menu .LoadingIndicator .spinner-border {
  animation: citypop-spin 1.4s linear infinite;
  background-image: url('assets/icons/reel.svg');
  height: 16px;
  margin: 0 0.25rem;
  width: 16px;
}

.LoadingIndicator:is(.small, .inline) .spinner-border::before,
.LoadingIndicator:is(.small, .inline) .spinner-border::after,
.saved-filter-list-menu .LoadingIndicator .spinner-border::before,
.saved-filter-list-menu .LoadingIndicator .spinner-border::after {
  content: none;
}

.LoadingIndicator-message {
  color: var(--citypop-text);
  font-size: 1.3rem;
  margin: 0;
}

/* 90-motion.css */
/*
 * The sun rises only where the horizon is free. Every Stash page that shows
 * a list, a detail page's header or body, the front page's rows or the player
 * or picture of a scene or image page has full-width content across the
 * horizon from its top to its bottom, so the sun stays down there and never
 * sits behind cards or text. It rises in Settings, and fades as you move
 * between them. It starts down, so it never shows while a page loads.
 */
body::after {
  transition: opacity 700ms var(--citypop-ease);
}

:root:has(.setting-section):not(
    :has(
      .item-list-container,
      .detail-header,
      .detail-body,
      .recommendations-container,
      .scene-player-container,
      .image-container
    )
  )
  body::after {
  opacity: 0.5;
}

@keyframes citypop-sweep {
  from {
    background-position: 82% 0;
  }

  to {
    background-position: 9% 0;
  }
}

@keyframes citypop-glint {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-60deg);
  }

  35% {
    opacity: 1;
    transform: scale(1.25) rotate(0deg);
  }

  65% {
    opacity: 1;
    transform: scale(1) rotate(15deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.2) rotate(45deg);
  }
}

@keyframes citypop-spin {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes citypop-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4);
  }

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

  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--dx) * 1.1),
        calc(-50% + var(--dy) + 14px)
      )
      rotate(calc(var(--spin) * 2)) scale(0.8);
  }
}

/* Bursts: glints, little striped suns and pool drops */
.citypop-burst {
  animation: citypop-fly 760ms cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
  background: var(--citypop-glint) center / contain no-repeat;
  height: 16px;
  pointer-events: none;
  position: fixed;
  width: 16px;
  z-index: 2000;
}

.citypop-burst.is-sun {
  background: var(--citypop-sunset);
  filter: drop-shadow(1px 1px 0 rgb(4 3 22 / 70%));
  height: 12px;
  mask: url('assets/icons/glyph-sun.svg') center / contain no-repeat;
  width: 12px;
}

.citypop-burst.is-drop {
  background:
    radial-gradient(circle at 34% 30%, #fff 0 18%, transparent 24%),
    var(--citypop-pool-grad);
  border-radius: 0 50% 50%;
  height: 9px;
  rotate: 45deg;
  width: 9px;
}

/* Calm mode and reduced motion: everything holds still */
.citypop-calm *,
.citypop-calm *::before,
.citypop-calm *::after {
  animation: none !important;
  transition: none !important;
}

.citypop-calm .grid-card:hover {
  transform: none;
}

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

  .grid-card:hover {
    transform: none;
  }

  .citypop-burst {
    display: none;
  }
}

/* 95-sfw.css */
/*
 * Empty states: the empty pool at dusk on a little record sleeve, and her
 * line. Stash marks an empty list with nothing but "0-0 of 0" in
 * .paginationIndex, and citypop.js adds the line.
 */
.citypop-empty,
.paginationIndex[data-citypop-empty] {
  align-items: center;
  color: var(--citypop-text);
  display: flex;
  flex-direction: column;
  font-size: 1.3rem;
  gap: 0.7rem;
  line-height: 1.35;
  text-align: center;
}

.citypop-empty::before,
.paginationIndex[data-citypop-empty]::before {
  background: url('assets/icons/pool-sm.webp') center / cover no-repeat;
  border: 4px solid var(--citypop-paper);
  box-shadow: 5px 5px 0 var(--citypop-drop);
  content: '';
  height: 96px;
  margin-bottom: 0.3rem;
  transform: rotate(-4deg);
  width: 96px;
}

/* Stash marks the line .text-muted, which Bootstrap sets with !important */
.paginationIndex[data-citypop-empty] {
  color: var(--citypop-text) !important;
  font-size: 0;
  padding-block: 1.5rem;
}

.paginationIndex[data-citypop-empty]::after {
  content: attr(data-citypop-empty);
  font-size: 1.3rem;
}

/*
 * Stash's SFW content mode keeps the dusk and drops the voice (citypop.js
 * keeps Stash's own wording). The empty pool has no figure in it, so it
 * stays. Stash swaps the O counter for a thumbs-up of its own, which the
 * ripple mask skips; anything that still draws the ripple becomes a cocktail.
 */
.sfw-content-mode .count-button .count-icon svg:not(.svg-inline--fa) {
  mask-image: url('assets/icons/glyph-cocktail.svg');
}