/* 00-fonts.css */
/*
 * Grenze Gotisch and Oswald (both SIL OFL 1.1), bundled because Stash's CSP
 * blocks web font hosts. Leather's own family names keep a copy installed on
 * the viewer's system from standing in.
 */
@font-face {
  font-display: swap;
  font-family: 'Leather Grenze';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/grenze-gotisch/grenze-gotisch-latin-ext-700-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: 'Leather Grenze';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/grenze-gotisch/grenze-gotisch-latin-700-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: 'Leather Grenze';
  font-style: normal;
  font-weight: 900;
  src: url('assets/fonts/grenze-gotisch/grenze-gotisch-latin-ext-900-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: 'Leather Grenze';
  font-style: normal;
  font-weight: 900;
  src: url('assets/fonts/grenze-gotisch/grenze-gotisch-latin-900-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: 'Leather Oswald';
  font-style: normal;
  font-weight: 200 700;
  src: url('assets/fonts/oswald/oswald-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: 'Leather Oswald';
  font-style: normal;
  font-weight: 200 700;
  src: url('assets/fonts/oswald/oswald-latin-wght-normal.woff2')
    format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* 01-tokens.css */
/*
 * Leather 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 leather.css.
 */
@property --leather-lit {
  inherits: false;
  initial-value: 0%;
  syntax: '<percentage>';
}

:root {
  color-scheme: dark;
  accent-color: var(--leather-blood);

  /* Palette */
  --leather-blood: #b0182f;
  --leather-blood-hi: #e0384f;
  --leather-oxblood: #7a1424;
  --leather-nickel: #c9c9ce;
  --leather-thread: #b9aea9;
  --leather-thread-red: #c42a3f;
  --leather-success: #8fd3a6;
  --leather-warning: #e6ad69;
  --leather-danger: #f0596c;

  /*
   * Dyes for data: the charts and tabs of the plugins Leather restyles
   * (82-insights.css, 83-performers-toolkit.css) need eight colours that
   * tell apart on black leather. Blood, nickel and the status tones give
   * five; these add a cognac hide, steel, a verdigris patina and a plum dye.
   */
  --leather-cognac: #cc6f34;
  --leather-steel: #8ea9c9;
  --leather-verdigris: #6db5ac;
  --leather-plum: #a982bf;

  /* Surfaces, black leather from back to front */
  --leather-bg: #0c0a0b;
  --leather-surface: #151113;
  --leather-raised: #221b1e;
  --leather-line: #2f2629;

  /* A well debossed into a panel, where a chart sits */
  --leather-well: #0a0809;

  /* Text */
  --leather-text: #ece6e3;
  --leather-text-muted: #a99f9b;
  --leather-text-dim: #948a8b;
  --leather-text-faint: #6e6366;

  /*
   * Materials. The pebble grain is a seamless tile: periodic noise and wrapped
   * normals, so copies meet without a line. 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 brings the seam back.
   */
  --leather-tex: image-set(
      url('assets/icons/leather-1x.webp') 1x,
      url('assets/icons/leather-2x.webp') 2x,
      url('assets/icons/leather-3x.webp') 3x
    )
    0 0 / 384px 384px;

  /* The same grain as light and shadow only, laid over dyed leather */
  --leather-grain: image-set(
      url('assets/icons/grain-1x.webp') 1x,
      url('assets/icons/grain-2x.webp') 2x,
      url('assets/icons/grain-3x.webp') 3x
    )
    0 0 / 192px 192px;
  --leather-stitch: url('assets/icons/stitch.svg');
  --leather-stitch-red: url('assets/icons/stitch-red.svg');
  --leather-studs: url('assets/icons/studs.svg');
  --leather-nickel-grad: linear-gradient(
    180deg,
    #f4f4f6 0%,
    #c9c9ce 28%,
    #8c8c93 50%,
    #e1e1e6 72%,
    #55555c 100%
  );

  /* A pyramid stud seen from above, lit from the top left */
  --leather-stud-face: conic-gradient(
    from -45deg,
    #d9d9de 0deg,
    #fff 40deg,
    #cfcfd4 90deg,
    #a7a7ae 90deg,
    #6f6f76 180deg,
    #56565d 180deg,
    #2f2f35 270deg,
    #b4b4bb 270deg,
    #ececf0 360deg
  );

  /* The same stud turned 45 degrees, for ratings */
  --leather-stud-diamond: conic-gradient(
    #d4d4d9 0deg,
    #9a9aa1 90deg,
    #5c5c63 90deg,
    #34343a 180deg,
    #6a6a71 180deg,
    #9c9ca3 270deg,
    #e9e9ed 270deg,
    #fff 320deg,
    #dcdce1 360deg
  );
  --leather-ring-face: conic-gradient(
    from 210deg,
    #fff,
    #8c8c93 22%,
    #f4f4f6 42%,
    #55555c 66%,
    #e1e1e6 86%,
    #fff
  );
  --leather-blood-dye: linear-gradient(
    180deg,
    #c42239 0%,
    #a3182c 48%,
    #7a1424 100%
  );
  --leather-ox-dye: linear-gradient(
    180deg,
    #8e1729 0%,
    #6d1120 55%,
    #4c0b16 100%
  );
  --leather-black-dye: linear-gradient(180deg, #2e2528, #1a1517);

  /* Shape */
  --leather-radius: 6px;
  --leather-nav-band: 16px;

  /*
   * The navbar is a strap with a row of studs along its edge, 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.
   */
  --leather-nav-height: 64px;

  /* Type */
  --leather-font-display: 'Leather Grenze', 'Times New Roman', serif;
  --leather-font-label: 'Leather Oswald', 'Arial Narrow', sans-serif;
  --leather-font-body:
    system-ui, -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial,
    sans-serif;

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

/* 02-base.css */
/* Page, type, links, focus, selection and the saddle stitch */
::selection {
  background: var(--leather-blood);
  color: #fff;
}

body {
  background:
    radial-gradient(
      1400px 640px at 50% -220px,
      rgb(122 20 36 / 24%),
      transparent 70%
    ),
    radial-gradient(
      900px 600px at 100% 100%,
      rgb(122 20 36 / 8%),
      transparent 70%
    ),
    var(--leather-bg);
  background-attachment: fixed;
  color: var(--leather-text);
}

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

a:hover {
  color: var(--leather-blood-hi);
}

h1,
h2,
h3 {
  font-family: var(--leather-font-display);
  font-weight: 700;
}

h4,
h5,
h6 {
  font-family: var(--leather-font-label);
  font-weight: 500;
}

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

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

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

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

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

code {
  color: var(--leather-blood-hi);
}

:focus-visible {
  outline: 2px solid var(--leather-blood-hi);
  outline-offset: 2px;
}

* {
  scrollbar-color: #3b3034 var(--leather-bg);
}

/*
 * Saddle stitching: a nine-slice of slanted stitches set into a groove, laid
 * just inside the edge of every leather panel.
 */
.card::after,
.modal-content::after,
.toast::after,
.search-item::after {
  border: 6px solid transparent;
  border-image: var(--leather-stitch) 10 round;
  content: '';
  inset: 1px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* 10-navbar.css */
/*
 * Navigation: a wide leather strap with a thread line along the top and a row
 * of pyramid studs along the bottom. Stash paints the bar and its folded menu
 * with Bootstrap's !important bg-dark, so these need !important too.
 */
.top-nav.navbar {
  background: var(--leather-tex) var(--leather-surface) !important;
  border-bottom: 1px solid #000;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 8px 18px -8px #000;
  min-height: var(--leather-nav-height);
  padding: 7px 1rem calc(7px + var(--leather-nav-band));
}

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

.top-nav.navbar::before {
  background:
    repeating-linear-gradient(
        90deg,
        rgb(185 174 169 / 75%) 0 5px,
        transparent 5px 8px
      )
      0 1px / 100% 1px no-repeat,
    linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%)) 0 0 / 100% 3px no-repeat;
  content: '';
  height: 3px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 4px;
}

.top-nav.navbar::after {
  background: var(--leather-studs) 0 0 / auto 100% repeat-x;
  bottom: 0;
  box-shadow: 0 -1px 0 rgb(255 255 255 / 5%);
  content: '';
  height: var(--leather-nav-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(--leather-nav-height);
  }

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

.top-nav .btn.minimal {
  background: none;
  border: 0;
  border-radius: 4px;
  color: #d3cac6;
  font-family: var(--leather-font-label);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-shadow: 0 -1px 0 #000;
  text-transform: uppercase;
}

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

/* The active page is a blood-red patch stitched onto the strap */
.top-nav .btn.minimal.active,
.top-nav .btn.minimal.active:not(:disabled):hover {
  background: var(--leather-grain), var(--leather-blood-dye);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    inset 0 -1px 0 rgb(0 0 0 / 40%),
    0 0 0 1px #000,
    0 2px 4px rgb(0 0 0 / 60%);
  color: #fff;
  outline: 1px dashed rgb(236 230 227 / 60%);
  outline-offset: -4px;
}

.top-nav .brand-link.btn.minimal {
  align-items: center;
  color: var(--leather-text);
  display: inline-flex !important;
  font-family: var(--leather-font-display);
  font-size: 2rem;
  font-weight: 900;
  gap: 0.5rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0 0.5rem 0.15rem 0.2rem;
  text-shadow:
    0 -1px 0 #000,
    0 1px 0 rgb(255 255 255 / 12%);
  text-transform: none;
}

.top-nav .brand-link.btn.minimal::before {
  background: var(--leather-stud-face);
  box-shadow:
    0 0 0 1px #000,
    0 2px 3px rgb(0 0 0 / 70%);
  content: '';
  flex: none;
  height: 13px;
  margin-top: 0.15rem;
  width: 13px;
}

.top-nav .brand-link.btn.minimal:hover {
  background: none;
  color: #fff;
}

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

/* The menu toggle Stash shows below 1200px: a small stitched leather patch */
.top-nav .navbar-toggler {
  background: var(--leather-grain), var(--leather-black-dye);
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 2px 3px rgb(0 0 0 / 60%);
  color: var(--leather-text);
  outline: 1px dashed rgb(185 174 169 / 45%);
  outline-offset: -4px;
}

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

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

  .top-nav .navbar-toggler {
    padding-block: 0.3rem;
  }

  .top-nav .navbar-collapse .btn.minimal {
    letter-spacing: 0.1em;
  }

  .top-nav .navbar-collapse .nav-menu-icon {
    color: var(--leather-text-muted);
  }

  .top-nav .navbar-collapse .btn.minimal.active .nav-menu-icon {
    color: #fff;
  }
}

/*
 * On a phone held upright Stash docks the bar at the bottom of the screen, so
 * the studs move to its top edge and the thread to its bottom.
 */
@media (width <= 575.98px) and (orientation: portrait) {
  .top-nav.navbar {
    border-bottom: 0;
    border-top: 1px solid #000;
    box-shadow:
      inset 0 -1px 0 rgb(255 255 255 / 6%),
      0 -8px 18px -8px #000;
    padding: calc(5px + var(--leather-nav-band)) 2rem 5px;
  }

  .top-nav.navbar::before {
    bottom: 4px;
    top: auto;
  }

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

/* 20-buttons.css */
/*
 * Buttons: dyed leather with an inner saddle stitch. Pressing debosses the
 * leather. Stash renders its icon buttons as `.btn.btn-primary.minimal`, so
 * every leather rule skips `.minimal` and those stay flat.
 */
.btn {
  --leather-btn-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 -2px 0 rgb(0 0 0 / 35%),
    0 2px 3px rgb(0 0 0 / 55%);

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

/*
 * The stitch and the rivets hang 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: 1px solid #000 !important;
  box-shadow: var(--leather-btn-shadow);
  text-shadow: 0 -1px 0 rgb(0 0 0 / 55%);
}

.btn:not(.minimal, .btn-link)::before {
  border: 5px solid transparent;
  border-image: var(--leather-stitch) 10 round;
  content: '';
  inset: 1px;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
}

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

.btn:focus-visible {
  box-shadow:
    var(--leather-btn-shadow),
    0 0 0 2px var(--leather-bg),
    0 0 0 4px var(--leather-blood-hi) !important;
}

/* Pressed: the leather is debossed */
.btn:not(.minimal, .btn-link, :disabled, .disabled):active,
.btn:not(.minimal, .btn-link).active {
  --leather-btn-shadow:
    inset 0 2px 5px rgb(0 0 0 / 80%), inset 0 -1px 0 rgb(255 255 255 / 6%),
    0 1px 0 rgb(255 255 255 / 6%);

  transform: translateY(1px);
}

.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(--leather-grain), var(--leather-blood-dye);
  color: #fff;
}

/* Room for a nickel rivet near each end of every primary button */
.btn-primary:not(.minimal) {
  padding-inline: 1.5rem;
}

.btn-primary:not(.minimal)::after {
  /* Each rivet is a nickel dome lit from the top left, over a soft shadow */
  background:
    radial-gradient(
      circle at 10.2px calc(50% - 1px),
      #fff 0 0.8px,
      #e8e8ec 1.5px,
      #a3a3aa 2.5px,
      #55555c 3.4px,
      #050405 4px,
      transparent 4.5px
    ),
    radial-gradient(
      circle at calc(100% - 11.8px) calc(50% - 1px),
      #fff 0 0.8px,
      #e8e8ec 1.5px,
      #a3a3aa 2.5px,
      #55555c 3.4px,
      #050405 4px,
      transparent 4.5px
    ),
    radial-gradient(
      circle at 11.4px calc(50% + 1.4px),
      rgb(0 0 0 / 55%) 0 3.4px,
      transparent 4.6px
    ),
    radial-gradient(
      circle at calc(100% - 10.6px) calc(50% + 1.4px),
      rgb(0 0 0 / 55%) 0 3.4px,
      transparent 4.6px
    );
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

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

.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) {
  background: var(--leather-tex) var(--leather-raised);
  color: var(--leather-text);
}

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

.btn-secondary:not(.minimal, :disabled, .disabled):hover::before,
.btn-secondary:not(.minimal).active::before,
.show > .btn-secondary.dropdown-toggle:not(.minimal)::before {
  border-image-source: var(--leather-stitch-red);
}

/* The chosen item of a group is pressed into oxblood */
.btn.btn-secondary:not(.minimal, :disabled, .disabled).active {
  background: var(--leather-grain), var(--leather-ox-dye);
  color: #fff;
}

.btn-danger:not(.minimal),
.btn-danger:not(.minimal):hover,
.btn-danger:not(.minimal):focus,
.btn-danger:not(.minimal, :disabled, .disabled):active {
  background:
    var(--leather-grain),
    linear-gradient(180deg, #ec2f48 0%, #c41b33 50%, #911226 100%);
  color: #fff;
}

.btn-warning:not(.minimal),
.btn-warning:not(.minimal):hover,
.btn-warning:not(.minimal):focus,
.btn-warning:not(.minimal, :disabled, .disabled):active {
  background:
    var(--leather-grain),
    linear-gradient(180deg, #b56f31 0%, #8e4e20 55%, #643411 100%);
  color: #fff7ee;
}

.btn-success:not(.minimal),
.btn-success:not(.minimal):hover,
.btn-success:not(.minimal):focus,
.btn-success:not(.minimal, :disabled, .disabled):active {
  background:
    var(--leather-grain),
    linear-gradient(180deg, #2f6649 0%, #1f4a33 55%, #12301f 100%);
  color: #ecf8f0;
}

.btn-info:not(.minimal),
.btn-info:not(.minimal):hover,
.btn-info:not(.minimal):focus,
.btn-info:not(.minimal, :disabled, .disabled):active {
  background:
    var(--leather-grain),
    linear-gradient(180deg, #626872 0%, #474c54 55%, #2e3237 100%);
  color: #f1f2f4;
}

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

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

.btn:disabled::before,
.btn.disabled::before {
  opacity: 0.35;
}

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

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

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

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

  color: var(--leather-text);
  text-decoration: underline dashed var(--leather-blood-hi) 1px;
  text-underline-offset: 6px;
}

.btn-link:hover {
  color: var(--leather-blood-hi);
  text-decoration-color: var(--leather-blood-hi);
}

/* 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(--leather-tex) var(--leather-raised);
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow: var(--leather-btn-shadow);
  color: var(--leather-text);
  font-family: var(--leather-font-label);
  letter-spacing: 0.08em;
}

select option {
  background-color: var(--leather-surface);
  color: var(--leather-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;
  border: 0 !important;
  box-shadow: none;
  color: var(--leather-thread);
  transform: none;
}

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

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

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

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

/* 30-cards.css */
/* Cards: stitched pebble-grain leather with the picture set in like a window */
.card {
  background: var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: var(--leather-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    inset 0 -1px 0 rgb(0 0 0 / 60%),
    0 2px 4px rgb(0 0 0 / 50%),
    0 14px 26px -16px #000;
  color: var(--leather-text);
}

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

.grid-card:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 9%),
    inset 0 -1px 0 rgb(0 0 0 / 60%),
    0 4px 6px rgb(0 0 0 / 50%),
    0 22px 34px -16px #000;
  transform: translateY(-3px);
}

.grid-card:hover::after {
  border-image-source: var(--leather-stitch-red);
}

.grid-card .thumbnail-section {
  background-color: #000;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px #000,
    0 1px 0 1px rgb(255 255 255 / 6%);
  overflow: hidden;
  position: relative;
}

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

.grid-card .card-controls {
  left: calc(7px + 0.5rem);
  top: calc(7px + 0.5rem);
  z-index: 3;
}

.card a {
  color: inherit;
}

.grid-card .card-section {
  padding: 0.6rem 0.5rem 0.45rem;
}

.card-section-title,
.grid-card a .card-section-title {
  color: var(--leather-text);
  font-family: var(--leather-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.grid-card a:hover .card-section-title {
  color: var(--leather-blood-hi);
}

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

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

/* The card rule is a stitched strap with a rivet at each end */
.grid-card > hr {
  background:
    radial-gradient(
      circle at 5px 50%,
      #f4f4f6 0 0.7px,
      #a3a3aa 1.4px,
      #45454b 2.2px,
      #000 2.6px,
      transparent 3px
    ),
    radial-gradient(
      circle at calc(100% - 5px) 50%,
      #f4f4f6 0 0.7px,
      #a3a3aa 1.4px,
      #45454b 2.2px,
      #000 2.6px,
      transparent 3px
    ),
    repeating-linear-gradient(
        90deg,
        rgb(185 174 169 / 60%) 0 3.5px,
        transparent 3.5px 6px
      )
      11px 50% / calc(100% - 22px) 1px no-repeat,
    linear-gradient(
      180deg,
      #000 0 1px,
      #382d31 1px 2px,
      #211a1d 2px 5px,
      #140f11 5px 7px,
      #000 7px
    );
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 5%);
  height: 8px;
  margin: auto 0.2rem 0.45rem;
  opacity: 1;
}

/* Overlays on the picture */
.studio-overlay a {
  color: #fff;
  font-family: var(--leather-font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-shadow:
    0 1px 2px #000,
    0 0 6px rgb(0 0 0 / 90%),
    0 0 14px rgb(0 0 0 / 70%);
  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 10 11 / 86%);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  color: var(--leather-text);
  font-family: var(--leather-font-label);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.4rem;
}

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

.scene-specs-overlay .overlay-resolution {
  color: #ff8fa0;
}

/*
 * The rating banner is a leather tab hanging from the top of the picture, with
 * a stud, in place of Stash's diagonal ribbon.
 */
.rating-banner {
  background: var(--leather-grain), var(--leather-blood-dye);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 7px),
    50% 100%,
    0 calc(100% - 7px)
  );
  color: #fff;
  font-family: var(--leather-font-label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 0.4rem 0.5rem calc(0.4rem + 13px);
  text-align: center;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 50%);
  text-transform: uppercase;
  top: 0;
  transform: none;
  z-index: 2;
}

.rating-banner::after {
  background: var(--leather-stud-face);
  bottom: 9px;
  box-shadow: 0 0 0 0.5px #000;
  content: '';
  height: 7px;
  left: calc(50% - 3.5px);
  position: absolute;
  width: 7px;
}

/*
 * 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 tab hangs
 * to its right (and past a group's drag handle where there is one).
 */
.grid-card .rating-banner {
  left: calc(7px + 0.5rem + 1.75rem);
}

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

.grid-card .progress-bar {
  background: rgb(0 0 0 / 78%);
  bottom: 0;
  height: 6px;
}

.grid-card .progress-indicator {
  background:
    repeating-linear-gradient(
        90deg,
        rgb(255 222 227 / 70%) 0 3px,
        transparent 3px 5.5px
      )
      0 50% / 100% 1px no-repeat,
    linear-gradient(180deg, #ef4b62, #b0182f 60%, #7a1424);
  box-shadow: 0 0 6px rgb(224 56 79 / 50%);
  height: 6px;
}

/* Counts under the card */
.card-popovers .btn.minimal {
  color: var(--leather-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.card-popovers .btn.minimal:not(:disabled):hover {
  color: var(--leather-blood-hi);
}

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

.performer-card .card-section-title {
  font-size: 1.45rem;
}

/*
 * 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 nickel dome
 * in the bottom-right corner, clear of the rating tab and checkbox. #root
 * outranks Stash's hover, focus and active reset.
 */
#root .image-card .preview-button {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.55rem;

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

#root .image-card .preview-button .btn {
  align-items: center;
  background: radial-gradient(
    circle at 36% 30%,
    #fff 0 6%,
    #d9d9de 22%,
    #8c8c93 62%,
    #45454b 100%
  );
  border: 1px solid #000 !important;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 70%);
  color: #151113;
  display: inline-flex;
  filter: none;
  height: 34px;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  position: relative;
  text-shadow: none;
  transition:
    opacity var(--leather-fast) var(--leather-ease),
    transform var(--leather-medium) var(--leather-ease);
  width: 34px;
}

#root .image-card .preview-button .btn::before {
  border: 0;
  border-image: none;
  inset: -5px;
  opacity: 1;
}

#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 dome 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.08);
  }
}

#root .image-card .preview-button .btn:active {
  box-shadow: 0 1px 2px rgb(0 0 0 / 70%);
  transform: translateY(1px) scale(0.94);
}

#root .image-card .preview-button .btn:focus-visible {
  box-shadow:
    0 2px 4px rgb(0 0 0 / 70%),
    0 0 0 2px var(--leather-bg),
    0 0 0 4px var(--leather-blood-hi);
}

.grid-card .card-check {
  accent-color: var(--leather-blood);
}

/* 40-tags.css */
/* Tags: little leather tags with a nickel eyelet and a stitched edge */
.tag-item.badge,
.badge-secondary {
  align-items: center;
  background: var(--leather-grain), var(--leather-black-dye);
  border: 1px solid #000;
  border-radius: 3px 6px 6px 3px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 2px 3px -1px #000;
  color: var(--leather-text);
  display: inline-flex;
  font-family: var(--leather-font-label);
  font-size: 0.78rem;
  font-weight: 500;
  gap: 0.5em;
  letter-spacing: 0.1em;
  line-height: 1;
  outline: 1px dashed rgb(185 174 169 / 45%);
  outline-offset: -4px;
  padding: 0.55em 0.95em 0.55em 0.75em;
  text-transform: uppercase;
}

.tag-item.badge::before {
  background:
    radial-gradient(circle, var(--leather-bg) 0 32%, transparent 36%),
    var(--leather-ring-face);
  border-radius: 50%;
  box-shadow:
    0 0 0 0.5px #000,
    0 1px 1px rgb(0 0 0 / 80%);
  content: '';
  flex: none;
  height: 0.75em;
  width: 0.75em;
}

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

.tag-item.badge:hover,
.tag-item.badge a:hover {
  color: #fff;
  outline-color: var(--leather-thread-red);
  text-decoration: none;
}

.badge-primary {
  background: var(--leather-grain), var(--leather-blood-dye);
  border: 1px solid #000;
  border-radius: 3px;
  color: #fff;
  font-family: var(--leather-font-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  outline: 1px dashed rgb(255 235 238 / 55%);
  outline-offset: -3px;
  text-transform: uppercase;
}

.badge-info {
  background: var(--leather-grain), linear-gradient(180deg, #626872, #2e3237);
  border: 1px solid #000;
  border-radius: 3px;
  color: #f1f2f4;
  font-family: var(--leather-font-label);
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* 50-rating.css */
/*
 * Ratings: pyramid studs set over punched grommets. The Font Awesome star
 * paths are hidden and the svg box paints a stud or a grommet through a mask.
 */
.rating-stars svg {
  background: conic-gradient(
    from 210deg,
    #b0b0b7,
    #3a3a40 25%,
    #8e8e95 48%,
    #2c2c31 72%,
    #b0b0b7
  );
  mask: url('assets/icons/glyph-grommet.svg') center / 80% no-repeat;
}

.rating-stars .filled-star svg {
  background:
    radial-gradient(16% 9% at 34% 33%, rgb(255 255 255 / 95%), transparent),
    var(--leather-stud-diamond);
  mask-image: url('assets/icons/glyph-stud.svg');
  mask-size: 96%;
}

.rating-stars .filled-star {
  filter: drop-shadow(0 0 0.5px #000)
    drop-shadow(0 1.5px 1.2px rgb(0 0 0 / 85%));
}

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

/* A full stud covers its grommet, which would show through the facets */
.rating-stars .star-fill-100 .unfilled-star {
  visibility: hidden;
}

.rating-stars .btn.minimal {
  transition: transform var(--leather-medium) var(--leather-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(-2px);
}

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

.star-rating-number {
  color: var(--leather-blood-hi);
  font-family: var(--leather-font-label);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/*
 * Favourite: a studded collar with a hanging O-ring. 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-collar.svg') center / contain no-repeat;
}

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

#root button.btn.favorite-button.not-favorite {
  color: #74747c;
}

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

/* Collared: the band turns blood red, the ring stays nickel */
.favorite-button.favorite svg {
  background:
    linear-gradient(
      180deg,
      #f2586b 0%,
      #c41f38 30%,
      #8e1427 56%,
      transparent 56%
    ),
    linear-gradient(180deg, #f4f4f6 56%, #8c8c93 76%, #e1e1e6 88%, #55555c 100%);
}

#root button.btn.favorite-button.favorite,
#root button.btn.favorite-button.favorite:hover {
  filter: drop-shadow(0 0 5px rgb(224 56 79 / 65%));
}

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

/* On a card the collar 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(0 1px 1px #000) drop-shadow(0 0 3px rgb(0 0 0 / 80%));
}

#root .grid-card button.btn.favorite-button.not-favorite {
  color: rgb(214 214 219 / 70%);
}

#root .grid-card button.btn.favorite-button.favorite {
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 5px rgb(224 56 79 / 75%));
}

/*
 * The O counter is a flogger. 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-flogger.svg') center / 92% no-repeat;
}

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

.count-button .btn.minimal {
  color: var(--leather-thread);
}

.count-button .btn.minimal:not(:disabled):hover,
.count-button button.count-icon:hover {
  color: var(--leather-blood-hi);
}

.count-button:hover {
  background: rgb(255 255 255 / 4%);
}

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

/* 60-forms.css */
/* Forms: fields are debossed into the leather, and focus runs a red stitch */
.form-control,
.custom-select,
.input-control,
div.react-select__control {
  background:
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 35%)),
    var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    inset 0 -1px 0 rgb(255 255 255 / 4%),
    0 1px 0 rgb(255 255 255 / 7%);
  color: var(--leather-text);
}

.custom-select {
  background:
    url('assets/icons/chevron.svg') right 0.75rem center / 12px 12px no-repeat,
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 35%)),
    var(--leather-tex) var(--leather-surface);
  padding-right: 2.2rem;
}

.custom-select option {
  background: var(--leather-surface);
  color: var(--leather-text);
}

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

.form-control:focus,
.custom-select:focus,
.input-control:focus,
div.react-select__control--is-focused {
  border-color: #000;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 0 0 1px var(--leather-blood),
    0 0 0 4px rgb(176 24 47 / 28%);
  color: var(--leather-text);
  outline: 1.5px dashed var(--leather-thread-red);
  outline-offset: -5px;
}

.form-control:focus,
.input-control:focus {
  background:
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 35%)),
    var(--leather-tex) var(--leather-surface);
}

.form-control:disabled,
.form-control[readonly] {
  color: var(--leather-text-muted);
}

/* Bootstrap paints these fields (the scrape dialogs) with !important */
.form-control.bg-secondary {
  background:
    linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 20%)),
    var(--leather-tex) var(--leather-raised) !important;
}

.form-control.border-secondary {
  border-color: #000 !important;
}

.input-group-text {
  background: var(--leather-grain), var(--leather-black-dye);
  border: 1px solid #000;
  color: var(--leather-text-muted);
  font-family: var(--leather-font-label);
  letter-spacing: 0.06em;
}

/* Validation, as in the stash-box endpoint form */
.form-control.is-valid,
.was-validated .form-control:valid {
  background-image:
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 35%)), var(--leather-tex);
  border-color: var(--leather-success);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: var(--leather-success);
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 0 0 3px rgb(143 211 166 / 25%);
  outline-color: var(--leather-success);
}

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

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: var(--leather-danger);
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 0 0 3px rgb(240 89 108 / 28%);
}

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

