/* ==========================================================================
   Am_sketch documentation theme

   The same system as the AM Rig Menu, AM Landmark and Am_Picker sites, so the
   tools read as one product line. The palette is this product's own: the
   ring's amber #FFAE00 on ink, plus the hue ring itself as the one flourish
   (a thin spectrum rule under the hero, and on the active tab). Dark is the
   primary look because Am_sketch's own windows are dark - a screenshot of a
   dark panel on a dark page reads as one thing.
   ========================================================================== */

/* --------------------------------------------------------------- palettes */

:root {
  /* The app's hue ring, red at three o'clock going counter-clockwise; as a
     CSS strip it runs red -> yellow -> green -> cyan -> blue -> magenta. */
  --am-spectrum: linear-gradient(90deg, #ff0000, #ffd500 16%, #00c721 33%, #00e5ff 50%, #0a84f2 66%, #9f1feb 83%, #f20099);
}

[data-md-color-scheme="slate"] {
  --am-amber:        #ffae00;
  --am-amber-bright: #ffc233;
  --am-amber-deep:   #e09200;
  --am-ink:          #141518;

  --md-primary-fg-color:         #1c1d21;
  --md-primary-fg-color--light:  #26282d;
  --md-primary-fg-color--dark:   #101114;
  --md-primary-bg-color:         #e8e8ea;
  --md-primary-bg-color--light:  #a0a2a8;

  --md-accent-fg-color:          #ffae00;
  --md-accent-fg-color--transparent: rgba(255, 174, 0, 0.1);
  --md-accent-bg-color:          #141518;

  --md-default-fg-color:         #e4e4e7;
  --md-default-fg-color--light:  #b0b2b8;
  --md-default-fg-color--lighter:#6e7178;
  --md-default-fg-color--lightest: rgba(232, 232, 234, 0.07);
  --md-default-bg-color:         #161719;
  --md-default-bg-color--light:  #1c1d21;
  --md-default-bg-color--lighter:#232428;
  --md-default-bg-color--lightest: #2a2b30;

  --md-code-fg-color:            #d6d6da;
  --md-code-bg-color:            #101113;
  --md-code-hl-color:            rgba(255, 174, 0, 0.18);

  --md-typeset-color:            #e4e4e7;
  --md-typeset-a-color:          #ffae00;
  --md-typeset-kbd-color:        #2a2b30;
  --md-typeset-kbd-accent-color: #3d3f45;
  --md-typeset-kbd-border-color: #121315;
  --md-typeset-table-color:      rgba(232, 232, 234, 0.12);

  --md-footer-bg-color:          #101113;
  --md-footer-bg-color--dark:    #0b0c0d;

  --am-card-bg:     #1c1d21;
  --am-card-border: #2b2c31;
  --am-rule:        #2b2c31;
  --am-muted:       #a0a2a8;

  color-scheme: dark;
}

[data-md-color-scheme="default"] {
  --am-amber:        #b97e00;
  --am-amber-bright: #d18f00;
  --am-amber-deep:   #8f6200;
  --am-ink:          #141518;

  --md-primary-fg-color:         #141518;
  --md-primary-fg-color--light:  #2b2c31;
  --md-primary-fg-color--dark:   #0b0c0d;
  --md-primary-bg-color:         #ffffff;
  --md-primary-bg-color--light:  #d8d9dc;

  /* #FFAE00 on white is about 1.9:1 - fine for a logo, not for text. The same
     hue darkened until it passes AA keeps links on-brand and readable. */
  --md-accent-fg-color:          #a06c00;
  --md-accent-fg-color--transparent: rgba(185, 126, 0, 0.1);

  --md-default-fg-color:         #1c1d21;
  --md-default-fg-color--light:  #575a62;
  --md-default-fg-color--lighter:#8b8e96;
  --md-default-fg-color--lightest: rgba(28, 29, 33, 0.07);
  --md-default-bg-color:         #ffffff;
  --md-default-bg-color--light:  #f6f6f7;
  --md-default-bg-color--lighter:#ececee;
  --md-default-bg-color--lightest: #e3e3e6;

  --md-typeset-a-color:          #a06c00;
  --md-typeset-table-color:      rgba(28, 29, 33, 0.12);

  --am-card-bg:     #fbfbfc;
  --am-card-border: #e3e3e6;
  --am-rule:        #e3e3e6;
  --am-muted:       #60636b;

  color-scheme: light;
}

/* Link colour needs the same compound selector Material uses
   (`[data-md-color-scheme][data-md-color-primary]`), or it loses on
   specificity however late this sheet loads. */
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color: #ffae00;
}

[data-md-color-scheme="default"][data-md-color-primary] {
  --md-typeset-a-color: #a06c00;
}

/* ------------------------------------------------------------- typography */

.md-typeset {
  font-feature-settings: "kern", "liga", "calt";
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-top: 2.2em;
  padding-top: 0.6em;
  border-top: 1px solid var(--am-rule);
}

.md-typeset h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.md-typeset h3 {
  font-weight: 600;
  margin-top: 1.8em;
}

