/* Rules for the product-screen mockups in assets/js/screens/.
 *
 * These were <helmet> blocks inside the four .dc.html components, injected into
 * the page head as each component mounted. Three of them declared conflicting
 * `.pl-scroll` scrollbars and two set a page-wide `a` colour; whichever mounted
 * last won. Here the scrollbar rules are stated once — the pair that used to win
 * — and the link colours are scoped to the screen that wanted them, so they no
 * longer reach the site's own links. */

/* A template branch that is currently off. It has to beat the inline
   display:flex the screens set on almost everything. */
.pl-off { display: none !important; }

/* Phone scrollers: no visible bar. */
.pl-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pl-scroll { scrollbar-width: none; -ms-overflow-style: none; }

/* Except the protocol detail, which shows a slim one so the sheet reads as
   having more below. */
.pl-scrollbar { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.pl-scrollbar::-webkit-scrollbar { width: 4px; }
.pl-scrollbar::-webkit-scrollbar-track { background: transparent; }
.pl-scrollbar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }

/* Weight sliders. */
.pl-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: var(--radius-pill);
  background: rgba(27, 43, 91, 0.12); outline: none; cursor: pointer;
}
.pl-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--primary-60); border: 3px solid var(--surface-sheet);
  box-shadow: 0 1px 4px rgba(0, 30, 50, 0.3); cursor: pointer;
}
.pl-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: var(--radius-pill);
  background: var(--primary-60); border: 3px solid var(--surface-sheet);
  box-shadow: 0 1px 4px rgba(0, 30, 50, 0.3); cursor: pointer;
}

/* Links inside a screen follow the product palette, not the site's. */
.pl-screen a { color: var(--accent-text-strong); }
.pl-screen a:hover { color: var(--accent-default); }

/* Pressed states, previously `style-active` attributes on the elements. */
.proto-row:active { background: var(--accent-tint-subtle) !important; }
.undo-btn:active { background: var(--accent-tint) !important; }

/* The rail joining the two rows of the allocation summary. */
.alloc-link-down::after,
.alloc-link-up::after {
  content: ''; position: absolute; left: 50%; margin-left: -1px;
  width: 2px; background: var(--accent-default); border-radius: var(--radius-pill);
}
.alloc-link-down::after { top: 50%; bottom: calc(-1 * var(--space-xl)); }
.alloc-link-up::after { top: calc(-1 * var(--space-xl)); bottom: 50%; }