/* 00-fonts.css */
/*
 * Chakra Petch and Share Tech Mono (both SIL OFL 1.1), bundled because Stash's
 * CSP blocks web font hosts. Overclock's own family names keep a copy
 * installed on the viewer's system from standing in.
 */

@font-face {
  font-display: swap;
  font-family: 'Overclock Chakra';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/chakra-petch/chakra-petch-latin-ext-500-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: 'Overclock Chakra';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/chakra-petch/chakra-petch-latin-500-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: 'Overclock Chakra';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/chakra-petch/chakra-petch-latin-ext-600-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: 'Overclock Chakra';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/chakra-petch/chakra-petch-latin-600-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: 'Overclock Chakra';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/chakra-petch/chakra-petch-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: 'Overclock Chakra';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/chakra-petch/chakra-petch-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: 'Overclock Mono';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/share-tech-mono/share-tech-mono-latin-400-normal.woff2')
    format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* 01-tokens.css */
/*
 * Overclock 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() in this theme resolves against overclock.css.
 */

/*
 * Registered so they animate (readouts that count, the blinking caret) or
 * stay on the element that sets them: --overclock-cut is the 45° corner cut,
 * and a child never inherits its parent's.
 */
@property --overclock-cut {
  inherits: false;
  initial-value: 8px;
  syntax: '<length>';
}

@property --overclock-pct {
  inherits: false;
  initial-value: 0;
  syntax: '<integer>';
}

@property --overclock-sec {
  inherits: false;
  initial-value: 0;
  syntax: '<integer>';
}

@property --overclock-min {
  inherits: false;
  initial-value: 0;
  syntax: '<integer>';
}

@property --overclock-caret {
  inherits: false;
  initial-value: transparent;
  syntax: '<color>';
}

:root {
  color-scheme: dark;
  accent-color: #f3e600;

  /* Signals */
  --overclock-yellow: #f3e600;
  --overclock-yellow-hi: #fff46b;
  --overclock-yellow-lo: #8f8700;
  --overclock-cyan: #00e5ff;
  --overclock-cyan-lo: #0a7f8f;
  --overclock-red: #ff1f4b;
  --overclock-red-hi: #ff5c7c;
  --overclock-magenta: #ff2fd0;

  /* Four more signals, for the tabs and charts of the plugins Overclock
     restyles (82-insights.css, 83-performers-toolkit.css) only */
  --overclock-orange: #ff8a1f;
  --overclock-green: #4dff6a;
  --overclock-blue: #4a8dff;
  --overclock-blue-hi: #8cb6ff;
  --overclock-violet: #a66bff;

  /* Surfaces, from the void forward */
  --overclock-void: #050506;
  --overclock-bg: #0a0a0c;
  --overclock-field: #070b0c;
  --overclock-panel: #0d1416;
  --overclock-control: #0f1b1e;
  --overclock-chip: #0f1d21;
  --overclock-raised: #122024;
  --overclock-rule: #24363b;
  --overclock-line: #3b5a60;
  --overclock-black: #0a0a0c;

  /* Text */
  --overclock-text: #e8efee;
  --overclock-muted: #a8bab9;
  --overclock-dim: #86999a;

  /* Hazard stripes mark danger and locked states only */
  --overclock-hazard: repeating-linear-gradient(
    -45deg,
    #f3e600 0 7px,
    #0a0a0c 7px 14px
  );
  --overclock-hazard-dim: repeating-linear-gradient(
    -45deg,
    rgb(243 230 0 / 13%) 0 6px,
    transparent 6px 12px
  );

  /* The red and cyan split a glitch leaves on type */
  --overclock-split:
    -2px 0 0 rgb(255 31 75 / 85%), 2px 0 0 rgb(0 229 255 / 85%);

  /*
   * The navbar is a HUD strip with tick marks under it, taller than Stash's
   * own 48.75px bar. Stash spaces the page, the sidebar and its sticky bars by
   * that height, so 80-pages.css moves them with this.
   */
  --overclock-nav-height: 58px;

  /* Type */
  --overclock-font-display:
    'Overclock Chakra', 'Bahnschrift', 'DIN Alternate', 'Arial Narrow',
    sans-serif;
  --overclock-font-label:
    'Overclock Mono', ui-monospace, 'SF Mono', menlo, consolas, monospace;
  --overclock-font-body:
    system-ui, -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial,
    sans-serif;
}

/* 02-base.css */
/* Page, type, links, focus, selection, the screen layers and the chamfers */
::selection {
  background: var(--overclock-yellow);
  color: var(--overclock-black);
}

body {
  background: var(--overclock-bg);
  color: var(--overclock-text);
}

/*
 * Full-screen layers, fixed, behind the content and still: a faint dot grid
 * with a cyan haze at the edges, and a static scanline. They sit under the
 * pictures, never over them, and cost one paint each.
 */
body::before {
  background:
    radial-gradient(circle, rgb(0 229 255 / 16%) 1px, transparent 1.3px) 0 0 /
      22px 22px,
    radial-gradient(
      60vmax 40vmax at 100% 0%,
      rgb(0 229 255 / 7%),
      transparent 70%
    ),
    radial-gradient(
      50vmax 40vmax at 0% 100%,
      rgb(243 230 0 / 4%),
      transparent 70%
    );
  content: '';
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

body::after {
  background: repeating-linear-gradient(
    0deg,
    rgb(255 255 255 / 2.2%) 0 1px,
    transparent 1px 3px
  );
  content: '';
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

a {
  color: var(--overclock-cyan);
}

a:hover {
  color: var(--overclock-yellow);
}

h1,
h2,
h3,
h4,
h5,
.card-section-title {
  font-family: var(--overclock-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h6 {
  font-family: var(--overclock-font-label);
  font-weight: 400;
  letter-spacing: 0.08em;
}

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

/* Status text, as the Tagger's match icons use it: matches read in cyan */
.text-success {
  color: var(--overclock-cyan) !important;
}

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

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

/*
 * Bootstrap's !important colour utilities, which Stash puts on menus, the
 * selection bar, scrape fields and their toggles: control panels here
 */
.bg-secondary {
  background-color: var(--overclock-control) !important;
}

.bg-dark {
  background-color: var(--overclock-panel) !important;
}

.border-secondary {
  border-color: var(--overclock-line) !important;
}

hr {
  border-top-color: var(--overclock-rule);
}

code {
  color: var(--overclock-cyan);
  font-family: var(--overclock-font-label);
}

:focus-visible {
  outline: 2px solid var(--overclock-cyan);
  outline-offset: 2px;
}

* {
  scrollbar-color: var(--overclock-line) var(--overclock-void);
}

/*
 * Chamfers. One rule: controls clip the bottom-right corner, panels clip the
 * top-left and bottom-right. --overclock-cut is the cut. Borders cannot follow
 * a clip-path, so each clipped element paints its own diagonal edge with a
 * gradient in its own rule. Zero specificity, so any rule can take the cut off.
 */
:where(
  .btn:not(.minimal, .btn-link),
  .top-nav .btn.minimal:not(.brand-link),
  .badge,
  .rating-banner,
  .page-link,
  .nav-tabs .nav-link,
  .tooltip-inner,
  .toast,
  div.dropdown-menu,
  .dropdown-item.active,
  .studio-overlay a,
  .scene-specs-overlay > span,
  .stash-id-pill,
  .grid-card .thumbnail-section > a::after,
  .grid-card .thumbnail-section > a::before
) {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
}

:where(.card, .modal-content, .search-item) {
  clip-path: polygon(
    var(--overclock-cut) 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%,
    0 var(--overclock-cut)
  );
}

/* 10-navbar.css */
/*
 * Navigation: a HUD strip with a yellow underline and tick marks. Stash paints
 * the bar and its folded menu with Bootstrap's !important bg-dark, so these
 * need !important too.
 */
.top-nav.navbar {
  background:
    linear-gradient(90deg, rgb(0 229 255 / 6%) 1px, transparent 1px) 0 0 / 32px
      100%,
    linear-gradient(180deg, #0d1517, #07090a) !important;
  border-bottom: 0;
  font-family: var(--overclock-font-display);
  min-height: var(--overclock-nav-height);
  padding: 0.5rem 1rem 0.7rem;
}

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

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

  /* Stash pads its page links for the folded menu's tiles, with !important */
  .top-nav .navbar-nav .nav-link > .btn.minimal {
    padding: 0.35rem 0.62rem !important;
  }

  .top-nav .navbar-nav .nav-link > .btn.minimal.active {
    padding-left: 1.3rem !important;
  }

  /* The strip reads in words; the icons stay with the folded menu's tiles */
  .top-nav .navbar-collapse .nav-menu-icon {
    display: none !important;
  }
}

/* The underline: a hairline, a heavy yellow segment under the brand, ticks */
.top-nav.navbar::after {
  background:
    linear-gradient(var(--overclock-yellow) 0 0) 0 100% / 100% 1px no-repeat,
    linear-gradient(var(--overclock-yellow) 0 0) 0 100% / 210px 3px no-repeat,
    repeating-linear-gradient(
        90deg,
        var(--overclock-yellow) 0 1px,
        transparent 1px 96px
      )
      0 100% / 100% 8px no-repeat,
    repeating-linear-gradient(
        90deg,
        rgb(0 229 255 / 55%) 0 1px,
        transparent 1px 12px
      )
      0 100% / 100% 4px no-repeat;
  bottom: 0;
  content: '';
  height: 8px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* A mono data label over the right end of the strip */
.top-nav.navbar::before {
  bottom: 3px;
  color: var(--overclock-cyan);
  content: 'SYS.07 // LINK';
  font: 0.55rem/1 var(--overclock-font-label);
  letter-spacing: 0.14em;
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  right: 1rem;
}

.top-nav .btn.minimal {
  --overclock-ink: var(--overclock-muted);

  font-family: var(--overclock-font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.62rem;
  text-transform: uppercase;
}

.top-nav .btn.minimal:not(.brand-link):hover {
  --overclock-ink: var(--overclock-yellow);
}

/* The active page sits in a yellow chamfered tab */
.top-nav .btn.minimal.active,
.top-nav .btn.minimal.active:hover {
  --overclock-fill: var(--overclock-yellow);
  --overclock-ink: var(--overclock-black);
  --overclock-edge: var(--overclock-yellow);
  --overclock-cut: 9px;
}

/* A black status pip inside the active tab */
.top-nav .btn.minimal.active::before {
  background: var(--overclock-black);
  content: '';
  height: 5px;
  left: 0.55rem;
  position: absolute;
  top: calc(50% - 2.5px);
  width: 5px;
}

.top-nav .brand-link.btn.minimal {
  --overclock-ink: var(--overclock-yellow);

  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 0.2rem 0.7rem 0.2rem 2.05rem;
  position: relative;
  text-shadow:
    -1.5px 0 0 rgb(255 47 208 / 65%),
    1.5px 0 0 rgb(0 229 255 / 65%);
}

.top-nav .brand-link.btn.minimal::before {
  background: var(--overclock-yellow);
  content: '';
  height: 1.3rem;
  left: 0.35rem;
  mask: url('assets/icons/glyph-reticle.svg') center / contain no-repeat;
  position: absolute;
  top: calc(50% - 0.65rem);
  width: 1.3rem;
}

.top-nav .brand-link.btn.minimal:hover {
  --overclock-ink: var(--overclock-yellow-hi);
}

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

/* The session clock: it starts when you arrive and it ticks */
.top-nav .navbar-buttons {
  align-items: center;
  column-gap: 0.25rem;
}

.top-nav .navbar-buttons::before {
  --overclock-min: 13;
  --overclock-sec: 37;

  animation:
    overclock-sec 60s steps(60, end) infinite,
    overclock-min 3600s steps(60, end) infinite;
  border: 1px solid var(--overclock-rule);
  border-left: 2px solid var(--overclock-cyan);
  color: var(--overclock-cyan);
  content: 'SES ' counter(overclock-min, decimal-leading-zero) ':'
    counter(overclock-sec, decimal-leading-zero) '  ·  CH.07';
  counter-reset: overclock-min var(--overclock-min) overclock-sec
    var(--overclock-sec);
  font: 0.72rem/1 var(--overclock-font-label);
  letter-spacing: 0.08em;
  margin-right: 0.5rem;
  padding: 0.35rem 0.55rem;
  white-space: pre;
}

@keyframes overclock-sec {
  from {
    --overclock-sec: 0;
  }

  to {
    --overclock-sec: 60;
  }
}

@keyframes overclock-min {
  from {
    --overclock-min: 0;
  }

  to {
    --overclock-min: 60;
  }
}

/* The menu toggle Stash shows below 1200px: a clipped yellow frame */
.top-nav .navbar-toggler {
  --overclock-cut: 7px;

  border: 1px solid var(--overclock-yellow);
  border-radius: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    0 100%
  );
  padding: 0.3rem 0.5rem;
}

/* Font Awesome's bars, drawn as three stepped lines with two cyan bits */
.top-nav .navbar-toggler svg {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 7h22v3H4zM4 14h16v3H4zM4 21h10v3H4z' fill='%23f3e600'/%3E%3Cpath d='M23 14h3v3h-3zM17 21h3v3h-3z' fill='%2300e5ff'/%3E%3C/svg%3E")
    center / contain no-repeat;
  height: 1.5rem;
  width: 1.5rem;
}

.top-nav .navbar-toggler svg :is(path, use) {
  visibility: hidden;
}

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

.top-nav .navbar-toggler[aria-expanded='true'],
.top-nav .navbar-toggler:not(.collapsed) {
  background: rgb(243 230 0 / 12%);
}

/* The folded menu: Stash's grid of icon tiles under a dashed rule */
@media (width < 1200px) {
  .top-nav .navbar-collapse.show,
  .top-nav .navbar-collapse.collapsing {
    border-top: 1px dashed var(--overclock-line);
    margin-top: 0.5rem;
    padding-top: 0.6rem;
  }
}

/*
 * The clock needs room: beside the page links it shows from 1440px, and in
 * the folded bar, which keeps only Stash's buttons, from 768px
 */
@media (width >= 1200px) and (width < 1440px) {
  .top-nav .navbar-buttons::before {
    display: none;
  }
}

@media (width < 768px) {
  .top-nav .navbar-buttons::before {
    display: none;
  }
}

/*
 * On a phone held upright Stash docks the bar at the bottom of the screen, so
 * the underline and its ticks move to the top edge, and the folded menu opens
 * above the bar with its rule below.
 */
@media (width <= 575.98px) {
  .top-nav.navbar::before {
    display: none;
  }

  .top-nav .brand-link.btn.minimal {
    font-size: 1.2rem;
  }
}

@media (width <= 575.98px) and (orientation: portrait) {
  .top-nav.navbar {
    padding: 0.7rem 1rem 0.5rem;
  }

  /* Mirrored, so the hairline runs along the top and the ticks hang down */
  .top-nav.navbar::after {
    bottom: auto;
    top: 0;
    transform: scaleY(-1);
  }

  .top-nav .navbar-collapse.show,
  .top-nav .navbar-collapse.collapsing {
    border-bottom: 1px dashed var(--overclock-line);
    border-top: 0;
    margin: 0 0 0.5rem;
    padding: 0 0 0.6rem;
  }
}

/* 20-buttons.css */
/*
 * Buttons: flat panels with the bottom-right corner clipped at 45°. Bootstrap
 * and Stash paint colours per variant and state with high specificity, so
 * every variant sets these variables and the base rule applies them with
 * !important. Stash renders its icon buttons as `.btn.minimal` (often with
 * btn-primary or btn-secondary), so the variants skip `.minimal` and those
 * stay bare.
 */
.btn {
  --overclock-fill: transparent;
  --overclock-edge: transparent;
  --overclock-ink: var(--overclock-text);
  --overclock-glow: none;

  background-color: var(--overclock-fill) !important;
  background-image: linear-gradient(
    315deg,
    var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
    transparent 0
  );
  background-origin: border-box;
  border-color: var(--overclock-edge) !important;
  border-radius: 0 !important;
  box-shadow: var(--overclock-glow) !important;
  color: var(--overclock-ink) !important;
  font-family: var(--overclock-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: none;
}

.btn:focus-visible {
  --overclock-glow:
    inset 0 0 0 1px var(--overclock-bg), inset 0 0 0 3px var(--overclock-cyan);

  outline: none;
}

.btn-primary:not(.minimal) {
  --overclock-fill: var(--overclock-yellow);
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-black);
}

.btn-primary:not(.minimal, :disabled, .disabled):hover {
  --overclock-fill: var(--overclock-yellow-hi);
  --overclock-edge: var(--overclock-yellow-hi);
}

.btn-primary:not(.minimal, :disabled, .disabled):active {
  --overclock-fill: #d4c900;
}

.btn-secondary:not(.minimal),
.btn-light:not(.minimal),
.btn-dark:not(.minimal) {
  --overclock-fill: var(--overclock-control);
  --overclock-edge: var(--overclock-line);
  --overclock-ink: var(--overclock-text);
}

:is(.btn-secondary, .btn-light, .btn-dark):not(
    .minimal,
    :disabled,
    .disabled
  ):hover,
.show > .btn-secondary.dropdown-toggle:not(.minimal) {
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-yellow);
}

/* The chosen item of a group reads as a cyan readout */
.btn.btn-secondary:not(.minimal, :disabled, .disabled).active,
.btn.btn-secondary:not(.minimal, :disabled, .disabled):active {
  --overclock-fill: rgb(0 229 255 / 14%);
  --overclock-edge: var(--overclock-cyan);
  --overclock-ink: var(--overclock-cyan);
  --overclock-glow: inset 0 -2px 0 var(--overclock-cyan);
}

.btn-success:not(.minimal) {
  --overclock-fill: rgb(0 229 255 / 5%);
  --overclock-edge: var(--overclock-cyan);
  --overclock-ink: var(--overclock-cyan);
}

.btn-success:not(.minimal, :disabled, .disabled):hover {
  --overclock-fill: rgb(0 229 255 / 16%);
}

.btn-info:not(.minimal) {
  --overclock-fill: var(--overclock-cyan);
  --overclock-edge: var(--overclock-cyan);
  --overclock-ink: var(--overclock-black);
}

.btn-info:not(.minimal, :disabled, .disabled):hover {
  --overclock-fill: #6ff0ff;
  --overclock-edge: #6ff0ff;
}

.btn-warning:not(.minimal) {
  --overclock-fill: rgb(243 230 0 / 5%);
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-yellow);
}

.btn-warning:not(.minimal, :disabled, .disabled):hover {
  --overclock-fill: rgb(243 230 0 / 16%);
}

/* Danger: alert red behind a strip of hazard stripes */
.btn-danger:not(.minimal) {
  --overclock-fill: var(--overclock-red);
  --overclock-edge: var(--overclock-red);
  --overclock-ink: var(--overclock-black);

  background-image:
    linear-gradient(
      315deg,
      var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
      transparent 0
    ),
    linear-gradient(
      90deg,
      transparent 15px,
      var(--overclock-black) 15px 16px,
      transparent 16px
    ),
    repeating-linear-gradient(
      -45deg,
      var(--overclock-yellow) 0 5px,
      var(--overclock-black) 5px 10px
    );
  background-repeat: no-repeat;
  background-size:
    100% 100%,
    100% 100%,
    15px 100%;
  border-left-color: var(--overclock-yellow) !important;
  padding-left: calc(0.75rem + 15px);
}

.btn-danger.btn-sm:not(.minimal) {
  padding-left: calc(0.5rem + 15px);
}

.btn-danger:not(.minimal, :disabled, .disabled):hover {
  --overclock-fill: var(--overclock-red-hi);
  --overclock-edge: var(--overclock-red-hi);
}

/* Disabled is locked: a dashed frame behind faint hazard stripes */
.btn:not(.minimal, .btn-link):disabled,
.btn.disabled:not(.minimal, .btn-link) {
  --overclock-fill: transparent;
  --overclock-edge: var(--overclock-line);
  --overclock-ink: var(--overclock-dim);

  background-image: var(--overclock-hazard-dim);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 1;
}

.btn.minimal {
  --overclock-fill: transparent;
  --overclock-edge: transparent;
  --overclock-ink: var(--overclock-text);

  background-image: none;
}

.btn.minimal:not(:disabled, .disabled):hover {
  --overclock-ink: var(--overclock-yellow);
}

.btn.minimal:disabled,
.btn.minimal.disabled {
  --overclock-ink: var(--overclock-dim);
}

.btn-link {
  --overclock-ink: var(--overclock-cyan);

  background-image: none;
  font-family: var(--overclock-font-label);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-color: rgb(0 229 255 / 45%);
  text-underline-offset: 4px;
}

.btn-link:hover {
  --overclock-ink: var(--overclock-yellow);

  text-decoration-color: var(--overclock-yellow);
}

.btn-sm {
  --overclock-cut: 6px;

  font-size: 0.78rem;
}

.btn-lg {
  --overclock-cut: 12px;

  font-size: 1.1rem;
  padding: 0.55rem 1.6rem;
}

/* Inside a group only the last button is clipped, so the group reads as one */
.btn-group > .btn:not(:last-child),
.btn-group > .btn-group:not(:last-child) > .btn,
.input-group .btn {
  clip-path: none;
}

/* Selects styled as buttons (the page-size picker in list toolbars) */
select.btn-secondary {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h4l2 3 2-3h4L6 8Z' fill='%23f3e600'/%3E%3C/svg%3E")
      right 0.6rem center / 10px 7px no-repeat,
    linear-gradient(
        315deg,
        var(--overclock-line) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box;
  font-family: var(--overclock-font-label);
  font-weight: 400;
  letter-spacing: 0.06em;
  padding-right: 1.8rem;
}

select option {
  background-color: var(--overclock-panel);
  color: var(--overclock-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.
 * They stay quiet and never glitch.
 */
#root :is(.scene-divider, .gallery-divider, .details-divider) .btn,
#root .scrubber-button {
  --overclock-fill: transparent;
  --overclock-edge: transparent;
  --overclock-ink: var(--overclock-dim);

  background-image: none;
  clip-path: none;
}

#root .scrubber-button {
  --overclock-fill: var(--overclock-panel);
}

#root :is(.scene-divider, .gallery-divider, .details-divider) .btn:hover,
#root .scrubber-button:hover {
  --overclock-ink: var(--overclock-yellow);
}

#root .scrubber-tags-background {
  background-color: var(--overclock-panel);
}

/* 30-cards.css */
/* Cards: chamfered panels with corner brackets round the picture */
.card {
  --overclock-cut: 14px;
  --overclock-edge: var(--overclock-line);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-panel);
  border: 1px solid var(--overclock-edge);
  border-radius: 0;
  color: var(--overclock-text);
}

.grid-card:hover {
  --overclock-edge: var(--overclock-yellow);
}

/* The top-left cut, drawn as a line over the picture's corner */
.grid-card::before {
  background: linear-gradient(
    135deg,
    transparent calc(50% - 0.5px),
    var(--overclock-line) calc(50% - 0.5px) calc(50% + 1px),
    transparent 0
  );
  content: '';
  height: 14px;
  left: -1px;
  pointer-events: none;
  position: absolute;
  top: -1px;
  width: 14px;
  z-index: 4;
}

.grid-card:hover::before {
  background: linear-gradient(
    135deg,
    transparent calc(50% - 0.5px),
    var(--overclock-yellow) calc(50% - 0.5px) calc(50% + 1.5px),
    transparent 0
  );
}

/* A small cyan bracket in the bottom-left corner of the panel */
.grid-card::after {
  background:
    linear-gradient(var(--overclock-cyan) 0 0) 0 100% / 10px 2px no-repeat,
    linear-gradient(var(--overclock-cyan) 0 0) 0 100% / 2px 10px no-repeat;
  bottom: 3px;
  content: '';
  height: 10px;
  left: 3px;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  width: 10px;
}

.grid-card .thumbnail-section {
  overflow: hidden;
  position: relative;
}

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

/* Corner brackets: at the edges of the picture, snapping inward on hover */
.grid-card .thumbnail-section::after {
  --overclock-bracket: 16px;
  --overclock-bracket-w: 2px;

  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 0 0 / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 100% 0 / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 0 100% / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 0 100% / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--overclock-bracket-w)
      var(--overclock-bracket);
  background-repeat: no-repeat;
  color: rgb(232 239 238 / 50%);
  content: '';
  inset: 7px;
  pointer-events: none;
  position: absolute;
  transition: inset 120ms steps(3, end);
  z-index: 1;
}

.grid-card:hover .thumbnail-section::after {
  --overclock-bracket: 22px;
  --overclock-bracket-w: 3px;

  color: var(--overclock-yellow);
  inset: 16px;
}

/* The scan line: one sweep down the picture per hover, then gone */
.grid-card .thumbnail-section::before {
  background: linear-gradient(
    180deg,
    transparent,
    rgb(0 229 255 / 8%) 60%,
    rgb(0 229 255 / 30%) 93%,
    var(--overclock-cyan) 97%,
    #fff 100%
  );
  content: '';
  height: 34%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  z-index: 1;
}

.grid-card:hover .thumbnail-section::before {
  animation: overclock-scan 640ms linear 1 both;
}

/* The readout: counts to 100% while the scan runs */
.grid-card .thumbnail-section > a::after {
  --overclock-cut: 5px;
  --overclock-pct: 100;

  background: rgb(5 5 6 / 86%);
  border-left: 2px solid var(--overclock-cyan);
  bottom: 22px;
  color: var(--overclock-cyan);
  counter-reset: overclock-pct var(--overclock-pct);
  font: 0.64rem/1 var(--overclock-font-label);
  left: 22px;
  letter-spacing: 0.1em;
  padding: 0.24rem 0.5rem 0.22rem 0.4rem;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  white-space: pre;
  z-index: 2;
}

.grid-card:is(.scene-card, .image-card):hover .thumbnail-section > a::after {
  animation: overclock-count 640ms steps(20, end) both;
  content: 'Scan ' counter(overclock-pct) '%  ·  trk';
}

/*
 * Performers: an ID readout beside the age, and a target bracket on hover.
 * Stash hangs the favourite in the picture's top-right corner, so that corner
 * takes the reticle instead of a bracket.
 */
.performer-card .performer-card__age {
  align-items: baseline;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.performer-card .performer-card__age::after {
  border-left: 2px solid var(--overclock-cyan);
  color: var(--overclock-cyan);
  content: 'ID:7F3A';
  padding-left: 0.35rem;
}

.performer-card:nth-child(3n + 2) .performer-card__age::after {
  content: 'ID:2C91';
}

.performer-card:nth-child(3n + 3) .performer-card__age::after {
  content: 'ID:B04E';
}

.performer-card:hover .performer-card__age::after {
  border-left-color: var(--overclock-yellow);
  color: var(--overclock-yellow);
}

.performer-card:hover .thumbnail-section > a::before {
  --overclock-cut: 5px;

  animation: overclock-blink-in 300ms steps(1, end) both;
  background: var(--overclock-yellow);
  bottom: 24px;
  color: var(--overclock-black);
  content: 'Target acquired';
  font: 0.6rem/1 var(--overclock-font-label);
  left: 24px;
  letter-spacing: 0.1em;
  padding: 0.22rem 0.45rem 0.2rem;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}

.performer-card .thumbnail-section::after {
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 0 0 / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 0 100% / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 0 100% / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--overclock-bracket-w)
      var(--overclock-bracket);
  background-repeat: no-repeat;
}

/* On hover a performer's brackets close into crosshairs */
.performer-card:hover .thumbnail-section::after {
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 0 0 / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 0 100% / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 0 100% / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 50% 0 / 2px 9px,
    linear-gradient(currentcolor 0 0) 50% 100% / 2px 9px,
    linear-gradient(currentcolor 0 0) 0 50% / 9px 2px,
    linear-gradient(currentcolor 0 0) 100% 50% / 9px 2px;
  background-repeat: no-repeat;
}

.card a {
  color: inherit;
}

.card a:hover {
  text-decoration: none;
}

.card-section-title,
.grid-card a .card-section-title {
  color: var(--overclock-text);
  font-size: 1.02rem;
  line-height: 1.15;
}

.card a:hover .card-section-title,
.grid-card:hover .card-section-title,
.grid-card:hover a .card-section-title {
  color: var(--overclock-yellow);
}

:is(
  .scene-card__details,
  .gallery-card__details,
  .group-card__details,
  .image-card__details,
  .studio-card__details,
  .performer-card__age
) {
  color: var(--overclock-dim);
  font-family: var(--overclock-font-label);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.scene-card__date::before {
  color: var(--overclock-cyan-lo);
  content: 'T ';
}

/* Descriptions under a card stay on the system font */
.grid-card
  .TruncatedText:is(
    .scene-card__description,
    .gallery-card__description,
    .group-card__description
  ) {
  font-family: var(--overclock-font-body);
  letter-spacing: 0;
}

.performer-card .performer-name {
  font-size: 1.15rem;
}

/* The divider: a dashed rule with a tick at each end */
.card > hr {
  background:
    linear-gradient(var(--overclock-line) 0 0) 0 50% / 1px 7px no-repeat,
    linear-gradient(var(--overclock-line) 0 0) 100% 50% / 1px 7px no-repeat,
    repeating-linear-gradient(
        90deg,
        var(--overclock-line) 0 4px,
        transparent 4px 7px
      )
      50% 50% / calc(100% - 8px) 1px no-repeat;
  border: 0;
  height: 7px;
  margin-inline: 0.8rem;
}

/* Overlays on the picture: mono tags on near-black */
.studio-overlay {
  right: 8px;
  top: 8px;
}

.studio-overlay a {
  --overclock-cut: 5px;

  background: rgb(5 5 6 / 84%);
  border-left: 2px solid var(--overclock-cyan);
  color: var(--overclock-text);
  display: inline-block;
  font: 0.66rem/1 var(--overclock-font-label);
  letter-spacing: 0.1em;
  padding: 0.26rem 0.5rem 0.24rem 0.4rem;
  text-shadow: none;
  text-transform: uppercase;
}

.studio-overlay a:hover {
  color: var(--overclock-yellow);
  text-decoration: none;
}

/* A studio logo stays a picture: no tag behind it */
.studio-overlay a:has(.image-thumbnail) {
  background: none;
  border-left: 0;
  clip-path: none;
  padding: 0;
}

.scene-specs-overlay {
  bottom: 14px;
  display: flex;
  gap: 0.3rem;
  right: 8px;
  text-shadow: none;
  z-index: 2;
}

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

.scene-specs-overlay > span,
.scene-interactive-speed-overlay:not(:empty) {
  --overclock-cut: 4px;

  background: rgb(5 5 6 / 86%);
  color: var(--overclock-text);
  font: 0.68rem/1 var(--overclock-font-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  padding: 0.24rem 0.4rem 0.22rem;
  text-transform: uppercase;
}

.scene-specs-overlay .overlay-resolution {
  background: var(--overclock-yellow);
  color: var(--overclock-black);
}

/*
 * The rating: a yellow chamfered tag with a mono number and a five-segment
 * meter, in place of Stash's diagonal ribbon. Stash names a star rating
 * rating-1 to rating-5, and finer ratings rating-100-0 to rating-100-20.
 */
.grid-card .rating-banner {
  --overclock-cut: 7px;
  --overclock-rating: 0;

  align-items: center;
  background: var(--overclock-yellow);
  color: var(--overclock-black);
  display: flex;
  font: 0.66rem/1 var(--overclock-font-label);
  gap: 0.45rem;
  left: 2.1rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.55rem 0.28rem 0.85rem;
  text-align: left;
  text-transform: uppercase;
  top: 10px;
  transform: none;
  width: auto;
  z-index: 2;

  /* The pointer passes through to the picture's link, as before */
  pointer-events: none;
}

.grid-card .rating-banner::after {
  background:
    linear-gradient(
      90deg,
      var(--overclock-black) calc(var(--overclock-rating) * 5%),
      transparent 0
    ),
    rgb(10 10 12 / 22%);
  content: '';
  flex: none;
  height: 7px;
  mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 6.5px);
  width: 31px;
}

.rating-banner.rating-1 {
  --overclock-rating: 4;
}

.rating-banner.rating-2 {
  --overclock-rating: 8;
}

.rating-banner.rating-3 {
  --overclock-rating: 12;
}

.rating-banner.rating-4 {
  --overclock-rating: 16;
}

.rating-banner.rating-5 {
  --overclock-rating: 20;
}

.rating-banner.rating-100-1 {
  --overclock-rating: 1;
}

.rating-banner.rating-100-2 {
  --overclock-rating: 2;
}

.rating-banner.rating-100-3 {
  --overclock-rating: 3;
}

.rating-banner.rating-100-4 {
  --overclock-rating: 4;
}

.rating-banner.rating-100-5 {
  --overclock-rating: 5;
}

.rating-banner.rating-100-6 {
  --overclock-rating: 6;
}

.rating-banner.rating-100-7 {
  --overclock-rating: 7;
}

.rating-banner.rating-100-8 {
  --overclock-rating: 8;
}

.rating-banner.rating-100-9 {
  --overclock-rating: 9;
}

.rating-banner.rating-100-10 {
  --overclock-rating: 10;
}

.rating-banner.rating-100-11 {
  --overclock-rating: 11;
}

.rating-banner.rating-100-12 {
  --overclock-rating: 12;
}

.rating-banner.rating-100-13 {
  --overclock-rating: 13;
}

.rating-banner.rating-100-14 {
  --overclock-rating: 14;
}

.rating-banner.rating-100-15 {
  --overclock-rating: 15;
}

.rating-banner.rating-100-16 {
  --overclock-rating: 16;
}

.rating-banner.rating-100-17 {
  --overclock-rating: 17;
}

.rating-banner.rating-100-18 {
  --overclock-rating: 18;
}

.rating-banner.rating-100-19 {
  --overclock-rating: 19;
}

.rating-banner.rating-100-20 {
  --overclock-rating: 20;
}

/*
 * A guessed rating, such as Cherry Pick's Your score, is the same tag left
 * hollow: black with a yellow frame and yellow type, opaque so it reads over
 * any cover and never passes for a rating of Stash's. It carries no rating
 * class, so the meter goes, and so does Cherry Pick's hidden line that holds
 * Stash's ribbon at full width, which the tag never needs. Cherry Pick sets
 * its own dim, outline and case at two classes, so this names the card too
 * and wins in either stylesheet order.
 */
.grid-card .rating-banner.cherrypick-score-banner {
  --overclock-edge: var(--overclock-yellow);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-black);
  border: 1px solid var(--overclock-edge);
  box-shadow: none;
  color: var(--overclock-yellow);
  text-transform: uppercase;
}

.grid-card .rating-banner.cherrypick-score-banner::before,
.grid-card .rating-banner.cherrypick-score-banner::after {
  display: none;
}

/*
 * 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, where it is
 * wider, so the tag hangs to its right and never covers it (and past a
 * group's drag handle where there is one).
 */
.grid-card:has(.card-drag-handle) .rating-banner {
  left: 3.6rem;
}

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

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

/* Progress: a segmented bar along the bottom of the picture */
.grid-card .progress-bar {
  background:
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 16%) 0 6px,
      transparent 6px 8px
    ),
    rgb(0 0 0 / 70%);
  bottom: 0;
  height: 6px;
  z-index: 2;
}