/* The one-line standfirst under a page title. */
.md-typeset .lede {
  font-size: 1.15em;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
  margin-top: -0.4em;
  margin-bottom: 1.8em;
}

.md-typeset a {
  text-underline-offset: 0.2em;
  transition: color 120ms;
}

/* The active top tab gets a thin strip of the hue ring under it. */
.md-tabs__item--active .md-tabs__link {
  position: relative;
}

.md-tabs__item--active .md-tabs__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--am-spectrum);
}

/* --------------------------------------------------------------- keyboard */

.md-typeset kbd,
.md-typeset .keys kbd {
  font-size: 0.78em;
  font-weight: 600;
  padding: 0.16em 0.5em;
  border-radius: 4px;
  vertical-align: baseline;
  box-shadow:
    0 0 0 1px var(--md-typeset-kbd-accent-color) inset,
    0 -1px 0 1px var(--md-typeset-kbd-border-color) inset;
}

.md-typeset .keys span {
  padding: 0 0.25em;
  color: var(--am-muted);
}

/* --------------------------------------------------------------- pictures */

/* Screenshots are the substance of these pages, so they get a frame, and
   clicking one opens it full size (glightbox). */
.md-typeset figure,
.md-typeset p > img,
.md-typeset .glightbox img {
  border-radius: 8px;
}

.md-typeset img[src*="assets/img/"] {
  display: block;
  width: 100%;
  border: 1px solid var(--am-card-border);
  border-radius: 8px;
  background: var(--md-default-bg-color--light);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
  cursor: zoom-in;
}

[data-md-color-scheme="default"] .md-typeset img[src*="assets/img/"] {
  box-shadow: 0 2px 10px rgba(20, 24, 30, 0.08);
}

.md-typeset figure {
  margin: 1.6em auto;
}

.md-typeset figcaption {
  margin-top: 0.7em;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--am-muted);
  max-width: 46rem;
  margin-inline: auto;
}

/* glightbox wraps every screenshot in an inline <a>; a block wrapper lets the
   image's auto margins centre it. */
.md-typeset a.glightbox {
  display: block;
}

/* A picture narrow enough that full width would blow it up past 1:1. */
.md-typeset img.inset {
  max-width: 30rem;
  margin-inline: auto;
}

.md-typeset img.inset-s {
  max-width: 20rem;
  margin-inline: auto;
}

/* Two or three pictures side by side; they stack on a phone. */
.am-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin: 1.6em 0;
}

.am-pair--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.am-pair figure {
  margin: 0;
}

@media screen and (max-width: 44.984375em) {
  .am-pair,
  .am-pair--3 {
    grid-template-columns: 1fr;
  }
}

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

.md-typeset table:not([class]) {
  border: 1px solid var(--am-card-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.76rem;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background: var(--md-default-bg-color--lighter);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--md-default-fg-color);
}

.md-typeset table:not([class]) td {
  vertical-align: top;
}

.md-typeset table:not([class]) td:first-child kbd,
.md-typeset table:not([class]) td:nth-child(2) kbd {
  white-space: nowrap;
}

/* ------------------------------------------------------------- admonition */

/* "Why it works this way" - the reason behind a deliberate behaviour that
   would otherwise look arbitrary. */
:root {
  --md-admonition-icon--rationale: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-4 12.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26A7 7 0 0 0 12 2m-2 19a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h-4z"/></svg>');
  --md-admonition-icon--classroom: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3 1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17z"/></svg>');
  --md-admonition-icon--studio: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 4.63 19.37 3.29a1 1 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a1 1 0 0 0 0-1.41M7 14a3 3 0 0 0-3 3c0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2a4 4 0 0 0 4-4 3 3 0 0 0-3-3"/></svg>');
}

.md-typeset .admonition,
.md-typeset details {
  border-width: 1px;
  border-left-width: 3px;
  border-radius: 6px;
  font-size: 0.76rem;
  box-shadow: none;
  background: var(--am-card-bg);
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 650;
}

.md-typeset .rationale,
.md-typeset .classroom,
.md-typeset .studio {
  border-color: var(--am-amber);
}

.md-typeset .rationale > .admonition-title,
.md-typeset .rationale > summary,
.md-typeset .classroom > .admonition-title,
.md-typeset .classroom > summary,
.md-typeset .studio > .admonition-title,
.md-typeset .studio > summary {
  background-color: rgba(255, 174, 0, 0.11);
}

.md-typeset .rationale > .admonition-title::before,
.md-typeset .rationale > summary::before,
.md-typeset .classroom > .admonition-title::before,
.md-typeset .classroom > summary::before,
.md-typeset .studio > .admonition-title::before,
.md-typeset .studio > summary::before {
  background-color: var(--am-amber);
}

.md-typeset .rationale > .admonition-title::before,
.md-typeset .rationale > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--rationale);
          mask-image: var(--md-admonition-icon--rationale);
}

.md-typeset .classroom > .admonition-title::before,
.md-typeset .classroom > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--classroom);
          mask-image: var(--md-admonition-icon--classroom);
}