/* Checkboxes and switches */
.custom-control-label::before {
  background:
    linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 25%)),
    var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 90%),
    0 1px 0 rgb(255 255 255 / 7%);
}

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

/*
 * An unchecked box or radio keeps its debossed well, rimmed in the thread's
 * colour so it reads on the black leather (dimmer while disabled). Switches
 * keep a black edge: their nickel snap shows where they are.
 */
:is(.custom-checkbox, .custom-radio)
  .custom-control-input:not(:checked)
  ~ .custom-control-label::before {
  border-color: rgb(185 174 169 / 70%);
}

:is(.custom-checkbox, .custom-radio)
  .custom-control-input:disabled:not(:checked)
  ~ .custom-control-label::before {
  border-color: rgb(185 174 169 / 30%);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--leather-grain), var(--leather-blood-dye);
  border-color: #000;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    0 0 8px -2px rgb(224 56 79 / 60%);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 90%),
    0 0 0 3px rgb(224 56 79 / 35%);
}

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

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

/* Switches: a leather strap with a nickel snap */
.custom-switch {
  padding-left: 2.95rem;
}

.custom-switch .custom-control-label::before {
  border-radius: 0.6rem;
  height: 1.2rem;
  left: -2.95rem;
  outline: 1px dashed rgb(185 174 169 / 35%);
  outline-offset: -4px;
  top: 0.15rem;
  width: 2.4rem;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--leather-grain), var(--leather-ox-dye);
  outline-color: rgb(255 214 220 / 50%);
}