.grid-card .progress-indicator {
  background: repeating-linear-gradient(
    90deg,
    var(--overclock-yellow) 0 6px,
    transparent 6px 8px
  );
  height: 6px;
}

/* Where a hover over the picture scrubs the preview, the marker is yellow */
.grid-card .hover-scrubber .hover-scrubber-indicator-marker {
  background-color: var(--overclock-yellow);
}

/* Counts under the card */
.card-popovers .btn.minimal {
  --overclock-ink: var(--overclock-muted);

  font-family: var(--overclock-font-label);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.card-popovers .btn.minimal:not(:disabled, .disabled):hover {
  --overclock-ink: var(--overclock-yellow);
}

.card-popovers .organized .btn.minimal {
  --overclock-ink: var(--overclock-cyan);
}

/*
 * The selection box: a clipped square that fills yellow. Stash makes it a
 * .form-control, so it drops the field's frame and caret.
 */
.grid-card .card-check {
  animation: none;
  appearance: none;
  background: rgb(5 5 6 / 85%);
  border: 1px solid var(--overclock-yellow);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    0 100%
  );
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.grid-card .card-check:checked {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m2.5 8.4 1.6-1.6 2.6 2.6 5.2-5.2 1.6 1.6-6.8 6.8Z' fill='%230a0a0c'/%3E%3C/svg%3E")
      center / 82% no-repeat,
    var(--overclock-yellow);
  opacity: 1;
}

/*
 * 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 clipped
 * square in the bottom-right corner that appears on hover. #root outranks
 * Stash's hover, focus and active reset.
 */
#root .image-card .preview-button {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.5rem;

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

#root .image-card .preview-button .btn {
  --overclock-fill: rgb(5 5 6 / 86%);
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-yellow);
  --overclock-cut: 7px;

  align-items: center;
  background-image: linear-gradient(
    315deg,
    var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
    transparent 0
  );
  border: 1px solid var(--overclock-yellow) !important;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    0 100%
  );
  display: flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  width: 32px;
}

