/*
 * The parts of material-design-lite that the server-rendered Pug views actually
 * used, and nothing else.
 *
 * Rules are transcribed from MDL 1.3.0's own stylesheet rather than approximated,
 * so the pages render as they did. Vendor prefixes for browsers that are no longer
 * supported (-ms-, and -webkit- where the unprefixed property is universal) are
 * dropped; the grid breakpoints are MDL's 480px and 840px, NOT a framework default.
 *
 * Two things are reimplemented rather than transcribed, because MDL supplied them
 * from JavaScript that no longer loads - the floating label and the tabs. Both are
 * marked below.
 */

/* ----------------------------------------------------------- baseline ---- */
/*
 * MDL set these on the document, not on its components, so removing it changed the
 * typography of every server-rendered page - the body fell back to the browser's
 * serif default. Transcribed from MDL 1.3.0.
 */

html {
  color: rgba(0, 0, 0, 0.87);
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

html,
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
}

h1 { font-size: 56px; line-height: 1.35; letter-spacing: -0.02em; margin: 24px 0; }
h2 { font-size: 45px; line-height: 48px; margin: 24px 0; }
h3 { font-size: 34px; line-height: 40px; margin: 24px 0; }
h4 { font-size: 24px; line-height: 32px; margin: 24px 0 16px; }
h5 { font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; margin: 24px 0 16px; }

p { font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0; margin-bottom: 16px; }

a { color: rgb(255, 64, 129); font-weight: 500; }

/* ---------------------------------------------------------------- grid ---- */

.exd-grid {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  align-items: stretch;
  padding: 8px;
}

.exd-cell {
  box-sizing: border-box;
  margin: 8px;
}

/* desktop: 12 columns */
@media (min-width: 840px) {
  .exd-cell { width: calc(33.3333333333% - 16px); }
  .exd-cell--2-col { width: calc(16.6666666667% - 16px); }
  .exd-cell--3-col { width: calc(25% - 16px); }
  .exd-cell--4-col { width: calc(33.3333333333% - 16px); }
  .exd-cell--6-col { width: calc(50% - 16px); }
  .exd-cell--8-col { width: calc(66.6666666667% - 16px); }
}

/* tablet: 8 columns */
@media (min-width: 480px) and (max-width: 839px) {
  .exd-cell { width: calc(50% - 16px); }
  .exd-cell--hide-tablet { display: none !important; }
  .exd-cell--8-col-tablet.exd-cell--8-col-tablet { width: calc(100% - 16px); }
}

/* phone: 4 columns */
@media (max-width: 479px) {
  .exd-cell { width: calc(100% - 16px); }
  .exd-cell--hide-phone { display: none !important; }
  .exd-cell--4-col-phone.exd-cell--4-col-phone { width: calc(100% - 16px); }
}

/* ---------------------------------------------------------------- card ---- */

.exd-card {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 400;
  min-height: 200px;
  overflow: hidden;
  width: 330px;
  z-index: 1;
  position: relative;
  background: rgb(255, 255, 255);
  border-radius: 2px;
  box-sizing: border-box;
}

.exd-card__title {
  align-items: center;
  color: rgb(0, 0, 0);
  display: flex;
  justify-content: stretch;
  line-height: normal;
  padding: 16px 16px;
  box-sizing: border-box;
}

.exd-card__title-text {
  align-self: flex-end;
  color: inherit;
  display: block;
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
  overflow: hidden;
  margin: 0;
}

.exd-card__supporting-text {
  color: rgba(0, 0, 0, 0.54);
  font-size: 1rem;
  line-height: 18px;
  overflow: hidden;
  padding: 16px 16px;
  width: 90%;
}

.exd-card__actions {
  font-size: 16px;
  line-height: normal;
  width: 100%;
  background-color: transparent;
  padding: 8px;
  box-sizing: border-box;
}