.custom-switch .custom-control-label::after,
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 28%,
      rgb(0 0 0 / 35%) 32%,
      transparent 38%
    ),
    radial-gradient(
      circle at 36% 30%,
      #fff 0 8%,
      #e1e1e6 24%,
      #9a9aa1 60%,
      #4a4a50 100%
    );
  border-radius: 50%;
  box-shadow:
    0 0 0 1px #000,
    0 2px 3px rgb(0 0 0 / 80%);
  height: calc(1.2rem - 6px);
  left: calc(-2.95rem + 3px);
  top: calc(0.15rem + 3px);
  transition: transform var(--leather-medium) var(--leather-ease);
  width: calc(1.2rem - 6px);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1.2rem);
}

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

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

.react-select__indicator {
  color: var(--leather-thread) !important;
}

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

/*
 * The Tagger marks a match linked to something already in Stash by
 * colouring its select. Here it takes the red ring and stitch 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 {
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 0 0 1px var(--leather-blood-hi),
    0 0 0 4px rgb(176 24 47 / 28%);
  outline: 1.5px dashed var(--leather-thread-red);
  outline-offset: -5px;
}

/*
 * Select menus match the dropdowns: the stitching is the border, and the
 * options sit inset with rounded corners, so neither the first nor the last
 * option runs into the menu's edge.
 */