#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 button 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;
  }

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

#root .image-card .preview-button .btn:hover {
  --overclock-fill: var(--overclock-yellow);
  --overclock-ink: var(--overclock-black);
}

/* 40-tags.css */
/* Tags: clipped mono chips with a cyan status light */
.badge {
  --overclock-cut: 6px;
  --overclock-edge: var(--overclock-line);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-chip);
  border: 1px solid var(--overclock-edge);
  border-radius: 0;
  color: var(--overclock-text);
  font-family: var(--overclock-font-label);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 0.38em 0.85em 0.36em 0.7em;
  text-transform: uppercase;
}

.tag-item.badge {
  align-items: center;
  display: inline-flex;
}

.tag-item.badge::before {
  background: var(--overclock-cyan);
  content: '';
  flex: none;
  height: 5px;
  margin-right: 0.5em;
  width: 5px;
}

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

.tag-item.badge:hover,
.tag-item.badge:focus-within,
a.badge-secondary:hover,
a.badge-secondary:focus {
  --overclock-edge: var(--overclock-yellow);

  background-color: #16240f;
  box-shadow: none;
  color: var(--overclock-yellow);
}

.tag-item.badge a:hover {
  color: inherit;
  text-decoration: none;
}

.tag-item.badge:hover::before {
  background: var(--overclock-yellow);
}

.badge.badge-primary {
  --overclock-edge: var(--overclock-yellow);

  background: var(--overclock-yellow);
  color: var(--overclock-black);
}

.badge.badge-info {
  --overclock-edge: var(--overclock-cyan);

  background: var(--overclock-cyan);
  color: var(--overclock-black);
}

/* 50-rating.css */
/*
 * Ratings: five charge chevrons that fill left to right. The Font Awesome
 * star paths are hidden and the svg box paints a chevron through a mask.
 */
.rating-stars {
  font-size: 1.55rem;
}

.rating-stars .btn.minimal {
  padding: 0 0.03rem;
}

.rating-stars svg {
  background: currentcolor;
  mask: url('assets/icons/glyph-charge-outline.svg') center / 100% no-repeat;
}

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

.rating-stars .unfilled-star svg {
  color: var(--overclock-yellow-lo);
}

.rating-stars .filled-star svg {
  color: var(--overclock-yellow);
  mask-image: url('assets/icons/glyph-charge.svg');
}

/* A full chevron covers its outline, which would show at its edges */
.rating-stars .star-fill-100 .unfilled-star {
  visibility: hidden;
}

/* Hovering a chevron lights the outline of every chevron up to it */
.rating-stars .btn.minimal:not(:disabled):hover .unfilled-star svg,
.rating-stars
  .btn.minimal:has(~ .btn.minimal:not(:disabled):hover)
  .unfilled-star
  svg {
  color: var(--overclock-yellow);
}

.star-rating-number {
  color: var(--overclock-yellow);
  font-family: var(--overclock-font-label);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rating-stars-precision-full .star-rating-number::after {
  color: var(--overclock-dim);
  content: '/5';
  font-size: 0.8em;
}

/*
 * Favourite: a targeting reticle that closes and locks. Stash colours
 * favourites and their shadow three classes deep, so these rules start at
 * #root.
 */
#root .favorite-button {
  overflow: visible;
}

#root
  .favorite-button:not(
    :is(.performer-card, .studio-card, .tag-card) .favorite-button
  ) {
  position: relative;
}

#root .favorite-button svg {
  background: currentcolor;
  mask: url('assets/icons/glyph-reticle-open.svg') center / 100% no-repeat;
}

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

#root .favorite-button.not-favorite {
  --overclock-ink: var(--overclock-muted);
}

#root .favorite-button.not-favorite:hover {
  --overclock-ink: var(--overclock-yellow);
}

#root .favorite-button.favorite,
#root .favorite-button.favorite:hover {
  --overclock-ink: var(--overclock-yellow);
}

#root .favorite-button.favorite svg {
  animation: overclock-lock 300ms steps(5, end) both;
  mask-image: url('assets/icons/glyph-reticle.svg');
}

/* The small Locked tag under a locked reticle */
#root .favorite-button.favorite::after {
  animation: overclock-blink-in 360ms steps(1, end) both;
  background: var(--overclock-yellow);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 4px),
    calc(100% - 4px) 100%,
    0 100%
  );
  color: var(--overclock-black);
  content: 'Locked';
  font: 0.56rem/1 var(--overclock-font-label);
  left: 50%;
  letter-spacing: 0.1em;
  padding: 0.16rem 0.32rem 0.14rem;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: calc(100% - 0.15rem);
  translate: -50% 0;
}

/* On a card the reticle sits on the picture, so it takes a dark edge */
#root :is(.performer-card, .studio-card, .tag-card) .favorite-button {
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 2px rgb(0 0 0 / 80%));
}

#root
  :is(.performer-card, .studio-card, .tag-card)
  .favorite-button.not-favorite {
  --overclock-ink: var(--overclock-text);
}

/* Beside a name on a detail page, the Locked tag sits to the right of the
   reticle: hung below it, it lands on the rating row */
#root .name-icons .favorite-button.favorite::after {
  left: calc(100% - 0.1rem);
  top: 50%;
  translate: 0 -50%;
}

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

/*
 * The O counter is an overload bolt with a mono readout. 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),
.o-counter .btn svg:not(.svg-inline--fa) {
  background: currentcolor;
  mask: url('assets/icons/glyph-bolt.svg') center / 100% no-repeat;
}

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

.count-button .count-icon {
  --overclock-ink: var(--overclock-muted);
}

.count-button .count-icon:not(:disabled):hover {
  --overclock-ink: var(--overclock-yellow);
}

.count-button .count-icon:not(:disabled):active {
  --overclock-ink: var(--overclock-red);
}

.count-button .count-value {
  --overclock-ink: var(--overclock-yellow);

  font-family: var(--overclock-font-label);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.count-button,
.count-button:hover {
  background: none;
  border-radius: 0;
}

/* Outside a card the value sits in a small framed gauge */
:not(.card-popovers) > .count-button .count-value {
  --overclock-cut: 6px;
  --overclock-edge: var(--overclock-line);

  background-image:
    linear-gradient(
      315deg,
      var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
      transparent 0
    ),
    linear-gradient(90deg, var(--overclock-yellow) 0 3px, transparent 3px);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    0 100%
  );
  border: 1px solid var(--overclock-edge) !important;
  font-size: 1.15rem;
  line-height: 1.2;
  padding: 0.1rem 0.6rem 0.1rem 0.85rem;
  white-space: nowrap;
}

/* and the O counter's gauge reads OVL, for overload */
:not(.card-popovers)
  > .count-button:has(.count-icon svg:not(.svg-inline--fa))
  .count-value
  span::before {
  color: var(--overclock-dim);
  content: 'OVL ';
  font-size: 0.7em;
}

/* 60-forms.css */
/*
 * Forms: dark fields with a bottom rule and corner ticks. Focus turns the
 * frame yellow and starts a blinking block, a terminal cursor at the end of
 * the field.
 */
.form-control,
.custom-select,
.input-control,
div.react-select__control {
  --overclock-tick: var(--overclock-line);

  background:
    linear-gradient(var(--overclock-caret) 0 0) right 0.7rem center / 7px 1.05em
      no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 100% 0 / 1px 7px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 100% 0 / 7px 1px no-repeat,
    var(--overclock-field);
  border: 0;
  border-bottom: 1px solid var(--overclock-line);
  border-radius: 0;
  box-shadow: none;
  caret-color: var(--overclock-yellow);
  color: var(--overclock-text);
}

