/* THE SURFACE IN THE CLOTHES OF THE PREREG WEBSITE */

/* This sheet is an overlay. shinystyles.css is loaded first and is not touched
   by a single character; what has to look different is overridden here. It is
   linked only when the sheet "app" of the item table says theme = prereg.

   The values below were read off https://prereg-psych.org/ from the computed
   styles. They stand here as variables and nowhere else. */

/* THE TYPEFACES

   Four files under fonts/, weight 400 only, taken from the Google Fonts stock
   (Montserrat v31, Zilla Slab v12). Both are under the SIL Open Font License
   1.1 without a Reserved Font Name; the licence texts lie next to the files.

   The unicode-range lines are copied from the Google stylesheet unchanged:
   they make the browser fetch latin-ext only when a character needs it.
   font-display: swap means the fallback below is what a reader sees while the
   file loads, and if it is missing. */

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

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/zilla-slab-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/zilla-slab-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* The colours. Cyan is a marking colour and never a background for running
     text: white on it computes to 3.3:1, which is enough for large type and
     not enough for a paragraph. Indigo carries 13.5:1 and does the work. */
  --zpid-indigo: #2b2171;         /* headings, buttons, footer text */
  --zpid-indigo-header: #1e1b4b;  /* pressed buttons */
  --zpid-cyan: #0097c6;           /* banner bar, active tab, hover, symbols */
  /* The same cyan, dark enough to carry text. #0097c6 computes to 3.36:1 on
     white: enough for a graphical object and for large type, short of the
     4.5:1 that text owes (SC7). The star is a character, and it stands in
     16px text as often as in a heading, so it takes this one. Not a second
     colour of the house - the darker step of the one there is. */
  --zpid-cyan-text: #00819f;      /* 4.53:1 on white */
  --zpid-footer-top: #e2e8f0;     /* upper footer band */
  --zpid-footer-bottom: #f1f5f9;  /* lower footer band */
  --zpid-text: #000;              /* running text */

  /* The type. Both families are shipped in weight 400 only, exactly as the
     website ships them, and bold is left to the browser - a real 700 cut would
     look better and therefore look different. The fallbacks matter: they are
     what a reader sees for the moment before the files are there, and what
     they see if a file is missing. */
  --zpid-font-body: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --zpid-font-head: "Zilla Slab", Georgia, "Times New Roman", serif;
  --zpid-size: 16px;
  --zpid-line: 24px;

  /* The controls. */
  --zpid-radius: 4px;
  --zpid-button-padding: 8px 16px;
  --zpid-button-height: 48px;
  --zpid-button-size: 14px;       /* the label of a button, not of the page */

  /* The page. */
  --zpid-width: 1280px;
}

/* THE HEAD

   Two blocks instead of four, under names of their own: the base sheet styles
   .logobar, .logo, .contact, .headerbar and .sidecolumn, and reusing those
   names would mean undoing every one of their rules first.

   Read off the website from the computed styles: logo row in a centred
   container of 1280px with 16px padding, logo 115px tall; under it the band,
   its ground running the full width of the window, its writing stopping at the
   same 1280, Montserrat 36/40 in white. The page itself becomes that centred
   container, which is what replaces the dark column on the left. */
.container-fluid {
  max-width: var(--zpid-width);
  margin: 0 auto;
}

.prereg-logobar {
  display: flex;
  align-items: center;
  padding: 16px;
}

/* The svg is 115px tall on the website and carries its width itself. Not the
   class .logo: that one is the old head's, and it brings 5em of padding on top
   from the base sheet. */
.prereg-logo {
  height: 115px;
  width: auto;
  max-width: 100%;
}

/* Gone: .prereg-legal. The three legal links sit in the foot now, where the
   website has them; this corner carries its language links, and this form has
   one language. */

/* The band. Cyan, the colour the running version carries, and the same cyan to
   both edges of the window while its writing stays inside the centred page;
   stopping the colour at 1280 would leave two white margins beside it on a
   wider screen. White on this ground computes to 3.4:1, which the 36px line
   owes and holds.

   box-shadow plus clip-path rather than the usual 100vw trick: 100vw counts
   the scrollbar, so a full-bleed built that way is about 15px wider than the
   window and produces horizontal drag. */
.prereg-banner {
  background-color: var(--zpid-cyan);
  box-shadow: 0 0 0 100vmax var(--zpid-cyan);
  clip-path: inset(0 -100vmax);
  color: #fff;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 16px;
}

.prereg-banner-text {
  font-family: var(--zpid-font-body);
  font-size: 36px;
  line-height: 40px;
}