div.react-select__menu {
  background: var(--leather-tex) var(--leather-surface);
  border: 7px solid transparent;
  border-image: var(--leather-stitch) 10 / 6px round;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px #000,
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 18px 36px -12px #000;
  color: var(--leather-text);
  overflow: hidden;
}

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

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

div.react-select__menu .react-select__option--is-selected {
  background: var(--leather-grain), var(--leather-ox-dye);
  color: #fff;
}

div.react-select__menu .react-select__option--is-focused {
  background: linear-gradient(
    90deg,
    rgb(176 24 47 / 55%),
    rgb(122 20 36 / 25%)
  );
  box-shadow: inset 2px 0 0 var(--leather-blood-hi);
  color: #fff;
}

div.react-select__control .react-select__multi-value {
  background: var(--leather-grain), var(--leather-black-dye);
  border: 1px solid #000;
  border-radius: 3px;
  color: var(--leather-text);
}

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

/*
 * Sliders: Stash draws its own (styles/_range.scss), so repaint the track and
 * the thumb. 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(180deg, #000, #2a2124);
  box-shadow: inset 0 1px 2px #000;
}

#root input[type='range']::-webkit-slider-thumb {
  background: radial-gradient(
    circle at 36% 30%,
    #fff 0 8%,
    #e1e1e6 24%,
    #9a9aa1 60%,
    #4a4a50 100%
  );
  border: 1px solid #000;
  box-shadow: 0 1px 2px rgb(0 0 0 / 80%);
  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(180deg, #000, #2a2124);
}

#root input[type='range']::-moz-range-thumb {
  background: radial-gradient(
    circle at 36% 30%,
    #fff 0 8%,
    #e1e1e6 24%,
    #9a9aa1 60%,
    #4a4a50 100%
  );
  border: 1px solid #000;
}

/* 70-overlays.css */
/*
 * Menus, popovers, tooltips, toasts and modals: stitched leather. 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. Stash caps longer menus (Sort by, the scrapers) at 300px and
 * scrolls them, so a menu's stitching is its own border, which the items
 * scroll inside.
 */
.dropdown-menu,
div.dropdown-menu {
  background: var(--leather-tex) var(--leather-surface);
  border: 7px solid transparent;
  border-image: var(--leather-stitch) 10 / 6px round;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px #000,
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 18px 36px -12px #000;
  color: var(--leather-text);
  padding: 0.25rem;
}

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

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

.dropdown-item,
div.dropdown-menu .dropdown-item {
  border-radius: 3px;
  color: var(--leather-text);
  font-family: var(--leather-font-label);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.75rem;
  position: relative;
  z-index: 2;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active,
div.dropdown-menu .dropdown-item:hover,
div.dropdown-menu .dropdown-item:focus,
div.dropdown-menu .dropdown-item.active,
div.dropdown-menu .dropdown-item:active {
  background:
    var(--leather-grain),
    linear-gradient(90deg, rgb(176 24 47 / 55%), rgb(122 20 36 / 25%));
  box-shadow: inset 2px 0 0 var(--leather-blood-hi);
  color: #fff;
}

.dropdown-divider {
  border-top: 1px dashed rgb(185 174 169 / 30%);
}

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

.popover {
  background: var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 18px 36px -12px #000;
}

.popover-header {
  background: var(--leather-raised);
  border-bottom: 1px solid #000;
  color: var(--leather-text);
  font-family: var(--leather-font-label);
  letter-spacing: 0.08em;
}

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

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

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

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

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

.tooltip {
  font-family: var(--leather-font-label);
}

.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background: var(--leather-tex) var(--leather-raised);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 60%);
  color: var(--leather-text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  outline: 1px dashed rgb(185 174 169 / 45%);
  outline-offset: -4px;
  padding: 0.45rem 0.8rem;
  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;
  letter-spacing: 0.03em;
  text-transform: none;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^='top'] .arrow::before {
  border-top-color: #000;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^='bottom'] .arrow::before {
  border-bottom-color: #000;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^='left'] .arrow::before {
  border-left-color: #000;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^='right'] .arrow::before {
  border-right-color: #000;
}

/*
 * Toasts: Stash puts the whole message in the toast's header and colours the
 * toast by kind. Here every toast is leather, the message is set in
 * blackletter, and a dyed edge on the left says which kind it is.
 */
.toast,
.toast-container .toast {
  backdrop-filter: none;
  background: var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 14px 28px -12px #000;
  color: var(--leather-text);
  position: relative;
}

.toast-container {
  opacity: 1;
}

.toast-container .toast.danger {
  box-shadow:
    inset 5px 0 0 var(--leather-danger),
    0 14px 28px -12px #000;
}

.toast-container .toast.warning {
  box-shadow:
    inset 5px 0 0 var(--leather-warning),
    0 14px 28px -12px #000;
}