.form-control::placeholder {
  color: var(--overclock-dim);
  font-family: var(--overclock-font-label);
  letter-spacing: 0.04em;
}

.form-control:focus,
.custom-select:focus,
.input-control:focus,
div.react-select__control--is-focused {
  --overclock-tick: var(--overclock-yellow);

  background-color: var(--overclock-field);
  border-bottom-color: var(--overclock-yellow);
  box-shadow: 0 0 0 1px rgb(243 230 0 / 70%);
  color: var(--overclock-text);
}

/* Only fields that take typing get the blinking block */
:is(input.form-control, textarea.form-control, .input-control):focus {
  animation: overclock-caret 1s steps(1, end) infinite;
}

@keyframes overclock-caret {
  0% {
    --overclock-caret: var(--overclock-yellow);
  }

  50% {
    --overclock-caret: transparent;
  }
}

.custom-select {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h4l2 3 2-3h4L6 8Z' fill='%23f3e600'/%3E%3C/svg%3E")
      right 0.8rem center / 11px 7px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 100% 0 / 1px 7px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 100% 0 / 7px 1px no-repeat,
    var(--overclock-field);
  font-family: var(--overclock-font-label);
  letter-spacing: 0.04em;
  padding-right: 2.2rem;
}

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

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

/*
 * Stash paints its own .input-control fields (the Tagger's selects, the
 * scrape dialog's lists) slate, focused and disabled ones two classes deep
 */
:is(#root, .modal) .input-control,
:is(#root, .modal) .input-control:is(:focus, :disabled) {
  background-color: var(--overclock-field);
}

:is(#root, .modal) .input-control:focus {
  box-shadow: 0 0 0 1px rgb(243 230 0 / 70%);
}

/* Scrape fields arrive as Bootstrap's grey, white and bordered, with !important */
.form-control.bg-secondary {
  background-color: var(--overclock-field) !important;
  border-color: var(--overclock-line) !important;
  color: var(--overclock-text) !important;
}

.form-control.bg-secondary:focus {
  border-color: var(--overclock-yellow) !important;
}

.form-control.text-white {
  color: var(--overclock-text) !important;
}

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

/* Validation, as in the stash-box endpoint form */
.form-control.is-valid,
.was-validated .form-control:valid {
  --overclock-tick: var(--overclock-cyan);

  border-bottom-color: var(--overclock-cyan);
  padding-right: 0.75rem;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-bottom-color: var(--overclock-cyan);
  box-shadow: 0 0 0 1px rgb(0 229 255 / 70%);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  --overclock-tick: var(--overclock-red);

  border-bottom-color: var(--overclock-red);
  padding-right: 0.75rem;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-bottom-color: var(--overclock-red);
  box-shadow: 0 0 0 1px rgb(255 31 75 / 70%);
}

.invalid-feedback {
  color: var(--overclock-red-hi);
  font-family: var(--overclock-font-label);
}

.valid-feedback {
  color: var(--overclock-cyan);
  font-family: var(--overclock-font-label);
}

/* Checkboxes and switches: square, and yellow when on */
.custom-control-label::before {
  background-color: var(--overclock-field);
  border: 1px solid var(--overclock-line);
  border-radius: 0 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--overclock-yellow);
  border-color: var(--overclock-yellow);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m2.5 8.4 1.6-1.6 2.6 2.6 5.2-5.2 1.6 1.6-6.8 6.8Z' fill='%230a0a0c'/%3E%3C/svg%3E");
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow:
    0 0 0 1px var(--overclock-bg),
    0 0 0 3px var(--overclock-cyan);
}

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

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--overclock-yellow-lo);
  border-color: var(--overclock-yellow-lo);
}

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

.custom-switch .custom-control-label::after {
  background-color: var(--overclock-line);
  border-radius: 0;
}

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

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

.react-select__placeholder {
  color: var(--overclock-dim) !important;
  font-family: var(--overclock-font-label);
}

.react-select__indicator {
  color: var(--overclock-yellow) !important;
}

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

/*
 * The Tagger marks a match linked to something already in Stash, which Stash
 * fills blue three classes deep: here it takes the yellow frame of a focused
 * field.
 */
.search-result
  :is(.studio-select-active, .performer-select-active)
  div.react-select__control,
:is(.studio-select-active, .performer-select-active) div.react-select__control {
  --overclock-tick: var(--overclock-yellow);

  background-color: var(--overclock-field);
  border-bottom-color: var(--overclock-yellow);
  box-shadow: 0 0 0 1px rgb(243 230 0 / 70%);
}

/* Select menus match the dropdowns: a clipped panel with a yellow left rule */
div.react-select__menu {
  background: var(--overclock-panel);
  border: 1px solid var(--overclock-line);
  border-left: 3px solid var(--overclock-yellow);
  border-radius: 0;
  box-shadow: 0 14px 28px -12px #000;
  color: var(--overclock-text);
}

div.react-select__menu .react-select__option {
  color: var(--overclock-text);
}

div.react-select__menu .react-select__option--is-focused {
  background: rgb(243 230 0 / 9%);
  color: var(--overclock-yellow);
}

div.react-select__menu .react-select__option--is-selected {
  background: var(--overclock-yellow);
  color: var(--overclock-black);
}

div.react-select__control .react-select__multi-value {
  background: var(--overclock-chip);
  border: 1px solid var(--overclock-line);
  border-radius: 0;
  color: var(--overclock-text);
}

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

.react-select__multi-value__remove:hover {
  background: var(--overclock-red) !important;
  color: var(--overclock-black) !important;
}

/*
 * 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: repeating-linear-gradient(
      90deg,
      var(--overclock-line) 0 1px,
      transparent 1px 8px
    )
    var(--overclock-field);
  border-bottom: 1px solid var(--overclock-line);
}

#root input[type='range']::-webkit-slider-thumb {
  background: var(--overclock-yellow);
  border: 0;
  border-radius: 0;
  height: 16px;
  margin-top: -5px;
  width: 10px;
}

#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: var(--overclock-field);
}

#root input[type='range']::-moz-range-thumb {
  background: var(--overclock-yellow);
  border: 0;
  border-radius: 0;
}

/* 70-overlays.css */
/*
 * Menus, popovers, tooltips, toasts and modals: clipped teal-black panels with
 * a yellow left rule. 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.
 */
div.dropdown-menu {
  --overclock-cut: 10px;
  --overclock-edge: var(--overclock-line);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-panel);
  border: 1px solid var(--overclock-edge);
  border-left: 3px solid var(--overclock-yellow);
  border-radius: 0;
  box-shadow: none;
  color: var(--overclock-text);
  padding: 0.35rem 0;
}

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

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

.dropdown-item,
div.dropdown-menu .dropdown-item {
  color: var(--overclock-text);
  font-family: var(--overclock-font-display);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.42rem 1.1rem 0.42rem 0.95rem;
  text-transform: uppercase;
}

.dropdown-item:hover,
.dropdown-item:focus,
div.dropdown-menu .dropdown-item:hover,
div.dropdown-menu .dropdown-item:focus {
  background: rgb(243 230 0 / 9%);
  color: var(--overclock-yellow);
}

.dropdown-item:hover::before {
  content: '▸ ';
}

.dropdown-item.active,
.dropdown-item:active,
div.dropdown-menu .dropdown-item.active,
div.dropdown-menu .dropdown-item:active {
  --overclock-cut: 7px;

  background: var(--overclock-yellow);
  color: var(--overclock-black);
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: var(--overclock-dim);
}

.dropdown-divider {
  background:
    linear-gradient(var(--overclock-line) 0 0) 0 50% / 1px 5px no-repeat,
    linear-gradient(var(--overclock-line) 0 0) 100% 50% / 1px 5px no-repeat,
    repeating-linear-gradient(
        90deg,
        var(--overclock-line) 0 3px,
        transparent 3px 6px
      )
      50% 50% / calc(100% - 6px) 1px no-repeat;
  border: 0;
  height: 5px;
  margin: 0.35rem 0.8rem;
}

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

/*
 * Popovers (the tag and performer lists behind a card's counts) are the same
 * panel. They keep square corners, since a clip would cut off their arrow.
 */
.popover {
  background: var(--overclock-panel);
  border: 1px solid var(--overclock-line);
  border-left: 3px solid var(--overclock-yellow);
  border-radius: 0;
  box-shadow: 0 14px 28px -12px #000;
  color: var(--overclock-text);
}

.popover-header {
  background: var(--overclock-raised);
  border-bottom: 1px dashed var(--overclock-rule);
  border-radius: 0;
  color: var(--overclock-cyan);
  font-family: var(--overclock-font-label);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

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

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

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

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

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

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

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

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

/* Tooltips: a small yellow tag */
.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  --overclock-cut: 5px;

  background: var(--overclock-yellow);
  border-radius: 0;
  color: var(--overclock-black);
  font: 0.72rem/1.2 var(--overclock-font-label);
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  text-transform: uppercase;
}

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

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

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

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

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

/*
 * Toasts: a clipped panel with a yellow left rule. Stash puts the whole
 * message in the toast's header and leaves the body empty, so the header
 * carries the system's line in yellow, and the reticle, the STASH label and
 * the message number sit in a band above it.
 */
.toast,
.toast-container .toast {
  --overclock-cut: 12px;
  --overclock-edge: var(--overclock-line);

  backdrop-filter: none;
  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-panel);
  border: 1px solid var(--overclock-edge);
  border-left: 3px solid var(--overclock-yellow);
  border-radius: 0;
  box-shadow: none;
  color: var(--overclock-text);
  padding-top: 1.95rem;
  position: relative;
}

.toast-container {
  opacity: 1;
}

/* The band: a cyan reticle and STASH over a dashed rule */
.toast::before {
  background: var(--overclock-cyan);
  content: '';
  height: 0.85rem;
  left: 0.8rem;
  mask: url('assets/icons/glyph-reticle.svg') center / contain no-repeat;
  position: absolute;
  top: 0.5rem;
  width: 0.85rem;
}

.toast::after {
  border-bottom: 1px dashed var(--overclock-rule);
  color: var(--overclock-cyan);
  content: 'Stash';
  font: 0.7rem/1 var(--overclock-font-label);
  left: 0;
  letter-spacing: 0.16em;
  padding: 0.6rem 0.8rem 0.55rem 2.15rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
}

.toast-header,
.toast-container .toast-header {
  align-items: flex-start;
  background: none;
  border-bottom: 0;
  color: var(--overclock-yellow);
  font-family: var(--overclock-font-display);
  font-size: 1.12rem;
  font-weight: 600;
  gap: 0.5rem;
  letter-spacing: 0.03em;
  line-height: 1.25;
  padding: 0.6rem 0.8rem 0.75rem;
}

/* The message number, at the right end of the band */
.toast-header::after {
  color: var(--overclock-dim);
  content: 'MSG.0x1F';
  font: 0.7rem/1 var(--overclock-font-label);
  letter-spacing: 0.16em;
  pointer-events: none;
  position: absolute;
  right: 0.8rem;
  top: 0.6rem;
}

.toast-container .toast-header .close {
  color: var(--overclock-muted);
  font-family: var(--overclock-font-label);
  opacity: 1;
  text-shadow: none;
}

.toast-container .toast-header .close:hover {
  color: var(--overclock-yellow);
}

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

.toast-container .toast.danger {
  border-left-color: var(--overclock-red);
}

.toast-container .toast.danger .toast-header {
  color: var(--overclock-red-hi);
}

.toast-container .toast.danger::before {
  background: var(--overclock-red);
}

.toast-container .toast.danger::after {
  color: var(--overclock-red);
  content: 'Alert';
}

.toast-container .toast.warning::after {
  color: var(--overclock-yellow);
  content: 'Warning';
}

/* Modals: a plain HUD bar, or a hazard band when the dialog destroys */
:is(#root, .modal) .modal-content {
  --overclock-cut: 16px;
  --overclock-edge: var(--overclock-line);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-panel);
  border: 1px solid var(--overclock-edge);
  border-radius: 0;
  color: var(--overclock-text);
}

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