.md-typeset .studio > .admonition-title::before,
.md-typeset .studio > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--studio);
          mask-image: var(--md-admonition-icon--studio);
}

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

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--am-card-border);
  border-radius: 10px;
  background: var(--am-card-bg);
  padding: 1.1rem 1.2rem;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--am-amber);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.7em 0;
  border-color: var(--am-rule);
}

.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards .lg {
  fill: var(--am-amber);
  height: 1.6rem;
  width: 1.6rem;
}

/* --------------------------------------------------------------- the hero */

.am-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.6rem;
  align-items: center;
  margin: 0 0 3rem;
  padding: 2.2rem 0 2.6rem;
}

/* The hue ring as the hero's bottom rule. */
.am-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--am-spectrum);
  opacity: 0.85;
}

.am-hero__mark {
  width: 74px;
  height: 74px;
  margin-bottom: 1.1rem;
}

.am-hero h1 {
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.03em;
  margin: 0 0 0.6rem;
}

.am-hero h1 .am-accent {
  color: var(--am-amber);
}

.am-hero p {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--md-default-fg-color--light);
  margin: 0 0 1.6rem;
  max-width: 34rem;
}

.am-hero__art img {
  width: 100%;
  border: 1px solid var(--am-card-border);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

[data-md-color-scheme="default"] .am-hero__art img {
  box-shadow: 0 10px 28px rgba(20, 24, 30, 0.12);
}

.am-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.md-typeset .am-cta a.am-btn,
.md-typeset .am-cta a.am-btn:hover {
  display: inline-block;
  padding: 0.6em 1.25em;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 140ms, border-color 140ms, color 140ms;
}

.md-typeset .am-cta a.am-btn--primary {
  background: var(--am-amber);
  border: 1px solid var(--am-amber);
  color: var(--am-ink);
}

.md-typeset .am-cta a.am-btn--primary:hover {
  background: var(--am-amber-bright);
  border-color: var(--am-amber-bright);
  color: var(--am-ink);
}

.md-typeset .am-cta a.am-btn--ghost {
  background: transparent;
  border: 1px solid var(--am-card-border);
  color: var(--md-default-fg-color);
}

.md-typeset .am-cta a.am-btn--ghost:hover {
  border-color: var(--am-amber);
  color: var(--am-amber);
}

.am-pill {
  display: inline-block;
  padding: 0.18em 0.65em;
  border-radius: 999px;
  border: 1px solid rgba(255, 174, 0, 0.45);
  background: rgba(255, 174, 0, 0.1);
  color: var(--am-amber);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

@media screen and (max-width: 76.234375em) {
  .am-hero {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding-top: 1rem;
  }
  .am-hero h1 { font-size: 2rem; }
}

/* -------------------------------------------------------------- shortcuts */

/* The "at a glance" strip of the three or four keys a page is really about. */
.am-keyline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 1.4em 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--am-card-border);
  border-left: 3px solid var(--am-amber);
  border-radius: 6px;
  background: var(--am-card-bg);
  font-size: 0.74rem;
}

.am-keyline > span {
  white-space: nowrap;
  color: var(--md-default-fg-color--light);
}

/* ------------------------------------------------------------ step list */

/* Numbered "do this, then this" steps with big amber numbers. */
.md-typeset ol.am-steps,
.md-typeset .am-steps > ol {
  counter-reset: am-step;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.md-typeset ol.am-steps > li,
.md-typeset .am-steps > ol > li {
  counter-increment: am-step;
  position: relative;
  margin: 0 0 1.1em;
  padding-left: 2.6em;
}

.md-typeset ol.am-steps > li::before,
.md-typeset .am-steps > ol > li::before {
  content: counter(am-step);
  position: absolute;
  left: 0;
  top: -0.05em;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--am-amber);
  color: var(--am-ink);
  font-weight: 700;
  font-size: 0.82em;
}

/* ------------------------------------------------------------------ misc */

.md-typeset hr {
  border-color: var(--am-rule);
}

.md-typeset .md-button {
  border-radius: 6px;
}

.md-header {
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
}

.md-nav__title {
  font-weight: 650;
}

.md-typeset code {
  border-radius: 4px;
  padding: 0.12em 0.4em;
}

.md-footer-meta {
  font-size: 0.7rem;
}

/* A small inline colour chip, for naming a colour in running text. */
.am-chip {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  vertical-align: -0.06em;
  margin-right: 0.25em;
}

/* A row of colour chips (a palette). */
.am-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.6em 0 1.2em;
}

.am-swatches > span {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.45);
}

/* The six "jobs" strip on the home page: a colour, a verb. */
.am-jobs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.4em 0 0.4em;
}

.am-jobs > div {
  border: 1px solid var(--am-card-border);
  border-radius: 8px;
  background: var(--am-card-bg);
  padding: 0.7rem 0.75rem 0.75rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--md-default-fg-color--light);
}

.am-jobs > div > b {
  display: block;
  margin: 0.45rem 0 0.15rem;
  font-size: 0.82rem;
  color: var(--md-default-fg-color);
}

.am-jobs > div > i {
  display: block;
  height: 0.5rem;
  border-radius: 3px;
}

@media screen and (max-width: 59.984375em) {
  .am-jobs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 29.984375em) {
  .am-jobs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}