.toast-header,
.toast-container .toast-header {
  align-items: center;
  background: none;
  border-bottom: 0;
  color: var(--leather-text);
  font-family: var(--leather-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  gap: 0.65rem;
  line-height: 1.15;
  position: relative;
  z-index: 2;
}

.toast-header::before {
  align-self: flex-start;
  background: var(--leather-stud-face);
  box-shadow: 0 0 0 0.5px #000;
  content: '';
  flex: none;
  height: 9px;
  margin-top: 0.45em;
  width: 9px;
}

.toast-container .toast-header .close {
  color: var(--leather-text-muted);
  font-family: var(--leather-font-label);
}

.toast-body {
  position: relative;
  z-index: 2;
}

/* Modals: stitched leather, with a strap and buckle under the title */
.modal-content {
  background: var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 30px 60px -20px #000;
  color: var(--leather-text);
}

.modal-content::after {
  inset: 3px;
}

/* Stash paints each modal section slate; let the leather show through */
.modal-header,
.modal-body,
.modal-footer {
  background-color: transparent;
  color: var(--leather-text);
  position: relative;
  z-index: 2;
}

.modal-content > .modal-header {
  align-items: center;
  border-bottom: 0;
  gap: 0.6rem;
  justify-content: flex-start;
  font-family: var(--leather-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 1.1rem 1.25rem 2.2rem;
}

.modal-content > .modal-header::before {
  background: url('assets/icons/strap.svg') right center / auto 14px no-repeat;
  bottom: 0.7rem;
  content: '';
  height: 14px;
  left: 1.25rem;
  pointer-events: none;
  position: absolute;
  right: 1.1rem;
}

.modal-content > .modal-header::after {
  background: url('assets/icons/strap-buckle.svg') center / contain no-repeat;
  bottom: calc(0.7rem - 8px);
  content: '';
  height: 30px;
  left: calc(1.25rem + 6px);
  pointer-events: none;
  position: absolute;
  width: 36px;
}

.modal-title {
  color: var(--leather-text);
  font-family: var(--leather-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.modal-header .fa-icon {
  color: var(--leather-blood-hi);
  height: 0.8em;
}

/*
 * Cherry Pick's bracket dialogs carry buttons in the header: the speaker and
 * the map sizes. The red is for the icon before a title; an icon on a button
 * takes the button's ink, so the speaker reads on blood red when sound is
 * on, and its height, so it lines up with the size marks. The speaker is too
 * small for a rivet at each end, which met over its icon, so it has none and
 * keeps one width on and off.
 */
.cherrypick-dialog .modal-header .btn .fa-icon {
  color: inherit;
  height: 1em;
}

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

.cherrypick-dialog .modal-header .cherrypick-sound.btn::after {
  content: none;
}

/* Their close button, at Bootstrap's half opacity, faded into the black
   leather */
.cherrypick-dialog .modal-header .close,
.cherrypick-dialog .modal-header .close:not(:disabled, .disabled):hover {
  opacity: 1;
}

.cherrypick-dialog .modal-header .close:hover {
  color: var(--leather-text);
}

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

.modal-footer {
  border-top: 1px solid #000;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

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

/* The edit filter dialog's criteria are a list, not cards */
.edit-filter-dialog .criterion-list .card {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed rgb(185 174 169 / 22%);
  border-radius: 0;
  box-shadow: none;
}

.edit-filter-dialog .criterion-list .card::after {
  content: none;
}

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

.modal-backdrop.show {
  background-color: #000;
  opacity: 0.75;
}

.alert {
  background: var(--leather-tex) var(--leather-raised);
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow:
    inset 4px 0 0 var(--leather-blood),
    0 6px 14px -8px #000;
  color: var(--leather-text);
}

.alert-danger {
  box-shadow:
    inset 4px 0 0 var(--leather-danger),
    0 6px 14px -8px #000;
}

.alert-warning {
  box-shadow:
    inset 4px 0 0 var(--leather-warning),
    0 6px 14px -8px #000;
}

.alert-success {
  box-shadow:
    inset 4px 0 0 var(--leather-success),
    0 6px 14px -8px #000;
}

/* 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, untextured leather that never lifts; the chosen row takes a
 * blood-red edge, and the dye stays on the buttons that act.
 */

/* Tagger rows, and the stash-box result lists that reuse .search-item */
.search-item {
  background: var(--leather-surface);
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow: 0 10px 22px -14px #000;
  position: relative;
}

/* The performer, studio and tag taggers sit inside a card, so raise them */
.PerformerTagger-performer,
.StudioTagger-studio,
.TagTagger-tag,
.modal .search-item {
  background: var(--leather-raised);
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow: 0 10px 22px -14px #000;
}

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

/* Cards inside the Tagger keep still and go without the collar */
:is(
    .tagger-container,
    .PerformerTagger-performer,
    .StudioTagger-studio,
    .TagTagger-tag
  )
  .grid-card:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    inset 0 -1px 0 rgb(0 0 0 / 60%),
    0 2px 4px rgb(0 0 0 / 50%);
  transform: none;
}

:is(.PerformerTagger-performer, .StudioTagger-studio, .TagTagger-tag)
  .card::after {
  content: 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(--leather-blood-hi),
    0 10px 22px -14px #000;
}

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

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

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

.selected-result,
.selected-result:hover {
  background: linear-gradient(90deg, rgb(176 24 47 / 16%), transparent 55%);
  box-shadow: inset 3px 0 0 var(--leather-blood-hi);
}

.search-result h4 {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

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

.tagger-container .scene-card-preview,
.search-result .scene-image,
.search-item .scene-image {
  border: 1px solid #000;
  border-radius: 3px;
}

.entity-name {
  color: var(--leather-text-muted);
  font-family: var(--leather-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(--leather-text-dim);
}

/* StashID links: the box name on nickel and the ID on leather, one tag */
.stash-id-pill {
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: 0 2px 3px -1px #000;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.stash-id-pill span {
  background: var(--leather-nickel-grad);
  border-radius: 0;
  color: #151113;
  font-family: var(--leather-font-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stash-id-pill a {
  background: var(--leather-tex) var(--leather-raised);
  border-left: 1px solid #000;
  border-radius: 0;
  color: var(--leather-text);
  font-family: ui-monospace, monospace;
  font-weight: 400;
}

.stash-id-pill a:hover {
  color: var(--leather-blood-hi);
}

/*
 * 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 dyed
 * blood red and its field takes the red stitch.
 */
.scrape-dialog .column-label,
.scrape-dialog .col-form-label {
  color: var(--leather-text-muted);
  font-family: var(--leather-font-label);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scrape-dialog .input-group-prepend .btn:has(.text-success) {
  background: var(--leather-grain), var(--leather-blood-dye);
}

.scrape-dialog .input-group-prepend .btn .text-success {
  color: #fff !important;
}

.scrape-dialog
  .input-group:has(> .input-group-prepend .text-success)
  :is(.form-control, div.react-select__control) {
  outline: 1.5px dashed var(--leather-thread-red);
  outline-offset: -5px;
}

/* Icons on leather buttons keep their meaning */
.btn-secondary .text-muted {
  color: var(--leather-text-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 dashed rgb(185 174 169 / 30%);
  position: relative;
  z-index: 2;
}

/* Identify task: the ordered list of sources */
.scraper-source-list .list-group-item,
.list-group-item {
  background: var(--leather-surface);
  border-color: #000;
  color: var(--leather-text);
}

.identify-source-editor .default-value {
  color: var(--leather-text-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, so each of those moves down by
 * --leather-nav-height. On a phone held upright the bar is at the bottom.
 */
body {
  padding-top: var(--leather-nav-height);
}

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

.sidebar-toggle-button-container .sidebar-toggle-button {
  background: var(--leather-tex) var(--leather-raised);
  border-color: #000;
  opacity: 1;
  top: calc(var(--leather-nav-height) + 0.5rem);
}

.sticky.detail-header {
  top: var(--leather-nav-height);
}

/* The task queue at the top of Settings > Tasks sticks under the bar */
#tasks-panel .tasks-panel-queue {
  background-color: var(--leather-bg);
  top: var(--leather-nav-height);
}

#queue-viewer .queue-controls {
  background-color: var(--leather-bg);
}

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

/*
 * Bootstrap's progress bars, as in a running job or a bracket in Cherry Pick:
 * a red strap pressed into a debossed groove
 */
.progress {
  background: var(--leather-well);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 85%),
    0 1px 0 rgb(255 255 255 / 7%);
}

.progress .progress-bar {
  background: linear-gradient(
    180deg,
    var(--leather-blood-hi),
    var(--leather-thread-red)
  );
  color: #fff;
  font-family: var(--leather-font-label);
  letter-spacing: 0.06em;
}

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

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

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

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

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

.item-list-container .filtered-list-toolbar.has-selection {
  background: var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  box-shadow: 0 10px 22px -12px #000;
}

.sidebar-pane .sidebar,
.sidebar {
  background: var(--leather-tex) var(--leather-surface);
  border-right: 1px solid #000;
  box-shadow:
    inset -1px 0 0 rgb(255 255 255 / 5%),
    8px 0 18px -10px #000;
}

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

.sidebar-section + .sidebar-section {
  border-top: 1px dashed rgb(185 174 169 / 22%);
}

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

.paginationIndex {
  color: var(--leather-text-dim);
  font-family: var(--leather-font-label);
  letter-spacing: 0.1em;
}

/* Tabs: the active tab is a raised leather flap with a red edge */
.nav-tabs {
  border-bottom: 2px solid #000;
  box-shadow: 0 1px 0 rgb(255 255 255 / 5%);
  gap: 0.2rem;
}

.nav-tabs .nav-link {
  background: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  color: var(--leather-text-muted);
  font-family: var(--leather-font-label);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background: var(--leather-tex) var(--leather-raised);
  border-color: #000;
  box-shadow:
    inset 0 3px 0 var(--leather-blood-hi),
    inset 0 4px 0 rgb(0 0 0 / 40%);
  color: #fff;
}

/* Settings and other pill navs */
.nav-pills .nav-link {
  border-radius: 4px;
  color: var(--leather-text-muted);
  font-family: var(--leather-font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--leather-grain), var(--leather-blood-dye);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    0 0 0 1px #000;
  color: #fff;
  outline: 1px dashed rgb(255 235 238 / 55%);
  outline-offset: -4px;
}

/* Settings: blackletter section titles, the rest on the system font */
.setting-section > h1 {
  color: var(--leather-text);
  text-shadow: 0 2px 0 #000;
}

.setting-section .setting h3,
.setting-section .sub-heading {
  font-family: var(--leather-font-body);
}

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

/*
 * Stash builds the page count and its dropdown as one split button, with only
 * 5px on the sides where they join (three classes deep). Each half is its own
 * stitched piece here, so both get room inside their stitching. Oswald sets « < > » at lowercase
 * height, so the arrow buttons lift them to the middle of the caps.
 */
.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;
}

.pagination > .btn[title] {
  padding-bottom: 7.25px;
  padding-top: 3.25px;
}

/* Bootstrap's pagination, where Stash uses it */
.page-link {
  background: var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  color: var(--leather-text);
  font-family: var(--leather-font-label);
  font-weight: 500;
  min-width: 2.4rem;
  text-align: center;
}

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

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

.page-link:hover {
  background: var(--leather-tex) var(--leather-raised);
  border-color: #000;
  color: var(--leather-blood-hi);
}

.page-link:focus {
  box-shadow: 0 0 0 3px rgb(224 56 79 / 35%);
}

.page-item.active .page-link {
  background: var(--leather-grain), var(--leather-blood-dye);
  border-color: #000;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
  color: #fff;
  outline: 1px dashed rgb(255 235 238 / 55%);
  outline-offset: -4px;
}

/* Detail pages: a leather header lit blood red from the top */
.detail-header {
  background:
    radial-gradient(
      900px 420px at 20% -120px,
      rgb(176 24 47 / 22%),
      transparent 70%
    ),
    var(--leather-tex) var(--leather-surface);
  border-bottom: 1px solid #000;
  box-shadow: 0 10px 22px -14px #000;
}

.detail-header .performer-name,
.detail-header :is(.studio-name, .tag-name, .group-name),
.scene-header {
  color: var(--leather-text);
  font-family: var(--leather-font-display);
  font-weight: 700;
  text-shadow:
    0 -1px 0 #000,
    0 2px 0 rgb(0 0 0 / 80%);
}

.detail-item-title {
  color: var(--leather-text-dim);
  font-family: var(--leather-font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* video.js player */
.video-js .vjs-control-bar {
  background-color: transparent;
  background-image: linear-gradient(
    0deg,
    rgb(12 10 11 / 92%),
    rgb(12 10 11 / 0%)
  );
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
  background-color: var(--leather-blood-hi);
}

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

.video-js .vjs-load-progress,
.video-js .vjs-load-progress div {
  background: rgb(185 174 169 / 25%);
}

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

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

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

:is(#root, .modal) .table td {
  border-top: 1px dashed rgb(185 174 169 / 18%);
}

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

/* 81-suite-tokens.css */
/*
 * Insights from 2.12 and Performers Toolkit from 0.13 work out their own
 * colours from the page and keep them in --sx-* tokens, which their newer
 * rules and charts use directly. Insights keeps the shades in between (row
 * dividers, its error box, tinted verdicts and its calendars' steps) in
 * --ins-* tokens. With a restyle off, those already follow Leather. 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.
 */
.leather-restyle-insights #root #insights,
.leather-restyle-toolkit
  #root
  :is(
    .pt,
    .ptc,
    .pt-strip,
    .pt-entry,
    .pt-fb,
    .pt-side,
    .pt-pane,
    .performer-head[data-pt-tidy]
  ),
.leather-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(--leather-line);
  --sx-deep: var(--leather-well);
  --sx-slab: var(--leather-raised);
  --sx-tx3: var(--tx3);
  --sx-tx2b: var(--tx2b, var(--tx2));
  --sx-tx2: var(--tx2);
  --sx-tx1b: var(--tx1b);
  --sx-tx: var(--tx);
  --sx-hi: var(--hi);
  --sx-grey: var(--tx2);
  --sx-paper: var(--leather-text);
  --sx-on: var(--leather-bg);
  --sx-acc: var(--leather-blood-hi);
  --sx-acc-tx: var(--leather-text);

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

/* Insights draws its calendars' empty days, its rings' tracks and its
   charts' grid lines in --sx-ui, sunk into the panel as its earlier inline
   colours are in 82-insights.css. Its shades in between come from the same
   palette, and its calendars climb from an empty day to the hue in five
   steps: O's, watch time and hours each in their own colour. */
.leather-restyle-insights #root #insights {
  --sx-ui: var(--leather-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 black leather.
 *
 * 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 and the rule
 * that hides the setting waits for the Restyle Insights setting: leather.js
 * puts .leather-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 leather.
 */

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

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

/* Insights' palette in Leather's: black leather panels over darker wells,
   Leather's text tones, and a dye for each tab. You is nickel, Actions
   blood red, Library cognac, Files verdigris, Health the warning amber,
   Collection the success green and Movies plum; links and blue charts are
   steel, and O's are thread, like the flogger */
.leather-restyle-insights #root #insights {
  --bg: var(--leather-bg);
  --bg2: var(--leather-well);
  --ui: var(--leather-surface);
  --ui2: var(--leather-raised);
  --ui3: var(--leather-line);
  --tx3: var(--leather-text-faint);
  --tx2b: var(--leather-text-dim);
  --tx2: var(--leather-text-dim);
  --tx1b: var(--leather-text-muted);
  --tx: var(--leather-text);
  --hi: #fff;
  --re: var(--leather-blood-hi);
  --or: var(--leather-cognac);
  --ye: var(--leather-warning);
  --gr: var(--leather-success);
  --cy: var(--leather-verdigris);
  --bl: var(--leather-steel);
  --pu: var(--leather-plum);
  --ma: var(--leather-nickel);
  --up: var(--leather-success);
  --down: var(--leather-danger);
  --o: var(--leather-thread);
  --otx: var(--leather-thread);

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

/* The head: the name in blackletter beside a stud, as in the navbar, and
   the tabs as Stash's tabs, the open one a raised flap with a red edge */
.leather-restyle-insights #root #insights .ins-head {
  border-bottom: 2px solid #000;
  box-shadow: 0 1px 0 rgb(255 255 255 / 5%);
  margin-bottom: 20px;
}

.leather-restyle-insights #root #insights .ins-title {
  color: var(--leather-text);
  font-family: var(--leather-font-display);
  font-size: 2.2rem;
  font-weight: 700;
  gap: 0.6rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-shadow: 0 2px 0 #000;
}

.leather-restyle-insights #root #insights .ins-title .ins-ic {
  display: none;
}

.leather-restyle-insights #root #insights .ins-title::before {
  background: var(--leather-stud-face);
  box-shadow:
    0 0 0 1px #000,
    0 2px 3px rgb(0 0 0 / 70%);
  content: '';
  flex: none;
  height: 13px;
  margin-top: 0.2rem;
  width: 13px;
}

.leather-restyle-insights #root #insights .ins-meta {
  font-family: var(--leather-font-label);
  letter-spacing: 0.06em;
}

.leather-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;
}

.leather-restyle-insights #root #insights .ins-tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  box-shadow: none;
  color: var(--leather-text-muted);
  font-family: var(--leather-font-label);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 0.55rem 0.8rem 0.6rem;
  text-transform: uppercase;
}

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

.leather-restyle-insights #root #insights .ins-tab.on {
  background: var(--leather-tex) var(--leather-raised);
  border-color: #000;
  box-shadow:
    inset 0 3px 0 var(--leather-blood-hi),
    inset 0 4px 0 rgb(0 0 0 / 40%);
  color: #fff;
}

/* Cards are stitched leather, as Stash's own */
.leather-restyle-insights #root #insights .ins-card {
  background: var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: var(--leather-radius);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    inset 0 -1px 0 rgb(0 0 0 / 60%),
    0 2px 4px rgb(0 0 0 / 50%),
    0 14px 26px -16px #000;
}

.leather-restyle-insights #root #insights .ins-card::after {
  border: 6px solid transparent;
  border-image: var(--leather-stitch) 10 round;
  content: '';
  inset: 1px;
  pointer-events: none;
  position: absolute;
}

.leather-restyle-insights
  #root
  #insights
  :is(.ins-tile.click, .ins-pull):hover {
  border-color: #000;
}

.leather-restyle-insights
  #root
  #insights
  :is(.ins-tile.click, .ins-pull):hover::after {
  border-image-source: var(--leather-stitch-red);
}

/* Card titles in blackletter */
.leather-restyle-insights #root #insights .ins-ch > b {
  font-family: var(--leather-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.leather-restyle-insights #root #insights :is(.ins-badge, .ins-sq) {
  border-color: #000;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 1px 2px rgb(0 0 0 / 60%);
}

/* A tile's colour edge is dyed into the leather, without a glow */
.leather-restyle-insights #root #insights .ins-tile::before {
  box-shadow: none;
  width: 5px;
}