:is(#root, .modal) .modal-header {
  align-items: center;
  background:
    linear-gradient(var(--overclock-yellow) 0 0) 0 50% / 3px 55% no-repeat,
    linear-gradient(180deg, #142428, #0f1b1e);
  border-bottom: 1px solid var(--overclock-line);
  border-radius: 0;
  font-family: var(--overclock-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  gap: 0.75rem;
  justify-content: flex-start;
  letter-spacing: 0.06em;
  line-height: 1.2;
  padding: 0.75rem 1rem 0.75rem 1.4rem;
  text-transform: uppercase;
}

:is(#root, .modal) .modal-header::after {
  color: var(--overclock-dim);
  content: 'SYS.DLG // 0x2A';
  font: 0.64rem/1 var(--overclock-font-label);
  letter-spacing: 0.12em;
  margin-left: auto;
  white-space: nowrap;
}

.modal-title {
  color: var(--overclock-text);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.modal-header .fa-icon {
  color: var(--overclock-yellow);
  height: 0.9em;
}

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

/*
 * Cherry Pick's dialogs have a close button, which Stash's own don't. Its
 * auto margin (Bootstrap's, and Cherry Pick's own) split the header's free
 * space with the readout's, so it stood mid-header; it ends the header,
 * after the readout.
 */
.modal.cherrypick-dialog .modal-header .close {
  margin-left: 0;
  order: 1;
}

/* On a phone the readout leaves their title and speaker no room, and the
   close button takes the free space back */
@media (width <= 575.98px) {
  :is(#root, .modal).cherrypick-dialog .modal-header::after {
    content: none;
  }

  .modal.cherrypick-dialog .modal-header .close {
    margin-left: auto;
  }
}

:is(#root, .modal) .modal-content:has(.modal-footer .btn-danger) .modal-header {
  background: var(--overclock-hazard);
  border-bottom-color: var(--overclock-yellow);
  padding: 0.9rem 1rem;
}

:is(#root, .modal)
  .modal-content:has(.modal-footer .btn-danger)
  .modal-header
  > :is(span, .modal-title) {
  background: var(--overclock-bg);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    0 100%
  );
  color: var(--overclock-red);
  padding: 0.25rem 0.8rem 0.25rem 0.7rem;
}

:is(#root, .modal)
  .modal-content:has(.modal-footer .btn-danger)
  .modal-header
  .fa-icon {
  display: none;
}

/* Cherry Pick asks before abandoning a bracket with a danger button in the
   footer; its speaker keeps its icon on the hazard band, and its close
   button sits on a black plate like the readout */
:is(#root, .modal).cherrypick-dialog
  .modal-content:has(.modal-footer .btn-danger)
  .modal-header
  .btn
  .fa-icon {
  display: inline-block;
}

:is(#root, .modal).cherrypick-dialog
  .modal-content:has(.modal-footer .btn-danger)
  .modal-header
  .close {
  background: var(--overclock-bg);
  margin-block: 0;
  margin-right: 0;
  padding: 0.35rem 0.6rem;
}

:is(#root, .modal)
  .modal-content:has(.modal-footer .btn-danger)
  .modal-header::after {
  background: var(--overclock-bg);
  color: var(--overclock-yellow);
  content: 'Irreversible';
  padding: 0.35rem 0.5rem;
  text-transform: uppercase;
}

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

.modal-footer {
  border-top: 1px dashed var(--overclock-rule);
}

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

.modal .close:hover {
  color: var(--overclock-yellow);
}

/* 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 var(--overclock-rule);
  clip-path: none;
}

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

.modal-backdrop.show {
  background-color: var(--overclock-void);
  opacity: 0.8;
}

.alert {
  background: var(--overclock-raised);
  border: 1px solid var(--overclock-line);
  border-left: 3px solid var(--overclock-yellow);
  border-radius: 0;
  color: var(--overclock-text);
}

.alert-danger {
  border-left-color: var(--overclock-red);
}

.alert-success {
  border-left-color: var(--overclock-cyan);
}

/* 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 in a sitting,
 * so it stays still and flat: no glitch, scan line or motion. The chosen row
 * takes a yellow edge and the chosen select a yellow frame.
 */
.search-item {
  --overclock-cut: 12px;

  background: var(--overclock-panel);
  border: 1px solid var(--overclock-rule);
  border-radius: 0;
}

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

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

/* Clickable results in the stash-box search modals */
.PerformerScrapeModal-list .search-item:hover,
.StashBoxIDSearchModal-list .search-item:hover {
  border-left: 3px solid var(--overclock-yellow);
}

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

.search-result + .search-result {
  border-top: 1px dashed var(--overclock-rule);
}

.search-result.selected-result,
.selected-result:hover {
  background: linear-gradient(90deg, rgb(243 230 0 / 7%), transparent 70%);
  border-left-color: var(--overclock-yellow);
}

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

.search-result h4 {
  font-size: 1.15rem;
}

.search-result h5 {
  color: var(--overclock-muted);
  font-family: var(--overclock-font-label);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}

.tagger-container .scene-card-preview,
.search-result .scene-image,
.search-item .scene-image {
  border: 1px solid var(--overclock-rule);
}

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

/* StashID links: the box name on cyan and the ID on a chip, one clipped tag */
.stash-id-pill {
  --overclock-cut: 5px;

  border: 0;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.stash-id-pill span {
  background: var(--overclock-cyan);
  border-radius: 0;
  color: var(--overclock-black);
  font-family: var(--overclock-font-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stash-id-pill a {
  background: var(--overclock-chip);
  border-radius: 0;
  color: var(--overclock-cyan);
  font-family: var(--overclock-font-label);
  font-weight: 400;
}

.stash-id-pill a:hover {
  color: var(--overclock-yellow);
}

/*
 * 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 field takes
 * the yellow frame.
 */
.scrape-dialog .column-label,
.scrape-dialog .col-form-label {
  color: var(--overclock-dim);
  font-family: var(--overclock-font-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scrape-dialog .column-label {
  font-size: 0.85rem;
}

.scrape-dialog
  .input-group:has(> .input-group-prepend .text-success)
  :is(.form-control, div.react-select__control) {
  --overclock-tick: var(--overclock-yellow);

  border-bottom-color: var(--overclock-yellow) !important;
}

/* Icons on control buttons keep their meaning */
.btn-secondary .text-muted {
  color: var(--overclock-dim) !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 var(--overclock-rule);
}

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

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

/*
 * Nothing moves anywhere in the Tagger, the stash-box lists or the scrape
 * dialog: no glitch, scan line, blink or snap. Cards in the Tagger keep their
 * brackets where they are and lose the hover readouts. :is() drops
 * pseudo-elements, so each one is named on its own.
 */
:is(
    .search-item,
    .tagger-container,
    .scrape-dialog,
    .PerformerTagger-performer,
    .StudioTagger-studio,
    .TagTagger-tag
  )
  *,
:is(
    .search-item,
    .tagger-container,
    .scrape-dialog,
    .PerformerTagger-performer,
    .StudioTagger-studio,
    .TagTagger-tag
  )
  *::before,
:is(
    .search-item,
    .tagger-container,
    .scrape-dialog,
    .PerformerTagger-performer,
    .StudioTagger-studio,
    .TagTagger-tag
  )
  *::after {
  animation: none !important;
  transition: none !important;
}

:is(
    .tagger-container,
    .PerformerTagger-performer,
    .StudioTagger-studio,
    .TagTagger-tag
  )
  .grid-card:hover
  .thumbnail-section::after {
  --overclock-bracket: 16px;
  --overclock-bracket-w: 2px;

  color: rgb(232 239 238 / 50%);
  inset: 7px;
}

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

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

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

.sidebar-toggle-button-container .sidebar-toggle-button {
  background: var(--overclock-raised);
  border-color: var(--overclock-line);
  border-radius: 0;
  color: var(--overclock-yellow);
  opacity: 1;
  top: calc(var(--overclock-nav-height) + 0.5rem);
}

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

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

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

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

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

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

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

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

/* Bootstrap's progress bars, as in a running job: a segmented yellow bar */
.progress {
  background: var(--overclock-field);
  border: 1px solid var(--overclock-yellow-lo);
  border-radius: 0;
  padding: 1px;
}

.progress .progress-bar {
  background: repeating-linear-gradient(
    90deg,
    var(--overclock-yellow) 0 8px,
    rgb(243 230 0 / 55%) 8px 10px
  );
  color: var(--overclock-black);
  font-family: var(--overclock-font-label);
}

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

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

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

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

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

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

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

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

.item-list-container .filtered-list-toolbar.has-selection {
  background: var(--overclock-panel);
  border: 1px solid var(--overclock-line);
  border-left: 3px solid var(--overclock-yellow);
  border-radius: 0;
}

/* The count of selected items in the selection bar */
.filtered-list-toolbar .selected-items-info {
  border-color: var(--overclock-line);
  font-family: var(--overclock-font-label);
}

.sidebar-pane .sidebar,
.sidebar {
  background:
    repeating-linear-gradient(
      0deg,
      rgb(255 255 255 / 1.6%) 0 1px,
      transparent 1px 3px
    ),
    var(--overclock-panel);
  border-right: 1px solid var(--overclock-line);
}

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

.sidebar .collapse-button.btn.minimal,
.sidebar-section .collapse-button {
  font-family: var(--overclock-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-section + .sidebar-section {
  border-top: 1px dashed var(--overclock-rule);
}

:is(.selectable-filter ul, ul.selectable-list)
  :is(.selected-object, .excluded-object, .unselected-object)
  a:is(:hover, :focus-visible),
.sidebar-saved-filter-list-container
  .saved-filter-item
  a:is(:hover, :focus-visible) {
  background-color: rgb(243 230 0 / 9%);
}

.selectable-filter .include-button,
ul.selectable-list .include-button {
  color: var(--overclock-cyan) !important;
}

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

.paginationIndex {
  color: var(--overclock-dim);
  font-family: var(--overclock-font-label);
  letter-spacing: 0.08em;
}

/*
 * Pagination: separate clipped keys with a gap, as Bootstrap's page links
 * would be. Stash builds it as one group of secondary buttons: numbered keys
 * with the current one active, or, past a few pages, a page count split
 * button in the middle. The current page or the count is the lit key.
 */
.pagination.btn-group {
  gap: 0.3rem;
}

.pagination .btn,
.pagination .btn:first-child,
.pagination .btn:last-child {
  --overclock-cut: 7px;

  border: 1px solid var(--overclock-edge) !important;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    0 100%
  );
  font-family: var(--overclock-font-label);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  min-width: 2.4rem;
}

/* A locked key keeps its dashed frame */
.pagination .btn:disabled {
  border-style: dashed !important;
}

/* The current page is the lit key, as Bootstrap's active page link */
.pagination .btn.btn-secondary.active:not(:disabled) {
  --overclock-fill: var(--overclock-yellow);
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-black);
  --overclock-glow: none;
}

.pagination .page-count-container .btn-group {
  gap: 0;
}

.pagination .page-count-container .btn.page-count {
  --overclock-fill: var(--overclock-yellow);
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-black);

  clip-path: none;
  padding-left: 12px;
  padding-right: 10px;
}

.pagination .page-count-container .btn.page-count-dropdown {
  --overclock-fill: var(--overclock-yellow);
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-black);

  border-left: 1px solid var(--overclock-black) !important;
  min-width: 0;
  padding-left: 8px;
  padding-right: 10px;
}

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

/* Bootstrap's own page links, where Stash uses them */
.pagination {
  gap: 0.3rem;
}

.page-link {
  --overclock-cut: 7px;
  --overclock-edge: var(--overclock-line);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-control);
  border: 1px solid var(--overclock-edge);
  border-radius: 0 !important;
  color: var(--overclock-text);
  font-family: var(--overclock-font-label);
  font-size: 0.95rem;
  margin-left: 0;
  min-width: 2.4rem;
  text-align: center;
}

.page-link:hover {
  --overclock-edge: var(--overclock-yellow);

  background-color: var(--overclock-control);
  color: var(--overclock-yellow);
  z-index: 2;
}

.page-link:focus {
  box-shadow: inset 0 0 0 2px var(--overclock-cyan);
}

.page-item.active .page-link {
  --overclock-edge: var(--overclock-yellow);

  background: var(--overclock-yellow);
  color: var(--overclock-black);
}

/* Tabs: the active tab is a yellow-lit readout with a heavy underline */
.nav-tabs {
  border-bottom: 1px solid var(--overclock-line);
  gap: 0.2rem;
}

.nav-tabs .nav-link {
  --overclock-cut: 8px;

  background: none;
  border: 0;
  border-radius: 0;
  color: var(--overclock-muted);
  font-family: var(--overclock-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 0;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border: 0;
  color: var(--overclock-yellow);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-item.show .nav-link {
  background: rgb(243 230 0 / 8%);
  border: 0;
  box-shadow: inset 0 -3px 0 var(--overclock-yellow);
  color: var(--overclock-yellow);
}

/* The bar of tabs under a detail header */
.detail-body nav {
  border-bottom-color: var(--overclock-line);
}

/* Settings and other pill navs: the chosen pill is a yellow tab with a pip */
.nav-pills .nav-link {
  --overclock-cut: 8px;

  border-radius: 0;
  color: var(--overclock-muted);
  font-family: var(--overclock-font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  position: relative;
  text-transform: uppercase;
}

.nav-pills .nav-link:hover {
  color: var(--overclock-yellow);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--overclock-yellow);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%
  );
  color: var(--overclock-black);
  padding-left: 1.3rem;
}

.nav-pills .nav-link.active::before {
  background: var(--overclock-black);
  content: '';
  height: 5px;
  left: 0.55rem;
  position: absolute;
  top: calc(50% - 2.5px);
  width: 5px;
}

/* Settings: display section titles, the rest on the system font */
.setting-section > h1 {
  color: var(--overclock-yellow);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.setting-section .setting h3,
.setting-section .sub-heading {
  font-family: var(--overclock-font-body);
  letter-spacing: 0;
  text-transform: none;
}

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

.setting-section .setting .value,
.setting-section .sub-heading {
  color: var(--overclock-muted);
}

/* Detail pages: a HUD header with a cyan haze from the top */
.detail-header {
  background:
    radial-gradient(
      900px 420px at 20% -120px,
      rgb(0 229 255 / 9%),
      transparent 70%
    ),
    var(--overclock-panel);
  border-bottom: 1px solid var(--overclock-line);
}

.detail-header .performer-name,
.detail-header :is(.studio-name, .tag-name, .group-name),
.scene-header {
  color: var(--overclock-yellow);
  font-family: var(--overclock-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow:
    -1.5px 0 0 rgb(255 47 208 / 45%),
    1.5px 0 0 rgb(0 229 255 / 45%);
  text-transform: uppercase;
}

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

.detail-item-value {
  color: var(--overclock-text);
}

/* video.js player: a yellow scrub bar over a fading black strip */
.video-js .vjs-control-bar {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgb(5 5 6 / 92%), rgb(5 5 6 / 0%));
}

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

.video-js .vjs-play-progress::before,
.video-js .vjs-volume-level::before {
  color: var(--overclock-yellow);
}

.video-js .vjs-load-progress,
.video-js .vjs-load-progress div {
  background: rgb(0 229 255 / 25%);
}

.video-js .vjs-time-control {
  font-family: var(--overclock-font-label);
}

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

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

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

:is(#root, .modal) .table td {
  border-top: 1px dashed var(--overclock-rule);
}

:is(#root, .modal) .table-striped tr:nth-child(odd) td {
  background: rgb(0 229 255 / 3%);
}

.table-list tbody tr:hover {
  background-color: rgb(243 230 0 / 6%);
}

/* The scene edit form's sticky button bar, which Stash paints slate */
#scene-edit-details .edit-buttons-container {
  background-color: var(--overclock-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 Overclock. 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.
 */
.overclock-restyle-insights #root #insights,
.overclock-restyle-toolkit
  #root
  :is(
    .pt,
    .ptc,
    .pt-strip,
    .pt-entry,
    .pt-fb,
    .pt-side,
    .pt-pane,
    .performer-head[data-pt-tidy]
  ),
.overclock-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(--overclock-rule);
  --sx-deep: var(--overclock-void);
  --sx-slab: var(--overclock-line);
  --sx-tx3: var(--tx3);
  --sx-tx2b: var(--tx2b, var(--tx2));
  --sx-tx2: var(--tx2);
  --sx-tx1b: var(--tx1b);
  --sx-tx: var(--tx);
  --sx-hi: var(--hi);
  --sx-grey: var(--tx2);
  --sx-paper: var(--overclock-text);
  --sx-on: var(--overclock-black);
  --sx-acc: var(--overclock-yellow);
  --sx-acc-tx: var(--overclock-black);

  /* 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. */
.overclock-restyle-insights #root #insights {
  --sx-ui: var(--overclock-field);
  --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), on Overclock's display.
 *
 * 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:
 * overclock.js puts .overclock-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 display.
 */

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

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

/* Insights' palette in Overclock's: teal-black panels in black fields,
   Overclock's text, and eight signals that stay apart on a panel. Yellow
   for Metadata health and warnings, cyan for Files and progress, red for
   Actions and danger, magenta for You, and four Overclock lacks: hazard
   orange for Library, phosphor green for Collection, arc blue and violet.
   Up reads cyan like a match and down red like a miss. O's keep the blue
   they have across Insights' suite, which its O heatmap draws in. */
.overclock-restyle-insights #root #insights {
  --bg: var(--overclock-bg);
  --bg2: var(--overclock-field);
  --ui: var(--overclock-panel);
  --ui2: var(--overclock-raised);
  --ui3: var(--overclock-line);
  --tx3: color-mix(in srgb, var(--overclock-dim) 45%, var(--overclock-line));
  --tx2b: color-mix(in srgb, var(--overclock-dim) 75%, var(--overclock-line));
  --tx2: var(--overclock-dim);
  --tx1b: var(--overclock-muted);
  --tx: var(--overclock-text);
  --hi: #fff;
  --re: var(--overclock-red);
  --or: var(--overclock-orange);
  --ye: var(--overclock-yellow);
  --gr: var(--overclock-green);
  --cy: var(--overclock-cyan);
  --bl: var(--overclock-blue);
  --pu: var(--overclock-violet);
  --ma: var(--overclock-magenta);
  --up: var(--overclock-cyan);
  --down: var(--overclock-red-hi);
  --o: var(--bl);
  --otx: var(--overclock-blue-hi);

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

/* The head: the name in Chakra Petch over a frame line with ticks, and the
   tabs as Stash's tabs, the open one yellow on a heavy underline */
.overclock-restyle-insights #root #insights .ins-head {
  background: repeating-linear-gradient(
      90deg,
      var(--overclock-line) 0 1px,
      transparent 1px 12px
    )
    0 100% / 100% 4px no-repeat;
  border-bottom: 1px solid var(--overclock-line);
  margin-bottom: 20px;
}

.overclock-restyle-insights #root #insights .ins-title {
  color: var(--overclock-text);
  font-family: var(--overclock-font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.overclock-restyle-insights #root #insights .ins-title .ins-ic {
  color: var(--overclock-yellow);
}

.overclock-restyle-insights #root #insights .ins-meta {
  color: var(--overclock-dim);
  font-family: var(--overclock-font-label);
  letter-spacing: 0.04em;
}

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

.overclock-restyle-insights #root #insights .ins-tab {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
  color: var(--overclock-muted);
  font-family: var(--overclock-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
}

.overclock-restyle-insights #root #insights .ins-tab:hover {
  background: none;
  color: var(--overclock-yellow);
}

.overclock-restyle-insights #root #insights .ins-tab.on {
  background: rgb(243 230 0 / 8%);
  box-shadow: inset 0 -3px 0 var(--overclock-yellow);
  color: var(--overclock-yellow);
}

/* Cards are chamfered panels with a frame line, both cuts drawn, and a
   cyan bracket in the bottom-left corner, as Stash's cards in Overclock */
.overclock-restyle-insights #root #insights .ins-card {
  --overclock-cut: 12px;
  --overclock-edge: var(--overclock-line);

  background:
    linear-gradient(
        135deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-panel);
  border: 1px solid var(--overclock-edge);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    var(--overclock-cut) 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%,
    0 var(--overclock-cut)
  );
}

.overclock-restyle-insights #root #insights .ins-card::after {
  background:
    linear-gradient(var(--overclock-cyan) 0 0) 0 100% / 10px 2px no-repeat,
    linear-gradient(var(--overclock-cyan) 0 0) 0 100% / 2px 10px no-repeat;
  bottom: 3px;
  content: '';
  height: 10px;
  left: 3px;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  width: 10px;
}

.overclock-restyle-insights
  #root
  #insights
  :is(.ins-tile.click, .ins-pull):hover {
  --overclock-edge: var(--overclock-yellow);
}

.overclock-restyle-insights #root #insights .ins-ch b {
  font-family: var(--overclock-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.overclock-restyle-insights #root #insights :is(.ins-badge, .ins-sq) {
  --overclock-cut: 6px;

  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
}

/* A tile's colour edge is a flat signal bar, without a glow */
.overclock-restyle-insights #root #insights .ins-tile::before {
  box-shadow: none;
  width: 3px;
}

/* Numbers and small caps are readouts in Share Tech Mono */
.overclock-restyle-insights
  #root
  #insights
  :is(
    .ins-hero .big,
    .ins-tile .v,
    .ins-stats b,
    .ins-nb .v,
    .ins-hubt b,
    .ins-ring .mid b,
    .ins-hkn,
    .ins-row .v,
    .ins-bar em,
    .ins-xl span
  ) {
  font-family: var(--overclock-font-label);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0;
}

.overclock-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,
    .ins-con .hd,
    .ins-con th
  ) {
  font-family: var(--overclock-font-label);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The Files tab already reads as a console: Overclock's own mono */
.overclock-restyle-insights #root #insights .ins-con {
  font-family: var(--overclock-font-label);
}

/* Data wells are dark fields with a frame line and corner ticks, like
   Overclock's form fields */
.overclock-restyle-insights #root #insights :is(.ins-well, .ins-hubqueue) {
  background:
    linear-gradient(var(--overclock-line) 0 0) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--overclock-line) 0 0) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--overclock-line) 0 0) 100% 0 / 1px 7px no-repeat,
    linear-gradient(var(--overclock-line) 0 0) 100% 0 / 7px 1px no-repeat,
    var(--overclock-field);
  border: 1px solid var(--overclock-rule);
  border-radius: 0;
  box-shadow: none;
}