.exd-card__title.exd-card--border,
.exd-card__supporting-text.exd-card--border {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.exd-card__actions.exd-card--border {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.exd-shadow--2dp {
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/* -------------------------------------------------------------- button ---- */

.exd-button {
  background: transparent;
  border: none;
  border-radius: 2px;
  color: rgb(0, 0, 0);
  position: relative;
  height: 36px;
  margin: 0;
  min-width: 64px;
  padding: 0 16px;
  display: inline-block;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow: hidden;
  will-change: box-shadow;
  transition:
    box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  vertical-align: middle;
}

.exd-button:hover { background-color: rgba(158, 158, 158, 0.2); }
.exd-button:focus:not(:active) { background-color: rgba(0, 0, 0, 0.12); }
.exd-button:active { background-color: rgba(158, 158, 158, 0.4); }
.exd-button .material-icons { vertical-align: middle; }

.exd-button.exd-button--colored { color: rgb(63, 81, 181); }
.exd-button.exd-button--colored:focus:not(:active) { background-color: rgba(0, 0, 0, 0.12); }

.exd-button--raised {
  background: rgba(158, 158, 158, 0.2);
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.exd-button--raised:active {
  box-shadow:
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
  background-color: rgba(158, 158, 158, 0.4);
}

.exd-button--raised:focus:not(:active) {
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.36);
  background-color: rgba(158, 158, 158, 0.4);
}

.exd-button--raised.exd-button--colored {
  background: rgb(63, 81, 181);
  color: rgb(255, 255, 255);
}

.exd-button--raised.exd-button--colored:hover,
.exd-button--raised.exd-button--colored:active,
.exd-button--raised.exd-button--colored:focus:not(:active) {
  background-color: rgb(63, 81, 181);
}

.exd-button[disabled][disabled] {
  color: rgba(0, 0, 0, 0.26);
  cursor: default;
  background-color: transparent;
}

.exd-button--raised[disabled][disabled] {
  background-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.26);
  box-shadow: none;
}

/* ----------------------------------------------------------- textfield ---- */
/*
 * REIMPLEMENTED. MDL moved the label out of the way by adding `is-dirty` from
 * JavaScript on every keystroke. :placeholder-shown does the same job in CSS, which
 * is why the input below carries `placeholder=" "` - a non-empty placeholder is what
 * makes the selector track whether the field has content.
 */

.exd-textfield {
  position: relative;
  font-size: 16px;
  display: inline-block;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  margin: 0;
  padding: 20px 0;
}

.exd-textfield__input {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
  font-size: 16px;
  font-family: 'Helvetica', 'Arial', sans-serif;
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: none;
  text-align: left;
  color: inherit;
}

.exd-textfield__input:focus { outline: none; }

.exd-textfield__label {
  bottom: 0;
  color: rgba(0, 0, 0, 0.26);
  font-size: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
  position: absolute;
  display: block;
  top: 24px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}

.exd-textfield__input:not(:placeholder-shown) ~ .exd-textfield__label {
  visibility: hidden;
}

.exd-textfield__label::after {
  background-color: rgb(63, 81, 181);
  bottom: 20px;
  content: '';
  height: 2px;
  left: 45%;
  position: absolute;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  width: 10px;
}

.exd-textfield__input:focus ~ .exd-textfield__label::after {
  left: 0;
  visibility: visible;
  width: 100%;
}

/* ---------------------------------------------------------------- tabs ---- */
/*
 * REIMPLEMENTED. The panel show/hide and the `is-active` bookkeeping came from
 * MDL's JavaScript; public/scripts/tabs.js now does it. The default here is the
 * no-JavaScript state: every panel visible, which degrades to a readable page
 * rather than a blank one.
 */

.exd-tabs { display: block; width: 100%; }

.exd-tabs__tab-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: space-between;
  align-items: flex-start;
  height: 48px;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid rgb(224, 224, 224);
}

.exd-tabs__tab {
  margin: 0;
  border: none;
  padding: 0 24px;
  float: left;
  position: relative;
  display: block;
  text-decoration: none;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.54);
  overflow: hidden;
}

.exd-tabs__panel { display: block; }

.exd-tabs.is-upgraded .exd-tabs__tab.is-active { color: rgba(0, 0, 0, 0.87); }

.exd-tabs.is-upgraded .exd-tabs__tab.is-active::after {
  height: 2px;
  width: 100%;
  display: block;
  content: ' ';
  bottom: 0;
  left: 0;
  position: absolute;
  background: rgb(63, 81, 181);
  transition: all 1s cubic-bezier(0.4, 0, 1, 1);
}

.exd-tabs.is-upgraded .exd-tabs__panel { display: none; }
.exd-tabs.is-upgraded .exd-tabs__panel.is-active { display: block; }

/* -------------------------------------------------------------- footer ---- */

.exd-mini-footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 32px 16px;
  color: rgb(158, 158, 158);
  background-color: rgb(66, 66, 66);
}

.exd-mini-footer::after { content: ''; display: block; }
.exd-mini-footer__left-section { display: inline-block; order: 0; }

.exd-logo {
  line-height: 24px;
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-weight: 300;
  box-sizing: border-box;
  display: inline-block;
}

/* ------------------------------------------------------------- colours ---- */

.exd-color--green-700 { background-color: rgb(56, 142, 60) !important; }
.exd-color-text--white { color: rgb(255, 255, 255) !important; }

/* --------------------------------------------------------- page header ---- */
/*
 * Replaces material-design-lite's layout component on the not-found view. MDL's
 * .mdl-layout is display:none until its JavaScript upgrades it, so that page could
 * not survive the removal of material.min.js in any form; this is the header it
 * actually rendered, without the component around it.
 */

.exd-page-header {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 16px;
  color: rgb(255, 255, 255);
  background-color: rgb(63, 81, 181);
  box-sizing: border-box;
}

.exd-page-header__title {
  display: block;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}