/* Gone: .headerbar { background-color: indigo }, which painted the old head
   while there was no new one. */

/* THE FOOT

   The old surface has none: logo, legal links and contact address stand in its
   head. Measured at the website, which has three bands; two is what fits here,
   because a form has no site menu and no social links.

   Which band carries what is not a matter of taste. The focus ring is cyan and
   owes 3:1 against what lies next to it: #0097c6 computes to 2.73:1 on the
   upper band and 3.07:1 on the lower one, so everything one can reach with the
   keyboard sits below. */
.prereg-footer {
  /* the form ends, then air, then the foot - without it the last answer of a
     page sits directly against the first band */
  margin-top: 32px;
}

/* Both bands go full-bleed the way the banner does, and for the same reason:
   100vw counts the scrollbar and would put back 15px of horizontal drag. The
   shadow paints past both edges, the clip cuts it off. */
.prereg-footer-band {
  clip-path: inset(0 -100vmax);
  color: var(--zpid-indigo);
}

.prereg-footer-top {
  background-color: var(--zpid-footer-top);
  box-shadow: 0 0 0 100vmax var(--zpid-footer-top);
}

.prereg-footer-bottom {
  background-color: var(--zpid-footer-bottom);
  box-shadow: 0 0 0 100vmax var(--zpid-footer-bottom);
}

/* 16px, the same inset the logo row and the banner carry: the writing of all
   four blocks stands on one line down the left edge of the page. */
.prereg-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px;
}

/* bootstrap gives every p 10px below it; in a band that is measured from its
   padding that would be 10px of tilt */
.prereg-footer-service {
  margin: 0;
}

.prereg-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* The one place where a link does not take cyan when the pointer is over it:
   #00819f computes to 4.13:1 on this band and text owes 4.5:1. What hovering
   shows here is bootstrap's own underline. The website does not colour its
   footer links either. */
.prereg-footer a:hover,
.prereg-footer a:focus {
  color: var(--zpid-indigo);
}

/* THE PAGE BAND

   Bootstrap 3 draws tabsetPanel() as ul.nav.nav-tabs > li[.active] > a: a row
   of boxes with a 1px line under them. The website has no boxes and no line,
   only a 4px cyan underline under the point one is on.

   Three deviations from the website, each with its reason:
   1. the labels stay indigo. Every link in this sheet is indigo, and these
      nine are the only navigation of the form.
   2. 44px instead of 28: everything one taps owes 44px, and 10px above plus
      6px below the line carry it.
   3. row gap 4px instead of 20: nine points wrap into six rows at 375px, and
      20px between them would put 100px of nothing above every page. */

.nav-tabs {
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  /* 20px is the website's horizontal gap. Vertically it can give no value:
     its four points never wrap. */
  gap: 4px 20px;
  margin-bottom: 20px;
}

.nav-tabs > li {
  /* bootstrap floats the points and pulls them 1px down over the line the row
     used to stand on. There is no line and no float any more. */
  float: none;
  margin-bottom: 0;
}

/* :hover and :focus carry the same declarations because bootstrap writes them
   with .nav > li > a:hover - one element more than the resting state, so a
   rule that only names the resting state loses exactly while the pointer is
   over the point, as with the buttons. */
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  padding: 10px 0 6px;
  margin-right: 0;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  background-color: transparent;
  line-height: var(--zpid-line);
}

/* The active point. Bootstrap paints it #555 on a white box, which made the
   page one is on the palest thing in a row of indigo. The box comes from
   .nav-tabs > li.active > a { border: 1px solid #ddd }, one class more than
   the rule for all points, so the border is written out again here; setting
   only the colour left a 1px cyan line where the others carry 4px. */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--zpid-indigo);
  font-weight: 700;
  border: 0;
  border-bottom: 4px solid var(--zpid-cyan);
  background-color: transparent;
}

/* bootstrap-accessibility.min.css, which shiny brings along, writes
   .nav > li > a:focus-visible { outline: black auto 1px } and is one element
   more specific than the a:focus-visible of THE KEYBOARD. Without this rule
   the tab row was the one place where the cyan ring never appeared. */
ul.nav-tabs > li > a:focus-visible {
  outline: 3px solid var(--zpid-cyan);
  outline-offset: 2px;
}

/* THE TYPE

   Montserrat for everything that is read, Zilla Slab for headings, both at the
   website's sizes. 16px/24px sit on body: bootstrap 3 puts 10px on html and
   measures some of its own values in rem. */
body {
  font-family: var(--zpid-font-body);
  font-size: var(--zpid-size);
  line-height: var(--zpid-line);
  color: var(--zpid-text);
}