/* Chips are clipped mono tags on a control panel */
.overclock-restyle-insights
  #root
  #insights
  :is(.ins-chip, .ins-nav, .ins-pill, .ins-hchip) {
  --overclock-cut: 6px;
  --overclock-edge: var(--overclock-line);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-chip);
  border: 1px solid var(--overclock-edge);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
  font-family: var(--overclock-font-label);
  letter-spacing: 0.06em;
}

.overclock-restyle-insights #root #insights :is(.ins-chip, .ins-pill):hover {
  --overclock-edge: var(--overclock-yellow);

  color: var(--overclock-yellow);
}

.overclock-restyle-insights #root #insights .ins-seg {
  background: var(--overclock-field);
  border: 1px solid var(--overclock-rule);
  border-radius: 0;
  box-shadow: none;
}

.overclock-restyle-insights #root #insights .ins-seg button {
  border-radius: 0;
  font-family: var(--overclock-font-label);
  letter-spacing: 0.06em;
}

/* The chosen chip of a row is a cyan readout, as in Stash's button groups */
.overclock-restyle-insights
  #root
  #insights
  :is(.ins-chip.on, .ins-seg button.on) {
  --overclock-edge: var(--overclock-cyan);

  background-color: rgb(0 229 255 / 14%);
  box-shadow: inset 0 -2px 0 var(--overclock-cyan);
  color: var(--overclock-cyan);
}

.overclock-restyle-insights #root #insights .ins-hchip.on {
  --overclock-edge: color-mix(in srgb, var(--c) 60%, transparent);

  background-color: color-mix(in srgb, var(--c) 18%, var(--overclock-chip));
}

/* Buttons are flat panels with the bottom-right corner clipped: a control
   panel that turns yellow under the pointer, solid yellow for the one that
   goes ahead, and red behind hazard stripes for the one that deletes */
.overclock-restyle-insights #root #insights .ins-btn {
  --overclock-fill: var(--overclock-control);
  --overclock-edge: var(--overclock-line);
  --overclock-ink: var(--overclock-text);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-fill);
  border: 1px solid var(--overclock-edge);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
  color: var(--overclock-ink);
  filter: none;
  font-family: var(--overclock-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overclock-restyle-insights #root #insights .ins-btn:not(:disabled):hover {
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-yellow);
}

.overclock-restyle-insights #root #insights .ins-btn.ins-pri {
  --overclock-fill: var(--overclock-yellow);
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-black);
}

.overclock-restyle-insights
  #root
  #insights
  .ins-btn.ins-pri:not(:disabled):hover {
  --overclock-fill: var(--overclock-yellow-hi);
  --overclock-edge: var(--overclock-yellow-hi);
  --overclock-ink: var(--overclock-black);
}

.overclock-restyle-insights #root #insights .ins-btn.danger:not(:disabled) {
  --overclock-fill: var(--overclock-red);
  --overclock-edge: var(--overclock-red);
  --overclock-ink: var(--overclock-black);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    linear-gradient(
        90deg,
        transparent 15px,
        var(--overclock-black) 15px 16px,
        transparent 16px
      )
      border-box,
    repeating-linear-gradient(
        -45deg,
        var(--overclock-yellow) 0 5px,
        var(--overclock-black) 5px 10px
      )
      0 0 / 15px 100% no-repeat border-box,
    var(--overclock-fill);
  border-left-color: var(--overclock-yellow);
  padding-left: calc(11px + 15px);
}

.overclock-restyle-insights
  #root
  #insights
  .ins-btn.danger:not(:disabled):hover {
  --overclock-fill: var(--overclock-red-hi);
  --overclock-edge: var(--overclock-red-hi);
  --overclock-ink: var(--overclock-black);
}

/* Armed, a second press deletes: the panel takes a yellow underline */
.overclock-restyle-insights #root #insights .ins-btn.danger.armed {
  --overclock-fill: var(--overclock-red-hi);

  box-shadow: inset 0 -3px 0 var(--overclock-yellow);
}

/* Disabled is locked: a dashed frame behind faint hazard stripes */
.overclock-restyle-insights #root #insights .ins-btn:disabled {
  --overclock-fill: transparent;
  --overclock-edge: var(--overclock-line);
  --overclock-ink: var(--overclock-dim);

  background: var(--overclock-hazard-dim);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 1;
}

/* Links read in cyan and turn yellow under the pointer, as everywhere in
   Overclock */
.overclock-restyle-insights #root #insights :is(.ins-go, .ins-hlink) {
  color: var(--overclock-cyan);
}

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

/* Rules between rows are dashed, like Overclock's dividers */
.overclock-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
  ),
.overclock-restyle-insights #root #insights .ins-con tr + tr td {
  border-top: 1px dashed var(--overclock-rule);
}

.overclock-restyle-insights #root #insights .ins-hkc {
  border: 1px solid var(--overclock-rule);
  border-left: 3px solid var(--overclock-yellow);
  border-radius: 0;
}

/* Up and down, keep and delete: their status colours on the panel */
.overclock-restyle-insights #root #insights :is(.ins-lift, .ins-k) {
  border-radius: 0;
  font-family: var(--overclock-font-label);
  font-weight: 400;
}

.overclock-restyle-insights #root #insights :is(.ins-lift.up, .ins-k.keep) {
  background: color-mix(
    in srgb,
    var(--overclock-cyan) 14%,
    var(--overclock-panel)
  );
}

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

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

.overclock-restyle-insights #root #insights .ins-error {
  background: color-mix(
    in srgb,
    var(--overclock-red) 12%,
    var(--overclock-panel)
  );
  border: 1px solid var(--overclock-red);
  border-left-width: 3px;
  border-radius: 0;
  color: var(--overclock-text);
}

/* Bars are segmented, like Overclock's progress bars, and every bar, track
   and cell is square. The colours stay Insights' own. */
.overclock-restyle-insights
  #root
  #insights
  :is(
    .ins-bar i,
    .ins-week i,
    .ins-trk,
    .ins-trk i,
    .ins-split,
    .ins-div,
    .ins-div i,
    .ins-hkbar,
    .ins-hkbar i,
    .ins-cal i,
    .ins-hm i,
    .ins-legend i,
    .ins-legend2 i,
    .ins-tm div,
    .ins-th,
    .ins-poster
  ) {
  border-radius: 0;
}

.overclock-restyle-insights #root #insights :is(.ins-bar i, .ins-week i) {
  box-shadow: none;
  mask: repeating-linear-gradient(0deg, #000 0 5px, transparent 5px 7px);
}

.overclock-restyle-insights #root #insights .ins-trk i {
  box-shadow: none;
  mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
}

/* Ticked copies and switches are square and yellow when on */
.overclock-restyle-insights #root #insights .ins-bx {
  background: var(--overclock-field);
  border-color: var(--overclock-line);
  border-radius: 0;
  box-shadow: none;
}

.overclock-restyle-insights #root #insights .ins-bx.on {
  background: var(--overclock-yellow);
  border-color: var(--overclock-yellow);
}

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

.overclock-restyle-insights #root #insights .ins-tog i {
  background: var(--overclock-field);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--overclock-line);
}

.overclock-restyle-insights #root #insights .ins-tog i::after {
  background: var(--overclock-line);
  border-radius: 0;
}

.overclock-restyle-insights #root #insights .ins-tog.on i {
  background: var(--overclock-yellow);
  box-shadow: none;
}

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

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

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

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

/* The tag picked in Top tags, whose row carries the colour inline as --c */
.overclock-restyle-insights
  #root
  #insights
  .ins-row[style*='#A9BA5A' i]
  .ins-trk
  i {
  background: var(--overclock-yellow);
}

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

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

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

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

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

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

/* Its tooltip is a yellow tag, like Stash's in Overclock. It sits on
   <body>, outside #insights. */
.overclock-restyle-insights #ins-tip {
  --overclock-cut: 6px;

  background: var(--overclock-yellow);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
  color: var(--overclock-black);
  font-family: var(--overclock-font-label);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.7rem;
}

/* 83-performers-toolkit.css */
/*
 * Performers Toolkit, another author's plugin from the same suite as
 * Insights (gitlab.com/allisless0/stash-plugins), on Overclock's display:
 * its page at /performerstoolkit (.pt), the Stats and Catalog tabs on 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
 * Overclock already styles) and its toast (#pt-toast, on <body>).
 *
 * It paints itself in the Flexoki palette from custom properties it sets on
 * those roots, from a stylesheet it adds after this one, with single-class
 * or id selectors, so these rules start at `#root` (the toast at its id).
 * All of it but the Catalog tab's count and the rule that hides the setting
 * waits for the Restyle Performers Toolkit setting
 * (.overclock-restyle-toolkit on <html>, from overclock.js). Its bars and
 * rings paint from the palette, so they follow it; the colours it writes
 * as hex are matched by their rule and moved 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-Overclock-restylePerformersToolkit']) {
  display: none;
}

/* The count on a performer's Catalog tab is a Stash badge that also carries
   .pt-badge, whose near-black type the toolkit sets for its own filled
   badges. On Overclock's dark badge that type would vanish, so the count
   keeps Overclock's badge type and corners whether the setting is on or
   not. */
#root .badge.pt-badge {
  border-radius: 0;
  color: var(--overclock-text);
}

/* From 0.22, where it tidies a performer's header, it seats the rating
   beside the name. The Locked tag hangs past the name's reticle, where the
   rating's chevrons would cover it, and the chevrons and the O counter
   would run under the side panel, so the rating keeps its own row under
   the name, whether the setting is on or not. */
#root
  #performer-page
  .detail-header
  .performer-head[data-pt-tidy]
  > .quality-group {
  grid-column: 1 / -1;
}

/* The palette Insights takes, from 82-insights.css. --acc stays the
   toolkit's: it picks one of these per tab. From 0.13 it also paints a
   performer's header (when it tidies it), its full-body pictures, side
   panes and overlays. */
.overclock-restyle-toolkit
  #root
  :is(
    .pt,
    .ptc,
    .pt-strip,
    .pt-entry,
    .pt-fb,
    .pt-side,
    .pt-pane,
    .performer-head[data-pt-tidy]
  ),
.overclock-restyle-toolkit :is(#pt-toast, .pt-ov) {
  --bg: var(--overclock-bg);
  --bg2: var(--overclock-field);
  --ui: var(--overclock-panel);
  --ui2: var(--overclock-raised);
  --ui3: var(--overclock-line);
  --tx3: color-mix(in srgb, var(--overclock-dim) 45%, var(--overclock-line));
  --tx2: var(--overclock-dim);
  --tx1b: var(--overclock-muted);
  --tx: var(--overclock-text);
  --hi: #fff;
  --re: var(--overclock-red);
  --or: var(--overclock-orange);
  --ye: var(--overclock-yellow);
  --gr: var(--overclock-green);
  --cy: var(--overclock-cyan);
  --bl: var(--overclock-blue);
  --pu: var(--overclock-violet);
  --ma: var(--overclock-magenta);
}