/* Numbers in Oswald, never in blackletter, and small caps in Oswald's
   letterspaced capitals */
.leather-restyle-insights
  #root
  #insights
  :is(
    .ins-hero .big,
    .ins-ch .r b,
    .ins-tile .v,
    .ins-stats b,
    .ins-nb .v,
    .ins-hubt b,
    .ins-ring .mid b,
    .ins-hkn
  ) {
  font-family: var(--leather-font-label);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
}

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

/* Wells, where the charts sit, are debossed into the panel and flat, so the
   grain never runs behind a bar */
.leather-restyle-insights #root #insights :is(.ins-well, .ins-hubqueue) {
  background: var(--leather-well);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 1px 0 rgb(255 255 255 / 7%);
}

/* Chips and switches are debossed like Stash's fields */
.leather-restyle-insights
  #root
  #insights
  :is(.ins-chip, .ins-nav, .ins-pill, .ins-seg, .ins-hchip) {
  background:
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 35%)),
    var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 1px 0 rgb(255 255 255 / 7%);
}

.leather-restyle-insights #root #insights :is(.ins-chip, .ins-seg button) {
  font-family: var(--leather-font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The chosen chip of a row is pressed into oxblood with a stitch, as in
   Stash's button groups */
.leather-restyle-insights
  #root
  #insights
  :is(.ins-chip.on, .ins-seg button.on) {
  background: var(--leather-grain), var(--leather-ox-dye);
  border-color: #000;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 60%),
    0 1px 0 rgb(255 255 255 / 6%);
  color: #fff;
  outline: 1px dashed rgb(255 214 220 / 50%);
  outline-offset: -4px;
}

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

/* The chosen row of What works is a blood-red patch, as in Stash's pill
   navs */
.leather-restyle-insights #root #insights .ins-side-b {
  border-radius: 4px;
  font-family: var(--leather-font-label);
  letter-spacing: 0.06em;
}

.leather-restyle-insights #root #insights .ins-side-b.on {
  background: var(--leather-grain), var(--leather-blood-dye);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    0 0 0 1px #000;
  color: #fff;
  outline: 1px dashed rgb(255 235 238 / 55%);
  outline-offset: -4px;
}

/* Buttons are dyed leather with an inner stitch, as Stash's: black leather,
   blood red with two rivets for the one that goes ahead, bright red for the
   one that deletes. The stitch hangs off ::after, because the Refresh button
   shows its busy dot in ::before. */
.leather-restyle-insights #root #insights .ins-btn {
  background: var(--leather-tex) var(--leather-raised);
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    inset 0 -2px 0 rgb(0 0 0 / 35%),
    0 2px 3px rgb(0 0 0 / 55%);
  color: var(--leather-text);
  font-family: var(--leather-font-label);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.85rem;
  position: relative;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 55%);
  text-transform: uppercase;
  transition:
    transform var(--leather-fast) var(--leather-ease),
    filter var(--leather-fast) var(--leather-ease);
}

.leather-restyle-insights #root #insights .ins-btn::after {
  border: 5px solid transparent;
  border-image: var(--leather-stitch) 10 round;
  content: '';
  inset: 1px;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
}

.leather-restyle-insights #root #insights .ins-btn:not(:disabled):hover {
  color: #fff;
}

.leather-restyle-insights #root #insights .ins-btn:not(:disabled):hover::after {
  border-image-source: var(--leather-stitch-red);
}

.leather-restyle-insights #root #insights .ins-btn:not(:disabled):active {
  box-shadow:
    inset 0 2px 5px rgb(0 0 0 / 80%),
    inset 0 -1px 0 rgb(255 255 255 / 6%),
    0 1px 0 rgb(255 255 255 / 6%);
  transform: translateY(1px);
}

.leather-restyle-insights #root #insights .ins-btn.ins-pri {
  background:
    radial-gradient(
      circle at 10.2px calc(50% - 1px),
      #fff 0 0.8px,
      #e8e8ec 1.5px,
      #a3a3aa 2.5px,
      #55555c 3.4px,
      #050405 4px,
      transparent 4.5px
    ),
    radial-gradient(
      circle at calc(100% - 11.8px) calc(50% - 1px),
      #fff 0 0.8px,
      #e8e8ec 1.5px,
      #a3a3aa 2.5px,
      #55555c 3.4px,
      #050405 4px,
      transparent 4.5px
    ),
    var(--leather-grain), var(--leather-blood-dye);
  color: #fff;
  padding-inline: 1.5rem;
}

.leather-restyle-insights #root #insights .ins-btn.ins-pri:not(:disabled):hover,
.leather-restyle-insights #root #insights .ins-btn.danger:not(:disabled):hover {
  filter: brightness(1.12);
}

.leather-restyle-insights #root #insights .ins-btn.danger {
  background:
    var(--leather-grain),
    linear-gradient(180deg, #ec2f48 0%, #c41b33 50%, #911226 100%);
  color: #fff;
}

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

.leather-restyle-insights #root #insights .ins-btn:disabled {
  box-shadow: none;
  filter: saturate(0.25) brightness(0.75);
  opacity: 0.5;
}

/* Links read as Stash's: the text with a dashed red underline */
.leather-restyle-insights #root #insights :is(.ins-go, .ins-hlink) {
  color: var(--leather-text);
  text-decoration: underline dashed var(--leather-blood-hi) 1px;
  text-underline-offset: 4px;
}

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

.leather-restyle-insights #root #insights .ins-go .ins-ic {
  color: var(--leather-blood-hi);
}

/* Rules between rows are a faint stitch */
.leather-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: 1px dashed rgb(185 174 169 / 16%);
}

.leather-restyle-insights #root #insights .ins-con tr + tr td {
  border-top: 1px dashed rgb(185 174 169 / 16%);
}

.leather-restyle-insights #root #insights .ins-hkc {
  background: var(--leather-tex) var(--leather-raised);
  border-color: #000;
  border-radius: 4px;
}

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

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

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

.leather-restyle-insights #root #insights .ins-error {
  background: color-mix(
    in srgb,
    var(--leather-danger) 12%,
    var(--leather-surface)
  );
  border-color: #000;
  border-radius: var(--leather-radius);
  box-shadow: inset 5px 0 0 var(--leather-danger);
  color: var(--leather-text);
}

/* Ticked copies are dyed blood red, as Stash's checkboxes; switches are a
   leather strap with a nickel snap */
.leather-restyle-insights #root #insights .ins-bx {
  border-color: #000;
  border-radius: 3px;
}

.leather-restyle-insights #root #insights .ins-bx.on {
  background: var(--leather-grain), var(--leather-blood-dye);
}

.leather-restyle-insights #root #insights .ins-bx.on::after {
  border-color: #fff;
}

.leather-restyle-insights #root #insights .ins-tog i {
  background:
    linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 25%)),
    var(--leather-tex) var(--leather-surface);
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 1px 3px rgb(0 0 0 / 90%);
}

.leather-restyle-insights #root #insights .ins-tog.on i {
  background: var(--leather-grain), var(--leather-ox-dye);
}

.leather-restyle-insights #root #insights .ins-tog i::after {
  background: radial-gradient(
    circle at 36% 30%,
    #fff 0 8%,
    #e1e1e6 24%,
    #9a9aa1 60%,
    #4a4a50 100%
  );
  box-shadow:
    0 0 0 1px #000,
    0 1px 2px rgb(0 0 0 / 80%);
}

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

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

.leather-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 */
.leather-restyle-insights
  #root
  #insights
  :is(.ins-cal, .ins-hm, .ins-legend)
  i[style*='#282726' i] {
  background: var(--leather-well) !important;
}

/* The tag picked in Top tags, whose row carries its colour as --c */
.leather-restyle-insights #root #insights .ins-row[style*='--c:#A9BA5A' i] {
  --c: color-mix(in srgb, var(--leather-success) 55%, #fff) !important;
}

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

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

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

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

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

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

/* Its tooltip is stitched leather, like Stash's in Leather, in sentence
   case for its longer lines. It sits on <body>, outside #insights. */
.leather-restyle-insights #ins-tip {
  background: var(--leather-tex) var(--leather-raised);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 60%);
  color: var(--leather-text);
  font-family: var(--leather-font-label);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  outline: 1px dashed rgb(185 174 169 / 45%);
  outline-offset: -4px;
  padding: 0.55rem 0.85rem;
}

/* 83-performers-toolkit.css */
/*
 * Performers Toolkit, another author's plugin from the same suite as
 * Insights (gitlab.com/allisless0/stash-plugins), in black leather: 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
 * Leather 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
 * (.leather-restyle-toolkit on <html>, from leather.js), but for the two
 * that follow.
 * It places its toast and its review bar on a phone from Stash's navbar, so
 * Leather'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-Leather-restylePerformersToolkit']) {
  display: none;
}

/* The count on the Catalog tab is a Stash badge, which Leather dresses as a
   black leather tag, but it also carries the toolkit's .pt-badge class,
   whose near-black type loads after Leather's. It keeps Leather's type
   whether the setting is on or not. */
