/* Colour for the documentation site.
 *
 * The palette is not decorative: it is the one the result figures and the
 * application already use, defined in amazeing.auditory.analysis.STIM_COLORS.
 * A reader who has seen a session figure should recognise the same blue here.
 *
 *   auditory / enriched environment  #1565C0
 *   tactile                          #E65100
 *   vocalisation                     #2E7D32
 *   silent                           #9E9E9E
 *
 * The two paradigms get one colour each, warm against cool, because they carry
 * equal weight in this project and the site should show that at a glance.
 */

:root {
  --amz-auditory: #1565C0;
  --amz-auditory-light: #42A5F5;
  --amz-auditory-pale: #E3F0FC;
  --amz-tactile: #E65100;
  --amz-tactile-light: #FB8C00;
  --amz-tactile-pale: #FDEEE3;
  --amz-vocal: #2E7D32;
  --amz-silent: #9E9E9E;
}

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

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--amz-auditory);
  --md-primary-fg-color--light: var(--amz-auditory-light);
  --md-primary-fg-color--dark: #0D47A1;
  --md-accent-fg-color: var(--amz-tactile);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--amz-auditory);
  --md-primary-fg-color--light: var(--amz-auditory-light);
  --md-primary-fg-color--dark: #0D47A1;
  --md-accent-fg-color: var(--amz-tactile-light);
  --amz-auditory-pale: #17283a;
  --amz-tactile-pale: #3a2417;
}

/* -- headings ------------------------------------------------------------ */

/* A rule under every section, tinted when the section belongs to a paradigm. */
.md-typeset h2 {
  border-bottom: 2px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.25rem;
}

.md-typeset h2.amz-auditory {
  border-bottom-color: var(--amz-auditory);
}

.md-typeset h2.amz-tactile {
  border-bottom-color: var(--amz-tactile);
}

/* -- the cards on the landing page --------------------------------------- */

.md-typeset .grid.cards > ul > li {
  border-top: 3px solid var(--md-default-fg-color--lightest);
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}

.md-typeset .grid.cards > ul > li:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Each card carries the colour of what it leads to. */
.md-typeset .grid.cards > ul > li:nth-child(1) { border-top-color: var(--amz-auditory); }
.md-typeset .grid.cards > ul > li:nth-child(2) { border-top-color: var(--amz-tactile); }
.md-typeset .grid.cards > ul > li:nth-child(3) { border-top-color: var(--amz-vocal); }
.md-typeset .grid.cards > ul > li:nth-child(4) { border-top-color: var(--amz-silent); }

.md-typeset .grid.cards > ul > li:nth-child(1) .twemoji { color: var(--amz-auditory); }
.md-typeset .grid.cards > ul > li:nth-child(2) .twemoji { color: var(--amz-tactile); }
.md-typeset .grid.cards > ul > li:nth-child(3) .twemoji { color: var(--amz-vocal); }
.md-typeset .grid.cards > ul > li:nth-child(4) .twemoji { color: var(--amz-silent); }

.md-typeset .grid.cards .twemoji {
  height: 1.6rem;
  width: 1.6rem;
}

/* -- tables -------------------------------------------------------------- */

.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: #fff;
  font-weight: 600;
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-default-fg-color--lightest);
}

/* -- inline labels for the two paradigms --------------------------------- */

.amz-chip {
  border-radius: 1rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.12rem 0.55rem;
  vertical-align: 0.1rem;
  white-space: nowrap;
}

.amz-chip.auditory { background-color: var(--amz-auditory); }
.amz-chip.tactile { background-color: var(--amz-tactile); }
.amz-chip.both {
  background: linear-gradient(90deg, var(--amz-auditory) 0%, var(--amz-auditory) 50%,
                                     var(--amz-tactile) 50%, var(--amz-tactile) 100%);
}

/* -- screenshots and diagrams -------------------------------------------- */

/* Interface screenshots read as pictures of a window, not page furniture. */
.md-typeset img[src*="/images/app-"] {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}

.md-typeset .mermaid {
  margin: 1.2rem auto;
}

/* -- code ---------------------------------------------------------------- */

.md-typeset code {
  border-radius: 3px;
}

/* -- room to see things -------------------------------------------------- */

/* Material caps content at 61rem, about 976px. The interface screenshots are
 * 1650px wide, so on a large monitor they were shown at roughly 60 per cent
 * and their labels became unreadable. Widen the column on screens that have
 * the room, while keeping lines of prose short enough to read comfortably. */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 78rem;
  }
}

/* Wide figures use the full column. model.png is only 674px across, so it is
 * left at its own size rather than being stretched into blur. */
.md-typeset img:not([src*="model.png"]) {
  height: auto;
  width: 100%;
}

/* Diagrams are drawn in the browser, so they scale without losing anything. */
.md-typeset .mermaid {
  width: 100%;
}

.md-typeset .mermaid svg {
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* Every figure opens at its full resolution in a new tab, which is how you
 * read a 1650px screenshot on any size of screen. */
.md-typeset a.amz-zoom {
  display: block;
  line-height: 0;
}

.md-typeset a.amz-zoom img {
  cursor: zoom-in;
}

/* -- the mice ------------------------------------------------------------ */

/* Heading mice take the colour of the paradigm they introduce, so they read
 * as part of the same signal as the rule underneath. */
.md-typeset h1 .twemoji,
.md-typeset h2 .twemoji {
  height: 1.1em;
  margin-right: 0.25em;
  vertical-align: -0.15em;
  width: 1.1em;
}

.md-typeset h2.amz-auditory .twemoji { color: var(--amz-auditory); }
.md-typeset h2.amz-tactile .twemoji { color: var(--amz-tactile); }
.md-typeset h1 .twemoji { color: var(--md-primary-fg-color); }

/* The favicon is a white mouse on the auditory blue, so the header logo is
 * given a little room rather than sitting flush against the title. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: 1.5rem;
}