/* No slab of its own on the toolkit page: the cards sit on the dot grid */
.overclock-restyle-toolkit #root .pt {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The head, as Insights': the name in Chakra Petch over a frame line with
   ticks, and Stash's tabs, the open one yellow on a heavy underline */
.overclock-restyle-toolkit #root .pt-head {
  background: repeating-linear-gradient(
      90deg,
      var(--overclock-line) 0 1px,
      transparent 1px 12px
    )
    0 100% / 100% 4px no-repeat;
  border-bottom: 1px solid var(--overclock-line);
  margin-bottom: 18px;
}

.overclock-restyle-toolkit #root .pt-title {
  color: var(--overclock-text);
  font-family: var(--overclock-font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.overclock-restyle-toolkit #root .pt-title .pt-ic {
  color: var(--overclock-yellow);
}

.overclock-restyle-toolkit #root .pt-read {
  color: var(--overclock-dim);
  font-family: var(--overclock-font-label);
  letter-spacing: 0.04em;
}

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

.overclock-restyle-toolkit #root .pt-tab {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
  color: var(--overclock-muted);
  font-family: var(--overclock-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
}

.overclock-restyle-toolkit #root .pt-tab:hover {
  color: var(--overclock-yellow);
}

.overclock-restyle-toolkit #root .pt-tab.on {
  background: rgb(243 230 0 / 8%);
  box-shadow: inset 0 -3px 0 var(--overclock-yellow);
  color: var(--overclock-yellow);
}

/* Panels are chamfered, with a frame line, both cuts drawn and a cyan
   bracket in the bottom-left corner; the dialog, the review bar and the
   toast also take an overlay's yellow left rule */
.overclock-restyle-toolkit
  #root
  :is(.pt-card, .pt-sheet, .pt-mcard, .pt-ccard, .pt-kpi, .pt-cc),
.overclock-restyle-toolkit #root .pt-rvbar,
.overclock-restyle-toolkit #pt-toast {
  --overclock-cut: 12px;
  --overclock-edge: var(--overclock-line);

  background:
    linear-gradient(
        135deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-panel);
  border: 1px solid var(--overclock-edge);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    var(--overclock-cut) 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%,
    0 var(--overclock-cut)
  );
}

.overclock-restyle-toolkit #root :is(.pt-card, .pt-kpi, .pt-cc) {
  position: relative;
}

.overclock-restyle-toolkit #root :is(.pt-card, .pt-kpi, .pt-cc)::after {
  background:
    linear-gradient(var(--overclock-cyan) 0 0) 0 100% / 10px 2px no-repeat,
    linear-gradient(var(--overclock-cyan) 0 0) 0 100% / 2px 10px no-repeat;
  bottom: 3px;
  content: '';
  height: 10px;
  left: 3px;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  width: 10px;
}

.overclock-restyle-toolkit #root :is(.pt-sheet, .pt-rvbar),
.overclock-restyle-toolkit #pt-toast {
  border-left: 3px solid var(--tk, var(--overclock-yellow));
}

.overclock-restyle-toolkit #root .pt-sheet {
  scrollbar-color: var(--overclock-line) transparent;
}

/* A card's top rule says how a job went: cyan while it runs and when it
   ends, red frame when it failed */
.overclock-restyle-toolkit
  #root
  .pt-card:is(.pt-msg, .pt-busy, .pt-run, .pt-runend) {
  border-top-color: var(--overclock-cyan);
}

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

.overclock-restyle-toolkit #root .pt-ch b,
.overclock-restyle-toolkit #root :is(.pt-flowt, .pt-chead b, .pt-cct, .pt-s3t) {
  font-family: var(--overclock-font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The toast: yellow for news, cyan when something is done, red for an
   error, as Overclock's toasts */
.overclock-restyle-toolkit #pt-toast {
  --tk: var(--overclock-yellow);

  color: var(--overclock-text);
  font-family: var(--overclock-font-label);
  letter-spacing: 0.04em;
}

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

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

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

/* The review bar's status line, coloured the same way */
.overclock-restyle-toolkit #root .pt-rvstat:is(.pt-s-done, .pt-s-info) {
  --sk: var(--overclock-cyan);
}

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

.overclock-restyle-toolkit #root .pt-rvstat.pt-s-error {
  --sk: var(--overclock-red);

  color: var(--overclock-red-hi);
}

.overclock-restyle-toolkit
  #root
  .pt-rvstat:is(.pt-s-done, .pt-s-info, .pt-s-error, .pt-s-warn) {
  border-radius: 0;
  font-family: var(--overclock-font-label);
}

/* Fields are dark, with a bottom rule and corner ticks, and turn yellow
   when focused, as Overclock's form fields */
.overclock-restyle-toolkit
  #root
  :is(.pt-input, .pt-sel, .pt-acct select, .pt-seg select) {
  --overclock-tick: var(--overclock-line);

  background:
    linear-gradient(var(--overclock-tick) 0 0) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 100% 0 / 1px 7px no-repeat,
    linear-gradient(var(--overclock-tick) 0 0) 100% 0 / 7px 1px no-repeat,
    var(--overclock-field);
  border: 0;
  border-bottom: 1px solid var(--overclock-line);
  border-radius: 0;
  box-shadow: none;
  caret-color: var(--overclock-yellow);
  color: var(--overclock-text);
}

.overclock-restyle-toolkit #root .pt-input::placeholder {
  color: var(--overclock-dim);
  font-family: var(--overclock-font-label);
  letter-spacing: 0.04em;
}

.overclock-restyle-toolkit
  #root
  :is(.pt-input, .pt-sel, .pt-acct select, .pt-seg select):focus {
  --overclock-tick: var(--overclock-yellow);

  border-bottom-color: var(--overclock-yellow);
  box-shadow: 0 0 0 1px rgb(243 230 0 / 70%);
}

.overclock-restyle-toolkit #root :is(.pt-sel, .pt-acct select, .pt-seg select) {
  font-family: var(--overclock-font-label);
}

/* Chips, pills, steps and switches are clipped mono tags on a control
   panel */
.overclock-restyle-toolkit
  #root
  :is(.pt-chip, .pt-pill, .pt-step, .pt-tog, .pt-rc) {
  --overclock-cut: 6px;
  --overclock-edge: var(--overclock-line);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-chip);
  border: 1px solid var(--overclock-edge);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
  font-family: var(--overclock-font-label);
  letter-spacing: 0.04em;
}

/* A switch's label is a setting, so it stays on the system font */
.overclock-restyle-toolkit #root .pt-tog {
  font-family: inherit;
  letter-spacing: normal;
}

.overclock-restyle-toolkit
  #root
  :is(button.pt-chip, a.pt-chip, .pt-tog:not(:disabled)):hover {
  --overclock-edge: var(--overclock-yellow);

  color: var(--overclock-yellow);
}

/* The chosen chip of a row is a cyan readout, as in Stash's button groups;
   the step you are on is yellow, as the page you are on */
.overclock-restyle-toolkit #root .pt-chip.on {
  --overclock-edge: var(--overclock-cyan);

  background-color: rgb(0 229 255 / 14%);
  box-shadow: inset 0 -2px 0 var(--overclock-cyan);
  color: var(--overclock-cyan);
}

.overclock-restyle-toolkit #root .pt-step.on {
  --overclock-edge: var(--overclock-yellow);

  background-color: rgb(243 230 0 / 10%);
  color: var(--overclock-yellow);
}

.overclock-restyle-toolkit #root .pt-step b {
  border-radius: 0;
  font-family: var(--overclock-font-label);
  font-weight: 400;
}

.overclock-restyle-toolkit #root .pt-step.on b {
  background: var(--overclock-yellow);
  color: var(--overclock-black);
}

/* Switches are square and yellow when on */
.overclock-restyle-toolkit #root .pt-tog i {
  background: var(--overclock-field);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--overclock-line);
}

.overclock-restyle-toolkit #root .pt-tog i::after {
  background: var(--overclock-line);
  border-radius: 0;
}

.overclock-restyle-toolkit #root .pt-tog.on i {
  background: var(--overclock-yellow);
  box-shadow: none;
}

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

.overclock-restyle-toolkit #root .pt kbd {
  background: var(--overclock-field);
  border: 1px solid var(--overclock-line);
  border-bottom-width: 2px;
  border-radius: 0;
  font-family: var(--overclock-font-label);
  font-weight: 400;
}

/* Wells, the rows and choices inside a panel, are dark fields in a rule */
.overclock-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-box,
    .pt-fbr,
    .pt-rec,
    .pt-wait
  ) {
  background: var(--overclock-field);
  border: 1px solid var(--overclock-rule);
  border-radius: 0;
  box-shadow: none;
}

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

/* The one you pick takes a yellow edge, as the chosen result does in
   Stash's Tagger */
.overclock-restyle-toolkit
  #root
  :is(.pt-sc.on, .pt-cand.on, .pt-scard.on, .pt-dcard.on) {
  background: color-mix(
    in srgb,
    var(--overclock-yellow) 7%,
    var(--overclock-field)
  );
  border-color: var(--overclock-yellow);
  box-shadow: inset 3px 0 0 var(--overclock-yellow);
}

/* Pictures sit square, in a rule */
.overclock-restyle-toolkit #root :is(.pt-shot, .pt-pbig, .pt-gcell, .pt-pc) {
  border: 1px solid var(--overclock-rule);
  border-radius: 0;
  box-shadow: none;
}

.overclock-restyle-toolkit
  #root
  :is(
    .pt-thumb,
    .pt-ava,
    .pt-srimg,
    .pt-sccov,
    .pt-cimg,
    .pt-mcov,
    .pt-cccov,
    .pt-ctimg
  ) {
  border-radius: 0;
}

/* Tags on pictures and badges are clipped mono tags, black on their
   signal; the tag on the one you picked is yellow. The count on the Catalog
   tab is also a .pt-badge, but a Stash .badge in a Stash tab, which
   Overclock's own rules already style. */
.overclock-restyle-toolkit
  #root
  :is(
    .pt-badge:not(.badge),
    .pt-covtag,
    .pt-cpick,
    .pt-dtag,
    .pt-scpick,
    .pt-st
  ) {
  --overclock-cut: 5px;

  border-radius: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
  font-family: var(--overclock-font-label);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.overclock-restyle-toolkit #root :is(.pt-badge:not(.badge), .pt-covtag) {
  color: var(--overclock-black);
}

.overclock-restyle-toolkit
  #root
  :is(.pt-cpick, .pt-scard.on .pt-scpick, .pt-dcard.on .pt-dtag) {
  background: var(--overclock-yellow);
  border-color: transparent;
  color: var(--overclock-black);
}

/* Buttons are flat panels with the bottom-right corner clipped: a control
   panel that turns yellow under the pointer, solid yellow for the one that
   goes ahead, red behind hazard stripes for the one that deletes */
.overclock-restyle-toolkit #root .pt-btn {
  --overclock-fill: var(--overclock-control);
  --overclock-edge: var(--overclock-line);
  --overclock-ink: var(--overclock-text);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    var(--overclock-fill);
  border: 1px solid var(--overclock-edge);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--overclock-cut)),
    calc(100% - var(--overclock-cut)) 100%,
    0 100%
  );
  color: var(--overclock-ink);
  font-family: var(--overclock-font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overclock-restyle-toolkit #root .pt-btn:not(:disabled):hover {
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-yellow);
}

.overclock-restyle-toolkit #root .pt-btn.pt-pri {
  --overclock-fill: var(--overclock-yellow);
  --overclock-edge: var(--overclock-yellow);
  --overclock-ink: var(--overclock-black);
}

.overclock-restyle-toolkit #root .pt-btn.pt-pri:not(:disabled):hover {
  --overclock-fill: var(--overclock-yellow-hi);
  --overclock-edge: var(--overclock-yellow-hi);
  --overclock-ink: var(--overclock-black);
}

.overclock-restyle-toolkit #root .pt-btn.pt-pri kbd {
  background: rgb(10 10 12 / 12%);
  border-color: rgb(10 10 12 / 40%);
  color: var(--overclock-black);
}

.overclock-restyle-toolkit #root .pt-btn.pt-danger:not(:disabled) {
  --overclock-fill: var(--overclock-red);
  --overclock-edge: var(--overclock-red);
  --overclock-ink: var(--overclock-black);

  background:
    linear-gradient(
        315deg,
        var(--overclock-edge) calc(var(--overclock-cut) * 0.7071 + 1px),
        transparent 0
      )
      border-box,
    linear-gradient(
        90deg,
        transparent 15px,
        var(--overclock-black) 15px 16px,
        transparent 16px
      )
      border-box,
    repeating-linear-gradient(
        -45deg,
        var(--overclock-yellow) 0 5px,
        var(--overclock-black) 5px 10px
      )
      0 0 / 15px 100% no-repeat border-box,
    var(--overclock-fill);
  border-left-color: var(--overclock-yellow);
  padding-left: calc(12px + 15px);
}

.overclock-restyle-toolkit #root .pt-btn.pt-danger:not(:disabled):hover {
  --overclock-fill: var(--overclock-red-hi);
  --overclock-edge: var(--overclock-red-hi);
  --overclock-ink: var(--overclock-black);
}

/* The quiet delete: a control panel with red type that frames red */
.overclock-restyle-toolkit #root .pt-btn.pt-dangerl {
  --overclock-ink: var(--overclock-red-hi);
}

.overclock-restyle-toolkit #root .pt-btn.pt-dangerl:not(:disabled):hover {
  --overclock-edge: var(--overclock-red);
  --overclock-ink: var(--overclock-red-hi);
}

/* Disabled is locked: a dashed frame behind faint hazard stripes */
.overclock-restyle-toolkit #root .pt-btn:disabled {
  --overclock-fill: transparent;
  --overclock-edge: var(--overclock-line);
  --overclock-ink: var(--overclock-dim);

  background: var(--overclock-hazard-dim);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 1;
}

/* Links read in cyan and turn yellow under the pointer, as everywhere in
   Overclock */
.overclock-restyle-toolkit #root :is(.pt-link, a.pt-pill),
.overclock-restyle-toolkit #pt-toast .pt-link {
  color: var(--overclock-cyan);
}

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

/* The colours the toolkit writes as hex: good reads cyan like a match, bad
   red like a miss, O's in the suite's light blue */
.overclock-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(--overclock-cyan);
}

.overclock-restyle-toolkit #root :is(.pt-err, .pt-c-re, .pt-why .no) {
  color: var(--overclock-red-hi);
}

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

.overclock-restyle-toolkit
  #root
  :is(.pt-why span, .pt-seg, .pt-banner, .pt-fwc) {
  border-radius: 0;
}

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

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