#root .pt-tablink .badge.pt-badge {
  color: var(--leather-text);
}

/* Its palette in Leather's, as for Insights. Each tab's accent follows:
   steel for Find and Performers, plum for History, green for Sources and
   cognac 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. */
.leather-restyle-toolkit
  #root
  :is(
    .pt,
    .ptc,
    .pt-strip,
    .pt-entry,
    .pt-fb,
    .pt-side,
    .pt-pane,
    .performer-head[data-pt-tidy]
  ),
.leather-restyle-toolkit :is(#pt-toast, .pt-ov) {
  --bg: var(--leather-bg);
  --bg2: var(--leather-well);
  --ui: var(--leather-surface);
  --ui2: var(--leather-raised);
  --ui3: var(--leather-line);
  --tx3: var(--leather-text-faint);
  --tx2: var(--leather-text-dim);
  --tx1b: var(--leather-text-muted);
  --tx: var(--leather-text);
  --hi: #fff;
  --re: var(--leather-blood-hi);
  --or: var(--leather-cognac);
  --ye: var(--leather-warning);
  --gr: var(--leather-success);
  --cy: var(--leather-verdigris);
  --bl: var(--leather-steel);
  --pu: var(--leather-plum);
  --ma: var(--leather-nickel);
}

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

/* The head: the name in blackletter beside a stud, the tabs as Stash's
   tabs, the open one a raised flap with a red edge */
.leather-restyle-toolkit #root .pt-head {
  border-bottom: 2px solid #000;
  box-shadow: 0 1px 0 rgb(255 255 255 / 5%);
  margin-bottom: 18px;
}

.leather-restyle-toolkit #root .pt-title {
  color: var(--leather-text);
  font-family: var(--leather-font-display);
  font-size: 2.2rem;
  font-weight: 700;
  gap: 0.6rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-right: 0.5rem;
  text-shadow: 0 2px 0 #000;
}

.leather-restyle-toolkit #root .pt-title .pt-ic {
  display: none;
}

.leather-restyle-toolkit #root .pt-title::before {
  background: var(--leather-stud-face);
  box-shadow:
    0 0 0 1px #000,
    0 2px 3px rgb(0 0 0 / 70%);
  content: '';
  flex: none;
  height: 13px;
  margin-top: 0.2rem;
  width: 13px;
}

.leather-restyle-toolkit #root .pt-read {
  font-family: var(--leather-font-label);
  letter-spacing: 0.06em;
}

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

.leather-restyle-toolkit #root .pt-tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  box-shadow: none;
  color: var(--leather-text-muted);
  font-family: var(--leather-font-label);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 0.55rem 0.8rem 0.6rem;
  text-transform: uppercase;
}

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

.leather-restyle-toolkit #root .pt-tab.on {
  background: var(--leather-tex) var(--leather-raised);
  border-color: #000;
  box-shadow:
    inset 0 3px 0 var(--leather-blood-hi),
    inset 0 4px 0 rgb(0 0 0 / 40%);
  color: #fff;
}

/* Cards, the review bar, the catalog's cards and the Stats tab's figures
   and charts are stitched leather, as Stash's own. A card's kind (a
   message, a run, an error) is a dye along its top edge. */
.leather-restyle-toolkit
  #root
  :is(.pt-card, .pt-mcard, .pt-ccard, .pt-rvbar, .pt-kpi, .pt-cc) {
  background: var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: var(--leather-radius);
  box-shadow:
    inset 0 3px 0 var(--leather-pt-edge, transparent),
    inset 0 1px 0 rgb(255 255 255 / 7%),
    inset 0 -1px 0 rgb(0 0 0 / 60%),
    0 2px 4px rgb(0 0 0 / 50%),
    0 14px 26px -16px #000;
}

/* The review bar sticks, and on a phone is fixed, so it keeps its own
   position */
.leather-restyle-toolkit
  #root
  :is(.pt-card, .pt-mcard, .pt-ccard, .pt-kpi, .pt-cc) {
  position: relative;
}

.leather-restyle-toolkit
  #root
  :is(.pt-card, .pt-mcard, .pt-ccard, .pt-rvbar, .pt-kpi, .pt-cc)::after {
  border: 6px solid transparent;
  border-image: var(--leather-stitch) 10 round;
  content: '';
  inset: 1px;
  pointer-events: none;
  position: absolute;
}

.leather-restyle-toolkit
  #root
  :is(.pt-card.pt-msg, .pt-card.pt-runend, .pt-mcard.ex) {
  --leather-pt-edge: var(--leather-success);
}

.leather-restyle-toolkit #root :is(.pt-card.pt-busy, .pt-card.pt-run) {
  --leather-pt-edge: var(--leather-verdigris);
}

.leather-restyle-toolkit #root .pt-card.pt-err {
  --leather-pt-edge: var(--leather-danger);
}

/* Its sheets are dialogs: stitched leather over a darkened page, like
   Stash's modals in Leather. A sheet scrolls, so its stitch is its own
   border, which the content scrolls inside, as in Leather's menus. */
.leather-restyle-toolkit #root .pt-veil {
  background: rgb(0 0 0 / 75%);
}

.leather-restyle-toolkit #root .pt-sheet {
  background: var(--leather-tex) var(--leather-surface);
  border: 7px solid transparent;
  border-image: var(--leather-stitch) 10 / 6px round;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px #000,
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 30px 60px -20px #000;
  padding: 12px;
}

/* The titles of cards and sheets in blackletter; numbers in Oswald, never
   in blackletter, and small caps in Oswald's letterspaced capitals */
.leather-restyle-toolkit
  #root
  :is(
    .pt-card > .pt-ch > b,
    .pt-sheet > .pt-ch > b,
    .pt-flowt,
    .pt-herot > b,
    .pt-cct,
    .pt-s3t
  ) {
  font-family: var(--leather-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.leather-restyle-toolkit #root :is(.pt-card, .pt-sheet) > .pt-ch > b {
  font-size: 1.35rem;
}

.leather-restyle-toolkit #root .pt-flowt {
  font-size: 1.6rem;
}

.leather-restyle-toolkit #root .pt-herot > b {
  font-size: 1.4rem;
}

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

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

.leather-restyle-toolkit #root .pt-strip {
  font-family: var(--leather-font-label);
  letter-spacing: 0.06em;
}

/* Fields are debossed into the leather, and focus runs a red stitch */
.leather-restyle-toolkit
  #root
  :is(.pt-input, .pt-sel, .pt-acct select, .pt-seg select) {
  background:
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 35%)),
    var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 1px 0 rgb(255 255 255 / 7%);
  color: var(--leather-text);
}

.leather-restyle-toolkit #root :is(.pt-input, .pt-sel, .pt-acct select):focus {
  border-color: #000;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 0 0 1px var(--leather-blood),
    0 0 0 4px rgb(176 24 47 / 28%);
  outline: 1.5px dashed var(--leather-thread-red);
  outline-offset: -5px;
}

/* Chips, pills, steps and switches are debossed the same way */
.leather-restyle-toolkit
  #root
  :is(.pt-chip, .pt-pill, .pt-tog, .pt-step, .pt-rc, .pt-box) {
  background:
    linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 35%)),
    var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 1px 0 rgb(255 255 255 / 7%);
}

.leather-restyle-toolkit #root :is(.pt-chip, .pt-step) {
  font-family: var(--leather-font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Wells, and the cards that sit inside a panel, are flat and debossed, so
   the grain never runs behind a picture or a number */
.leather-restyle-toolkit
  #root
  :is(
    .pt-frow,
    .pt-way,
    .pt-src1,
    .pt-boxr,
    .pt-edit,
    .pt-none,
    .pt-ct,
    .pt-sc,
    .pt-scard,
    .pt-cand,
    .pt-dcard,
    .pt-prow,
    .pt-banner,
    .pt-wait
  ) {
  background-color: var(--leather-well);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 85%),
    0 1px 0 rgb(255 255 255 / 7%);
}

.leather-restyle-toolkit #root :is(.pt-fbr, .pt-rec, .pt-dup) {
  border-radius: 4px;
}

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

/* The chosen chip or step is pressed into oxblood with a stitch, as in
   Stash's button groups */
.leather-restyle-toolkit #root :is(.pt-chip.on, .pt-step.on) {
  background: var(--leather-grain), var(--leather-ox-dye);
  border-color: #000;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 60%),
    0 1px 0 rgb(255 255 255 / 6%);
  color: #fff;
  outline: 1px dashed rgb(255 214 220 / 50%);
  outline-offset: -4px;
}

.leather-restyle-toolkit #root .pt-step b {
  border-radius: 3px;
  font-family: var(--leather-font-label);
}

/* The open step's number is a nickel stud */
.leather-restyle-toolkit #root .pt-step.on b {
  background: var(--leather-nickel-grad);
  box-shadow: 0 0 0 1px #000;
}

/* A chosen card in a list takes a blood-red edge, as the chosen result
   does in Stash's Tagger */
.leather-restyle-toolkit
  #root
  :is(.pt-sc.on, .pt-cand.on, .pt-scard.on, .pt-dcard.on, .pt-prow.on) {
  background: linear-gradient(90deg, rgb(176 24 47 / 16%), transparent 55%)
    var(--leather-raised);
  border-color: #000;
  box-shadow: inset 3px 0 0 var(--leather-blood-hi);
}

.leather-restyle-toolkit
  #root
  :is(.pt-sc, .pt-scard, .pt-cand, .pt-dcard):focus-visible {
  outline-color: var(--leather-blood-hi);
}

/* Pictures are set in like a window */
.leather-restyle-toolkit
  #root
  :is(
    .pt-shot,
    .pt-pbig,
    .pt-gcell,
    .pt-pc,
    .pt-thumb,
    .pt-srimg,
    .pt-sccov,
    .pt-cimg,
    .pt-mcov,
    .pt-ava
  ) {
  background-color: #000;
  border-color: #000;
  border-radius: 3px;
}

.leather-restyle-toolkit #root :is(.pt kbd, .pt-sccov kbd, .pt-ckey kbd) {
  border-color: #000;
  border-radius: 3px;
  font-family: var(--leather-font-label);
  letter-spacing: 0.06em;
}

/* Buttons are dyed leather with an inner stitch, as Stash's: black leather,
   blood red with two rivets for the one that goes ahead, bright red for the
   one that deletes */