/* Bootstrap sizes .form-control, .btn and the labels at 14px of their own, so
   they do not follow the body. Fields are brought along deliberately: under
   16px a mobile browser zooms into the field on focus and leaves the page
   sitting askew afterwards - a long form is the worst place for that. */
.form-control,
.help-block,
label,
.btn {
  font-family: var(--zpid-font-body);
  font-size: var(--zpid-size);
  line-height: var(--zpid-line);
}

/* The headings take the slab, in indigo, and bold is left to the browser: only
   weight 400 is shipped, exactly as the website ships it. A real 700 cut would
   look better and therefore look different - the one place in this feature
   where the worse of two results is the right one. */
h1, h2, h3, h4, h5, h6,
.icon-paragraph strong {
  font-family: var(--zpid-font-head);
  font-weight: 700;
  color: var(--zpid-indigo);
}

h1 { font-size: 38.4px; line-height: 1.2; }
h2 { font-size: 32px; line-height: 1.2; }

/* An item heading is a question, not a section title. The website's h2 is
   32px; a page there carries three headings, this form carries ninety, and at
   32px the questions would drown the answers. Face, weight and colour stay. */
.icon-paragraph strong {
  font-size: 20px;
  line-height: 28px;
}

/* h3 gets face, weight and colour above, but no size: shinydashboard writes an
   empty <h3 class="box-title"> into every one of the ~180 boxes of this form.
   Sizing those would space out the whole page for text that does not exist,
   and hiding them is a layout change that has nothing to do with type. */

/* THE MARKS

   The info and question icons are graphical objects and take the website's
   cyan, 3.36:1 against white. The star is a character and stands in 16px text,
   so it takes the darker step, 4.53:1. */

a {
  color: var(--zpid-indigo);
}

/* Hovering marks in cyan, as on the website - in the darker step, because a
   link stays text while the pointer is over it. */
a:hover,
a:focus {
  color: var(--zpid-cyan-text);
}

/* The info and question marks are icons, not text: 3.36:1 clears the 3:1 that
   a graphical object owes, and they keep the website's exact cyan. */
.info_icon,
.question_icon {
  color: var(--zpid-cyan);
}

/* The star stays a mark and not a word: light weight in a bold heading, and
   the sentence explaining it stays in its title attribute. Only the colour
   changes here. */
.star {
  color: var(--zpid-cyan-text);
}

/* The note windows. White on indigo is 13.47:1, against 4.56:1 before. The
   arrow is bootstrap's and was still black while the box was blue - a corner
   nobody had painted; it goes along now. The addresses inside stay white and
   underlined, which shinystyles.css already says and says more specifically
   than anything here. */
.tooltip-inner {
  background-color: var(--zpid-indigo);
}

/* Bootstrap writes the font family onto .tooltip itself, so the note would
   run in the browser default while everything around it is Montserrat. */
.tooltip {
  font-family: var(--zpid-font-body);
}

.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
  border-top-color: var(--zpid-indigo);
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: var(--zpid-indigo);
}

.tooltip.left .tooltip-arrow  { border-left-color: var(--zpid-indigo); }
.tooltip.right .tooltip-arrow { border-right-color: var(--zpid-indigo); }

/* THE BUTTONS

   The website has one button and no second kind, so the two ranks here are
   this form's own: what carries the work forward is filled indigo, everything
   else is an indigo outline on white. Both take the website's shape, 4px
   radius and 8/16px padding.

   Two things bootstrap makes necessary. It writes :hover and :focus with the
   same weight as the rest, so every state has to be named again, and it writes
   :active:hover with one class more, which is why the pressed state is
   repeated there. Minimum height 48px, and 16px in the fields: under 16px a
   mobile browser zooms into a field on focus and leaves the page askew. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 8px, not .5rem: bootstrap sets the root to 10px (see THE TYPE above), so
     the website's .5rem would arrive here as 5px. In flex layout the space
     between an icon and its label is no longer a text node that renders -
     without this, "Download .rds" would sit against its arrow. */
  gap: 8px;
  min-height: var(--zpid-button-height);
  min-width: var(--zpid-button-height);
  padding: var(--zpid-button-padding);
  border-radius: var(--zpid-radius);
  font-size: var(--zpid-button-size);
  font-weight: 700;
  /* The website fades the colours over .2s and pops the button by a scale
     step on top of that. The fade goes along, the pop does not: it is
     movement, it is on every press, and it buys nothing here. */
  transition: background-color .2s, border-color .2s, color .2s;
}

/* The export button carries an icon and an empty label span. Empty is still a
   flex item, and the gap above would then push the icon off centre. */