/* The strip under a performer's name reads as a mono readout */
.overclock-restyle-toolkit #root #pt-strip {
  font-family: var(--overclock-font-label);
  letter-spacing: 0.04em;
}

/* Numbers and small caps are readouts in Share Tech Mono */
.overclock-restyle-toolkit
  #root
  :is(.pt-kpi b, .pt-ring b, .pt-pnum, .pt-dmid b, .pt-tc, .pt-num, .pt-bl) {
  font-family: var(--overclock-font-label);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0;
}

.overclock-restyle-toolkit #root :is(.pt-kpik, .pt-sh) {
  font-family: var(--overclock-font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Bars are segmented like Overclock's progress bars, and square */
.overclock-restyle-toolkit
  #root
  :is(.pt-bw i, .pt-track, .pt-track i, .pt-lbar) {
  border-radius: 0;
  box-shadow: none;
}

.overclock-restyle-toolkit #root .pt-bw i {
  mask: repeating-linear-gradient(0deg, #000 0 5px, transparent 5px 7px);
}

.overclock-restyle-toolkit #root .pt-track i {
  mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
}

/* 85-loading.css */
/*
 * Loading: a segmented bar that counts its percentage up over a scrolling hex
 * dump, in place of Bootstrap's spinner. Calm mode holds it on a still frame
 * at 64%.
 */
.LoadingIndicator .spinner-border {
  --overclock-cut: 6px;
  --overclock-pct: 64;

  animation: overclock-load 2.5s steps(25, end) infinite;
  background:
    repeating-linear-gradient(
        90deg,
        var(--overclock-yellow) 0 8px,
        transparent 8px 10px
      )
      0 0 / calc(var(--overclock-pct) * 1%) 100% no-repeat,
    repeating-linear-gradient(
      90deg,
      rgb(243 230 0 / 13%) 0 8px,
      transparent 8px 10px
    );
  background-origin: content-box;
  border: 1px solid var(--overclock-yellow-lo);
  border-radius: 0;
  counter-reset: overclock-pct var(--overclock-pct);
  height: 1.25rem;
  margin-top: 1.1rem;
  max-width: 100%;
  padding: 2px;
  position: relative;
  vertical-align: middle;
  width: 15rem;
}

/* The top line of the loader: what it is doing, and how far */
.LoadingIndicator .spinner-border::before,
.LoadingIndicator .spinner-border::after {
  bottom: calc(100% + 5px);
  font: 0.68rem/1 var(--overclock-font-label);
  letter-spacing: 0.12em;
  position: absolute;
}

.LoadingIndicator .spinner-border::before {
  animation: overclock-blink 1s steps(1, end) infinite;
  color: var(--overclock-cyan);
  content: '▲ UPLOADING';
  left: -1px;
}

/*
 * Step counts divide 100 evenly: WebKit does not round an animated <integer>,
 * and a fractional value would void the counter
 */
.LoadingIndicator .spinner-border::after {
  --overclock-pct: 64;

  animation: overclock-load 2.5s steps(25, end) infinite;
  color: var(--overclock-yellow);
  content: counter(overclock-pct, decimal-leading-zero) '%';
  counter-reset: overclock-pct var(--overclock-pct);
  right: -1px;
}

.LoadingIndicator-message {
  color: var(--overclock-yellow);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
}

.LoadingIndicator::after {
  animation: overclock-hexdump 3.2s steps(16, end) infinite;
  background: url('assets/icons/hexdump.svg') 0 0 / 220px 176px repeat-y;
  content: '';
  height: 22px;
  margin-top: 0.75rem;
  max-width: 100%;
  opacity: 0.8;
  width: 220px;
}

/*
 * Small and inline loaders, as in menus, buttons and the package manager:
 * a short bar with no readout and no hex dump
 */
.LoadingIndicator:is(.small, .inline) .spinner-border,
.saved-filter-list-menu .LoadingIndicator .spinner-border {
  height: 0.75rem;
  margin: 0 0.25rem;
  padding: 1px;
  width: 3.5rem;
}

.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,
.LoadingIndicator:is(.small, .inline)::after,
.saved-filter-list-menu .LoadingIndicator::after {
  content: none;
}

@keyframes overclock-load {
  from {
    --overclock-pct: 0;
  }

  to {
    --overclock-pct: 100;
  }
}

@keyframes overclock-blink {
  50% {
    opacity: 0.25;
  }
}

@keyframes overclock-hexdump {
  to {
    background-position: 0 -176px;
  }
}

/* 90-motion.css */
/*
 * Glitch: the type jumps and splits red and cyan, with a sliced band, then
 * settles. Nothing here moves, resizes or clips the hovered element itself,
 * so the pointer never falls off what it is hovering: the glyphs are painted
 * transparent and their shadow, offset, stands in for them, and the slice is
 * a pseudo-element band that inverts what is under it.
 */
@keyframes overclock-glitch {
  0% {
    -webkit-text-fill-color: transparent;
    text-shadow:
      -7px 0 0 currentcolor,
      -9px 0 0 rgb(255 31 75 / 85%),
      -5px 0 0 rgb(0 229 255 / 85%);
  }

  25% {
    -webkit-text-fill-color: transparent;
    text-shadow:
      8px 0 0 currentcolor,
      10px 0 0 rgb(255 31 75 / 85%),
      6px 0 0 rgb(0 229 255 / 85%);
  }

  50% {
    -webkit-text-fill-color: transparent;
    text-shadow:
      -4px 0 0 currentcolor,
      -2px 0 0 rgb(255 31 75 / 85%),
      -6px 0 0 rgb(0 229 255 / 85%);
  }

  75% {
    -webkit-text-fill-color: transparent;
    text-shadow:
      2px 0 0 currentcolor,
      1px 0 0 rgb(255 31 75 / 80%),
      3px 0 0 rgb(0 229 255 / 80%);
  }

  100% {
    -webkit-text-fill-color: currentcolor;
    text-shadow: none;
  }
}

@keyframes overclock-slice {
  0% {
    height: 24%;
    left: -6px;
    opacity: 1;
    top: 14%;
  }

  25% {
    height: 18%;
    left: 5px;
    top: 58%;
  }

  50% {
    height: 12%;
    left: -3px;
    top: 34%;
  }

  75%,
  100% {
    opacity: 0;
  }
}

/* For icons the colour lives in a mask: split with a filter, jitter the svg */
@keyframes overclock-split {
  0% {
    filter: drop-shadow(-2px 0 0 #ff1f4b) drop-shadow(2px 0 0 #00e5ff);
  }

  33% {
    filter: drop-shadow(2px 0 0 #ff1f4b) drop-shadow(-2px 0 0 #00e5ff);
  }

  66% {
    filter: drop-shadow(-1px 0 0 #ff2fd0) drop-shadow(1px 0 0 #00e5ff);
  }

  100% {
    filter: none;
  }
}

@keyframes overclock-jitter {
  0% {
    transform: translateX(-2px) skewX(-12deg);
  }

  33% {
    transform: translateX(2px) scaleY(0.82);
  }

  66% {
    transform: translateX(-1px);
  }

  100% {
    transform: none;
  }
}

/* What glitches, and the band that slices it */
:where(
  .btn:not(.minimal),
  .top-nav .btn.minimal,
  .tag-item.badge,
  .nav-tabs .nav-link,
  .page-link
) {
  isolation: isolate;
  position: relative;
}

:where(
  .btn:not(.minimal, .favorite-button, .dropdown-toggle),
  .top-nav .btn.minimal,
  .tag-item.badge,
  .nav-tabs .nav-link,
  .page-link
)::after {
  background: var(--overclock-cyan);
  content: '';
  height: 20%;
  left: 0;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 40%;
  width: 100%;
}

.btn:not(:disabled, .disabled, .minimal):hover,
.top-nav .btn.minimal:hover,
.tag-item.badge:hover,
.nav-tabs .nav-link:not(.active):hover,
.page-item:not(.active) .page-link:hover,
.grid-card:hover .card-section-title {
  animation: overclock-glitch 170ms steps(1, end) 1;
}

.btn:not(:disabled, .disabled, .minimal, .dropdown-toggle):hover::after,
.top-nav .btn.minimal:hover::after,
.tag-item.badge:hover::after,
.nav-tabs .nav-link:not(.active):hover::after,
.page-item:not(.active) .page-link:hover::after {
  animation: overclock-slice 170ms steps(1, end) 1;
}

:is(.rating-stars, .card-popovers, .count-button)
  .btn.minimal:not(:disabled):hover,
#root .favorite-button:hover {
  animation: overclock-split 150ms steps(1, end) 1;
}

:is(.rating-stars, .card-popovers, .count-button)
  .btn.minimal:not(:disabled):hover
  svg,
#root .favorite-button:hover svg {
  animation: overclock-jitter 150ms steps(1, end) 1;
}

/* The reticle closes and turns as it locks */
@keyframes overclock-lock {
  0% {
    opacity: 0.4;
    transform: scale(1.8) rotate(90deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes overclock-blink-in {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  55% {
    opacity: 0;
  }

  80% {
    opacity: 1;
  }
}

@keyframes overclock-scan {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(300%);
  }
}

@keyframes overclock-count {
  from {
    --overclock-pct: 0;
  }

  to {
    --overclock-pct: 100;
  }
}

/*
 * Bursts: square pixels, data shards and hex digits, with a red fringe.
 * overclock.js places each particle at the click and removes it when its
 * animation ends, so every kind animates.
 */
.overclock-burst {
  animation: overclock-burst 460ms steps(9, end) forwards;
  background: var(--overclock-yellow);
  box-shadow:
    -2px 0 0 var(--overclock-red),
    2px 0 0 var(--overclock-cyan);
  height: 6px;
  pointer-events: none;
  position: fixed;
  width: 6px;
  z-index: 2000;
}

.overclock-burst.is-cyan {
  background: var(--overclock-cyan);
  box-shadow:
    -2px 0 0 var(--overclock-magenta),
    2px 0 0 #fff;
  height: 5px;
  width: 5px;
}

.overclock-burst.is-red {
  background: var(--overclock-red);
  box-shadow: 2px 0 0 var(--overclock-yellow);
  height: 4px;
  width: 4px;
}

.overclock-burst.is-shard {
  animation-duration: 560ms;
  background: linear-gradient(
    90deg,
    var(--overclock-red) 0 18%,
    var(--overclock-yellow) 18% 82%,
    var(--overclock-cyan) 82%
  );
  box-shadow: none;
  height: 13px;
  mask: url('assets/icons/glyph-shard.svg') center / contain no-repeat;
  width: 13px;
}

.overclock-burst.is-shard.is-cyan {
  background: linear-gradient(
    90deg,
    var(--overclock-magenta) 0 18%,
    var(--overclock-cyan) 18% 82%,
    #fff 82%
  );
  height: 11px;
  width: 11px;
}

.overclock-burst.is-char {
  animation-name: overclock-burst-char;
  background: none;
  box-shadow: none;
  color: var(--overclock-yellow);
  font: 0.85rem/1 var(--overclock-font-label);
  height: auto;
  text-shadow:
    -1.5px 0 0 var(--overclock-red),
    1.5px 0 0 var(--overclock-cyan);
  width: auto;
}

.overclock-burst.is-c0::after {
  content: '0';
}

.overclock-burst.is-c1::after {
  color: var(--overclock-cyan);
  content: '1';
}

.overclock-burst.is-cf::after {
  content: 'F';
}

.overclock-burst.is-c7a::after {
  color: var(--overclock-cyan);
  content: '7A';
}

@keyframes overclock-burst {
  0% {
    opacity: 1;
    rotate: 0deg;
    translate: -50% -50%;
  }

  70% {
    opacity: 1;
  }

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

@keyframes overclock-burst-char {
  0% {
    opacity: 1;
    translate: -50% -50%;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: calc(-50% + var(--dx) * 1.15) calc(-50% + var(--dy) * 1.15);
  }
}

/*
 * Calm mode and reduced motion: everything holds still, the session clock
 * included, and the loader stays on a still frame. Stash fades its loader in
 * with an animation, so it is shown outright. Calm mode leaves particles
 * already in flight to finish, since overclock.js removes each one when its
 * animation ends.
 */
.overclock-calm :not(.overclock-burst),
.overclock-calm :not(.overclock-burst)::before,
.overclock-calm :not(.overclock-burst)::after {
  animation: none !important;
  transition: none !important;
}

.overclock-calm .LoadingIndicator {
  opacity: 1;
}

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

  .LoadingIndicator {
    opacity: 1;
  }

  .overclock-burst {
    display: none;
  }
}

/* 95-sfw.css */
/*
 * Empty states: no signal, a flat trace on a dead scope. Stash marks an empty
 * list with nothing but "0-0 of 0" in .paginationIndex, and overclock.js adds
 * the line; without the voice (Plain labels or SFW mode) the list keeps the
 * scope and no line. Cyan, since nothing here is an error.
 */
.overclock-empty,
.paginationIndex[data-overclock-empty]:not([data-overclock-empty='']) {
  align-items: center;
  color: var(--overclock-cyan);
  display: flex;
  flex-direction: column;
  font-family: var(--overclock-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  gap: 0.55rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 0 12px rgb(0 229 255 / 35%);
  text-transform: uppercase;
}

.overclock-empty::before,
.paginationIndex[data-overclock-empty]::before {
  background: url('assets/icons/flatline.svg') center / contain no-repeat;
  content: '';
  height: 64px;
  max-width: 220px;
  width: 100%;
}

.overclock-empty::after {
  color: var(--overclock-dim);
  content: 'Ch.07 · no carrier';
  font: 0.66rem/1 var(--overclock-font-label);
  letter-spacing: 0.14em;
  text-shadow: none;
}

/* Stash marks the line .text-muted, which Bootstrap sets with !important */
.paginationIndex[data-overclock-empty] {
  align-items: center;
  color: var(--overclock-dim);
  display: flex;
  flex-direction: column;
  font-family: var(--overclock-font-label);
  gap: 0.5rem;
  padding-block: 1.5rem;
}

.paginationIndex[data-overclock-empty]:not([data-overclock-empty='']) {
  color: var(--overclock-cyan) !important;
  font-size: 0;
}

.paginationIndex[data-overclock-empty]:not([data-overclock-empty=''])::after {
  content: attr(data-overclock-empty);
  font-size: 1.2rem;
  text-shadow: none;
}

/*
 * Stash's SFW content mode keeps the HUD and drops the targeting of people:
 * no Target acquired tag and no crosshairs on a performer, and bursts lose
 * their red (overclock.js).
 */
.sfw-content-mode .performer-card .thumbnail-section > a::before {
  content: none !important;
}

.sfw-content-mode .performer-card:hover .thumbnail-section::after {
  background:
    linear-gradient(currentcolor 0 0) 0 0 / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 0 0 / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 0 100% / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 0 100% / var(--overclock-bracket-w)
      var(--overclock-bracket),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--overclock-bracket)
      var(--overclock-bracket-w),
    linear-gradient(currentcolor 0 0) 100% 100% / var(--overclock-bracket-w)
      var(--overclock-bracket);
  background-repeat: no-repeat;
}