.leather-restyle-toolkit #root .pt-btn {
  background: var(--leather-tex) var(--leather-raised);
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    inset 0 -2px 0 rgb(0 0 0 / 35%),
    0 2px 3px rgb(0 0 0 / 55%);
  color: var(--leather-text);
  font-family: var(--leather-font-label);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.85rem;
  position: relative;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 55%);
  text-transform: uppercase;
  transition:
    transform var(--leather-fast) var(--leather-ease),
    filter var(--leather-fast) var(--leather-ease);
}

.leather-restyle-toolkit #root .pt-btn::after {
  border: 5px solid transparent;
  border-image: var(--leather-stitch) 10 round;
  content: '';
  inset: 1px;
  opacity: 0.9;
  pointer-events: none;
  position: absolute;
}

.leather-restyle-toolkit #root .pt-btn.pt-sm {
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
}

.leather-restyle-toolkit #root .pt-btn.pt-big {
  font-size: 0.86rem;
  padding: 0.55rem 1rem;
}

.leather-restyle-toolkit #root .pt-btn:not(:disabled):hover {
  color: #fff;
}

.leather-restyle-toolkit #root .pt-btn:not(:disabled):hover::after {
  border-image-source: var(--leather-stitch-red);
}

.leather-restyle-toolkit #root .pt-btn:not(:disabled):active {
  box-shadow:
    inset 0 2px 5px rgb(0 0 0 / 80%),
    inset 0 -1px 0 rgb(255 255 255 / 6%),
    0 1px 0 rgb(255 255 255 / 6%);
  transform: translateY(1px);
}

.leather-restyle-toolkit #root .pt-btn.pt-pri {
  background:
    radial-gradient(
      circle at 10.2px calc(50% - 1px),
      #fff 0 0.8px,
      #e8e8ec 1.5px,
      #a3a3aa 2.5px,
      #55555c 3.4px,
      #050405 4px,
      transparent 4.5px
    ),
    radial-gradient(
      circle at calc(100% - 11.8px) calc(50% - 1px),
      #fff 0 0.8px,
      #e8e8ec 1.5px,
      #a3a3aa 2.5px,
      #55555c 3.4px,
      #050405 4px,
      transparent 4.5px
    ),
    var(--leather-grain), var(--leather-blood-dye);
  color: #fff;
  padding-inline: 1.5rem;
}

.leather-restyle-toolkit #root .pt-btn.pt-pri kbd {
  background: rgb(0 0 0 / 25%);
  border-color: rgb(0 0 0 / 45%);
  color: #fff;
}

.leather-restyle-toolkit #root .pt-btn.pt-danger {
  background:
    var(--leather-grain),
    linear-gradient(180deg, #ec2f48 0%, #c41b33 50%, #911226 100%);
  color: #fff;
}

.leather-restyle-toolkit
  #root
  :is(.pt-btn.pt-pri, .pt-btn.pt-danger):not(:disabled):hover {
  filter: brightness(1.12);
}

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

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

.leather-restyle-toolkit #root .pt-btn:disabled {
  box-shadow: none;
  filter: saturate(0.25) brightness(0.75);
  opacity: 0.5;
}

/* Switches are a leather strap with a nickel snap */
.leather-restyle-toolkit #root .pt-tog i {
  background:
    linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 25%)),
    var(--leather-tex) var(--leather-surface);
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 1px 3px rgb(0 0 0 / 90%);
}

.leather-restyle-toolkit #root .pt-tog.on i {
  background: var(--leather-grain), var(--leather-ox-dye);
}

.leather-restyle-toolkit #root .pt-tog i::after,
.leather-restyle-toolkit #root .pt-tog.on i::after {
  background: radial-gradient(
    circle at 36% 30%,
    #fff 0 8%,
    #e1e1e6 24%,
    #9a9aa1 60%,
    #4a4a50 100%
  );
  box-shadow:
    0 0 0 1px #000,
    0 1px 2px rgb(0 0 0 / 80%);
}

/* Links read as Stash's: the text with a dashed red underline, red on
   hover */
.leather-restyle-toolkit #root :is(.pt-link, a.pt-pill),
.leather-restyle-toolkit #pt-toast .pt-link {
  color: var(--leather-text);
  text-decoration: underline dashed var(--leather-blood-hi) 1px;
  text-underline-offset: 4px;
}

.leather-restyle-toolkit #root .pt-link .pt-ic {
  color: var(--leather-blood-hi);
}

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

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

/* Good and bad in Leather's status tones */
.leather-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(--leather-success);
}

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

/* Black 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 Leather's
   tag rules already colour. */
.leather-restyle-toolkit
  #root
  :is(
    .pt-badge:not(.badge),
    .pt-covtag,
    .pt-cpick,
    .pt-dcard.on .pt-dtag,
    .pt-scard.on .pt-scpick,
    .pt-step.on b
  ) {
  color: var(--leather-bg);
}

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

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

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

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

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

.leather-restyle-toolkit #root :is(.pt-sheet, .pt-fbl, .pt-strip, .pt-hitems) {
  scrollbar-color: #3b3034 transparent;
}

/* Its toast is stitched leather with its kind dyed along the left edge,
   like Stash's toasts in Leather */
.leather-restyle-toolkit #pt-toast {
  --tk: var(--leather-steel);

  background: var(--leather-tex) var(--leather-surface);
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow:
    inset 5px 0 0 var(--tk),
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 14px 28px -12px #000;
  color: var(--leather-text);
  outline: 1px dashed rgb(185 174 169 / 45%);
  outline-offset: -5px;
  padding: 10px 16px 10px 20px;
}

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

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

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

/* 85-loading.css */
/*
 * Loading: three pyramid studs light up in turn, in place of Bootstrap's
 * spinner. The light is a registered custom property, so it can animate.
 */
.LoadingIndicator .spinner-border,
.LoadingIndicator .spinner-border::before,
.LoadingIndicator .spinner-border::after {
  background: conic-gradient(
    from -45deg,
    color-mix(in srgb, #fff var(--leather-lit), #5c5c63) 0 25%,
    color-mix(in srgb, #9c9ca3 var(--leather-lit), #2f2f34) 0 50%,
    color-mix(in srgb, #5f5f66 var(--leather-lit), #1c1c20) 0 75%,
    color-mix(in srgb, #d6d6db var(--leather-lit), #45454b) 0
  );
  border: 0;
  border-radius: 1px;
  box-shadow:
    0 0 0 1px #000,
    0 0 16px 1px
      color-mix(in srgb, rgb(224 56 79 / 85%) var(--leather-lit), transparent);
  height: 20px;
  width: 20px;
}

.LoadingIndicator .spinner-border {
  animation: leather-lit 1.2s ease-in-out 0.2s infinite;
  margin: 0.6rem 32px;
  position: relative;
}

.LoadingIndicator .spinner-border::before,
.LoadingIndicator .spinner-border::after {
  animation: leather-lit 1.2s ease-in-out infinite;
  content: '';
  left: -32px;
  position: absolute;
  top: 0;
}

.LoadingIndicator .spinner-border::after {
  animation-delay: 0.4s;
  left: 32px;
}

/* Small and inline loaders, as in menus and the package manager, keep one stud */
.LoadingIndicator:is(.small, .inline) .spinner-border,
.saved-filter-list-menu .LoadingIndicator .spinner-border {
  height: 12px;
  margin: 0 0.25rem;
  width: 12px;
}

.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(--leather-text);
  font-family: var(--leather-font-display);
  font-size: 1.75rem;
  font-weight: 700;
}

/* 90-motion.css */
/* Keyframes, burst particles and the calm switch */
@keyframes leather-lit {
  0%,
  70%,
  100% {
    --leather-lit: 0%;
  }

  30% {
    --leather-lit: 100%;
  }
}

@keyframes leather-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.12),
        calc(-50% + var(--dy) + 16px)
      )
      rotate(calc(var(--spin) * 2)) scale(0.9);
  }
}

/* Bursts: nickel studs and O-rings fly off, with a few red sparks */
.leather-burst {
  animation: leather-fly 700ms cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
  background:
    radial-gradient(30% 14% at 44% 22%, rgb(255 255 255 / 90%), transparent),
    var(--leather-stud-face);
  box-shadow: 0 0 0 0.5px #000;
  height: 10px;
  pointer-events: none;
  position: fixed;
  width: 10px;
  z-index: 2000;
}

.leather-burst.is-ring {
  background: var(--leather-ring-face);
  border-radius: 50%;
  box-shadow: none;
  height: 13px;
  mask: radial-gradient(
    circle,
    transparent 3.4px,
    #000 4px 6px,
    transparent 6.5px
  );
  width: 13px;
}

.leather-burst.is-spark {
  background: linear-gradient(
    90deg,
    transparent,
    #ff6075 40%,
    #fff 60%,
    transparent
  );
  border-radius: 2px;
  box-shadow: 0 0 6px #e0384f;
  height: 2px;
  width: 13px;
}

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

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

.leather-calm .LoadingIndicator .spinner-border,
.leather-calm .LoadingIndicator .spinner-border::before,
.leather-calm .LoadingIndicator .spinner-border::after {
  --leather-lit: 70%;
}

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

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

  .LoadingIndicator .spinner-border,
  .LoadingIndicator .spinner-border::before,
  .LoadingIndicator .spinner-border::after {
    --leather-lit: 70%;
  }

  .leather-burst {
    display: none;
  }
}

/* 95-sfw.css */
/*
 * Empty states: the collar and a short order. Stash marks an empty list with
 * nothing but "0-0 of 0" in .paginationIndex, and leather.js adds the line.
 */
.leather-empty,
.paginationIndex[data-leather-empty] {
  align-items: center;
  color: var(--leather-text);
  display: flex;
  flex-direction: column;
  font-family: var(--leather-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
}

.leather-empty::before,
.paginationIndex[data-leather-empty]::before {
  background: url('assets/icons/collar.webp') center / contain no-repeat;
  content: '';
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 60%));
  height: 76px;
  width: 76px;
}

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

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

/*
 * Stash's SFW content mode keeps the leather and the studs and drops the
 * collar: the favourite is a stud that turns blood red, bursts lose their
 * sparks, and an empty list shows an O-ring with no line. Stash swaps the O
 * counter for a thumbs-up of its own, which the flogger mask skips.
 */
.sfw-content-mode .favorite-button svg {
  mask-image: url('assets/icons/glyph-stud.svg');
  mask-size: 80%;
}

.sfw-content-mode .favorite-button.favorite svg {
  background:
    radial-gradient(16% 9% at 34% 33%, rgb(255 255 255 / 70%), transparent),
    var(--leather-blood-dye);
}

body:has(.sfw-content-mode) .leather-empty::before,
body:has(.sfw-content-mode) .paginationIndex[data-leather-empty]::before {
  background: var(--leather-ring-face);
  border-radius: 50%;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 70%));
  height: 64px;
  mask: radial-gradient(
    circle,
    transparent 20px,
    #000 21px 31px,
    transparent 32px
  );
  width: 64px;
}