.btn > .action-label:empty {
  display: none;
}

/* The upload row is a button and a field welded together, and bootstrap welds
   them edge to edge: the field kept its 34px and the seam grew a 14px step the
   moment the button became 48. Field heights are set further down; this one is
   the button's own row and follows the button here. It is the only input group
   in the form - counted in the running page, not assumed. */
.input-group .form-control {
  height: var(--zpid-button-height);
}

/* THE SECOND RANK - everything that is not carrying the form forward. It is
   the default, so it is written first and the first rank overrides it below:
   both lists weigh the same, and what settles a tie is which one stands
   further down. Bootstrap's own sheet is ordered the same way. */
.btn-default {
  background-color: #fff;
  border-color: var(--zpid-indigo);
  color: var(--zpid-indigo);
}

/* Bootstrap writes :active:hover and :active:focus with one class more than
   the plain states. A rule for :hover alone therefore loses in the moment the
   pointer is still on the button while it is down - and what shows through
   for that moment is exactly the #337ab7 family this sheet replaces. That is
   why every state list here carries the doubled selectors as well. */
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.btn-default:active:hover,
.btn-default:active:focus,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default {
  background-color: var(--zpid-indigo);
  border-color: var(--zpid-indigo);
  color: #fff;
}

/* THE FIRST RANK - the export (.download-btn), "Download .rds" (a download
   link, and so is the hidden one behind it, which stays hidden by its own
   inline style), "Next page" (nothing but its id to go by) and "Export
   anyway" (.btn-primary). */
.btn-primary,
.shiny-download-link,
.download-btn,
.btn[id^="next"] {
  background-color: var(--zpid-indigo);
  border-color: var(--zpid-indigo);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary,
.shiny-download-link:hover,
.shiny-download-link:focus,
.shiny-download-link:active,
.shiny-download-link:active:hover,
.download-btn:hover,
.download-btn:focus,
.download-btn:active,
.download-btn:active:hover,
.btn[id^="next"]:hover,
.btn[id^="next"]:focus,
.btn[id^="next"]:active,
.btn[id^="next"]:active:hover {
  background-color: var(--zpid-indigo-header);
  border-color: var(--zpid-indigo-header);
  color: #fff;
}

/* Pressed, both ranks. The ground has already changed under the pointer by
   now; this is the second step, so that touching and pressing are not the
   same picture. Depth, not motion - the button sinks in, it does not jump. */
.btn:active,
.btn.active {
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .3);
}

/* NARROW SCREENS

   shinyWidgets ships pretty-checkbox with white-space: nowrap on the widget,
   which is why a long answer option ran off the side of a phone. The selector
   has to be div.pretty rather than .pretty: the vendor sheet is loaded when
   the first such widget appears, so it lands after this one and wins any tie.

   Measured at 375, 768 and 1280px: no page of either form scrolls sideways. */
div.pretty {
  white-space: normal;
}

div.pretty .state label {
  text-indent: 0;
  padding-left: 1.5em;
}

/* the bigger variant carries a bigger box and needs the wider indent */
div.pretty.p-bigger .state label {
  padding-left: 1.7em;
}

/* The action bar puts a fluidRow straight inside a fluidRow. Bootstrap gives
   every row a -15px margin, meant to be cancelled by the 15px padding of the
   container around it; done twice with nothing in between, the second row
   hangs 15px past each edge, which is 30px of drag on a phone. The mistake is
   in the markup and therefore in the old surface too, but app.R feeds both
   surfaces and going back has to stay a sheet that is not loaded. */
.conditional-panel .row {
  margin-left: 0;
  margin-right: 0;
}

/* The price of the rule above. Cancelling the -15px moves every correctly
   nested row too, and with it the item column, while the loose children of a
   page (the two page buttons and the block of contributors, which sit in no
   row) stay where they are. Measured: items at 383px, buttons at 368px.

   Narrowing the rule to ".row > .row" is not the answer either: a tab panel
   carries no padding, so every item row then hangs 15px past the right edge.
   The rows are load-bearing here, so what was loose is what moves. */
.conditional-panel .tab-pane > .btn,
.conditional-panel .tab-pane > .shiny-html-output {
  margin-left: 15px;
}

/* Only the first of two buttons takes the indent - the second one follows its
   neighbour, and the 4px between them is the space character in the markup. */
.conditional-panel .tab-pane > .btn + .btn {
  margin-left: 0;
}

/* THE FIELDS AND THE FOCUS

   The website carries no form at all, so there is nothing to measure against:
   every page of it was searched, and it has no input, textarea or select
   element. The fields therefore take the frame of the buttons, 4px radius and
   an indigo border. The focus ring is the one rule here that is not a matter
   of taste: bootstrap marks a focused field with a #66afe9 frame at 2.3:1, and
   a focus mark owes 3:1 against what lies next to it.

   :focus for the fields, :focus-visible for everything one also clicks. A ring
   that appears under the mouse pointer teaches people to ignore rings; a field
   is the exception, because there the ring also says where the typing goes. */

.form-control,
.selectize-input {
  border-color: var(--zpid-indigo);
  color: var(--zpid-text);
}

.form-control:not(textarea) {
  height: var(--zpid-button-height);
}

/* selectize draws its own box over a hidden select; the padding is what
   carries the height there, and 11 + 24 + 11 + 2 is the same 48. */
.selectize-input {
  min-height: var(--zpid-button-height);
  padding-top: 11px;
  padding-bottom: 11px;
}

/* THE KEYBOARD

   One ring for everything one can reach with the tab key, in the same cyan.
   Bootstrap 3 predates :focus-visible and writes its own outline on :focus,
   which has to be taken back first. */

.form-control:focus,
.selectize-input.focus,
.selectize-input.input-active {
  border-color: var(--zpid-cyan);
  box-shadow: none;
  outline: 3px solid var(--zpid-cyan);
  outline-offset: 1px;
}

.btn:focus-visible,
a:focus-visible,
div.pretty:focus-within,
.material-switch:focus-within {
  outline: 3px solid var(--zpid-cyan);
  outline-offset: 2px;
}

/* THE ANSWER OPTIONS

   pretty-checkbox lays a transparent input over the whole widget and lets it
   take the clicks; what one sees is a pair of pseudo-elements on the label,
   plus an <i class="icon"> for the tick. Three things follow.

   The tap target is the widget, so min-height enlarges it and nothing else has
   to move. The keyboard reaches the input, which is transparent rather than
   hidden, so the ring goes on the widget. And the box is positioned in
   percentages of the widget's height, which reads as "one line up" only while
   the widget is one line tall: since options wrap, a two-line option pushed
   its box 46px above itself. A fixed top ends that.

   The tick is a fourth element and was missed twice, because it is invisible
   until an option is chosen. It takes the same fixed top. .svg and .img are
   pretty-checkbox's other two ways of drawing it, unused here and named so
   that using one does not bring the fault back.

   !important is here because the rule being corrected carries it too, and the
   vendor sheet is appended after this one. */

div.pretty {
  min-height: 44px;
}

div.pretty .state label::before,
div.pretty .state label::after,
div.pretty .state .icon,
div.pretty .state .svg,
div.pretty .state .img {
  top: 3px !important;
}

div.pretty.p-bigger .state label::before,
div.pretty.p-bigger .state label::after,
div.pretty.p-bigger .state .icon,
div.pretty.p-bigger .state .svg,
div.pretty.p-bigger .state .img {
  top: 1px !important;
}

/* A chosen option is a filled control, so it is indigo. The check inside it
   stays white, which pretty-checkbox already writes. */
div.pretty input:checked ~ .state.p-primary label::after,
div.pretty.p-toggle .state.p-primary label::after {
  background-color: var(--zpid-indigo) !important;
}

div.pretty input:checked ~ .state.p-primary label::before,
div.pretty .state label::before {
  border-color: var(--zpid-indigo);
}

/* THE SWITCH

   "Show descriptions" could not be reached by keyboard at all: shinyWidgets
   writes display: none onto its checkbox, which takes it out of the tab order,
   and everything visible about the switch is two pseudo-elements on a label.
   The cure is the pattern pretty-checkbox uses two blocks above: the input
   becomes a transparent sheet over the whole row. Nothing about the picture
   changes. */

.material-switch {
  position: relative;
  display: inline-block;
  min-height: 44px;
}

.material-switch > input[type="checkbox"] {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

/* The switch takes its colour from the label's own background: the track and
   the knob are drawn with background: inherit once it is on. Bootstrap's
   .label-primary and .bg-primary both put #337ab7 there. */
.material-switch > label.switch.label-primary {
  background-color: var(--zpid-indigo);
}

/* THE REST OF THE BOOTSTRAP BLUE

   The bar of an upload, only ever visible while a file is
   travelling, and the chosen line of the form picker - the last two places
   where #337ab7 was still painted. */

.progress-bar {
  background-color: var(--zpid-indigo);
}

.selectize-dropdown .active,
.selectize-dropdown .option.selected {
  background-color: var(--zpid-indigo);
  color: #fff;
}