/* Codelab layout. Colours and type follow the site's Minimal Mistakes "default" skin. */
.codelab {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2em;
  max-width: 1280px;
  margin: 2em auto 0;
  padding: 0 1em;
}
@media (min-width: 1024px) {
  .codelab { grid-template-columns: 300px minmax(0, 1fr); }
  .codelab__nav { position: sticky; top: 2em; align-self: start; max-height: calc(100vh - 4em); overflow-y: auto; }
}

.codelab__kicker { margin: 0; font-size: .75em; letter-spacing: .08em; text-transform: uppercase; color: #6f777d; }
.codelab__title { margin: .3em 0 .4em; font-size: 1.1em; line-height: 1.3; }
.codelab__total { margin: 0 0 1em; font-size: .8em; color: #6f777d; }
.codelab__repo { margin: 1.25em 0 0; }
.codelab__repobtn {
  display: inline-flex; align-items: center; gap: .45em; padding: .35em .8em;
  font-size: .75em; font-weight: bold; text-decoration: none !important; color: #2f7d95 !important;
  border: 1px solid #2f7d95; border-radius: 4px; background: #fff;
}
.codelab__repobtn:hover { background: #2f7d95; color: #fff !important; }

.codelab__steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.codelab__steps li { margin: 0; }
.codelab__steps a {
  display: flex; gap: .75em; align-items: flex-start;
  padding: .55em .5em; border-radius: 4px;
  font-size: .85em; line-height: 1.35; text-decoration: none; color: #494e52;
}
.codelab__steps a:hover { background: #f2f3f3; }
.codelab__num {
  flex: 0 0 1.7em; height: 1.7em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #bdc1c4; font-size: .85em; color: #6f777d;
}
.codelab__steps a.is-done .codelab__num { background: #e8f2f5; border-color: #2f7d95; color: #2f7d95; }
.codelab__steps a.is-active { background: #e8f2f5; color: #2f7d95; font-weight: bold; }
.codelab__steps a.is-active .codelab__num { background: #2f7d95; border-color: #2f7d95; color: #fff; }

.codelab__main { float: none; width: auto; min-width: 0; margin: 0; padding: 0; }
.codelab__progress { height: 4px; background: #f2f3f3; border-radius: 2px; overflow: hidden; margin-bottom: 1.5em; }
.codelab__progress span { display: block; height: 100%; width: 0; background: #2f7d95; transition: width .2s ease; }

.codelab__body--paged .codelab__step > h2:first-child { margin-top: 0; }
.codelab__step > h2 { border-bottom: 1px solid #f2f3f3; padding-bottom: .3em; }

.codelab__controls { display: flex; justify-content: space-between; margin: 2.5em 0 3em; }
.codelab__controls .btn[disabled] { opacity: .4; cursor: default; }

.codelab__body div.highlighter-rouge { position: relative; }
.codelab__copy {
  position: absolute; top: .4em; right: .4em;
  padding: .15em .6em; font-size: .7em;
  border: 1px solid #bdc1c4; border-radius: 4px; background: #fff; color: #494e52; cursor: pointer;
  opacity: .7;
}
.codelab__copy:hover { opacity: 1; }

/* The theme sets display on sections/nav, which beats the [hidden] attribute. */
.codelab [hidden] { display: none !important; }

/* Step kicker: "Step N of M · X min" above each step heading. */
.codelab__stepkicker { margin: 0 0 .1em !important; font-size: .7rem !important; letter-spacing: .08em; text-transform: uppercase; color: #6f777d; }
.codelab__body--paged .codelab__step > .codelab__stepkicker + h2 { margin-top: 0; }

/* Minutes on the right of each step in the list. */
.codelab__label { flex: 1 1 auto; }
.codelab__mins { flex: 0 0 auto; font-size: .8em; color: #9ba1a6; padding-top: .15em; white-space: nowrap; }

/* Next names the next step; the accent colour marks it as the way forward. */
.codelab__controls { gap: 1em; }
.codelab__controls #codelab-next { background: #2f7d95; border-color: #2f7d95; color: #fff; max-width: 70%; text-align: right; white-space: normal; }
.codelab__controls #codelab-next:hover { background: #24657a; }

/* Command output: lighter, labelled, no Copy button. */
.codelab__body div.codelab__output { margin-top: -.6em; background: transparent !important; }
.codelab__body div.codelab__output .highlight {
  background: #f6f7f8 !important; border: 1px solid #e3e6e8; border-left: 3px solid #9ba1a6; border-radius: 0 4px 4px 0;
}
.codelab__body div.codelab__output pre, .codelab__body div.codelab__output code { color: #3d4144 !important; background: transparent !important; }
.codelab__body div.codelab__output::before {
  content: "Output"; display: block; margin: 0 0 .25em; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: #9ba1a6;
}

/* File tab above a code block whose first line was "# name.ext". */
.codelab__file {
  display: inline-block; margin: 0; padding: .25em .9em; font-family: Monaco, Consolas, "Lucida Console", monospace;
  font-size: .7em; color: #e8eaeb; background: #3d4851; border-radius: 4px 4px 0 0;
}
.codelab__body div.codelab__hasfile { margin-top: 0; }
.codelab__body div.codelab__hasfile .highlight { border-top-left-radius: 0; }

/* Callout labels: data-label on the notice, with a default per kind. */
.codelab__body [class*="notice--"]::before { display: block; margin-bottom: .3em; font-weight: bold; font-size: .85em; letter-spacing: .02em; }
.codelab__body .notice--info::before { content: attr(data-label); }
.codelab__body .notice--warning::before { content: attr(data-label); }
.codelab__body .notice--danger::before { content: attr(data-label); }
.codelab__body .notice--success::before { content: attr(data-label); }

/* Phones: the step list collapses behind the toggle. */
.codelab__toggle { display: none; }
@media (max-width: 1023px) {
  .codelab__toggle {
    display: block; width: 100%; margin: 0 0 .5em; padding: .6em .8em; text-align: left; font-size: .85em; font-weight: bold;
    color: #2f7d95; background: #e8f2f5; border: 0; border-radius: 4px; cursor: pointer;
  }
  .codelab__toggle::after { content: " ▾"; }
  .codelab__nav.is-open .codelab__toggle::after { content: " ▴"; }
  .codelab__nav:not(.is-open) .codelab__steps { display: none; }
  .codelab__toggle[hidden] { display: none !important; }
}

/* A thin strip of the lab's banner across the top of every step (the lab's identity, card → page). */
.codelab__strip { height: 110px; background-size: cover; background-repeat: no-repeat; }
@media (max-width: 1023px) { .codelab__strip { height: 72px; } }
.codelab__strip + .codelab { margin-top: 1.5em; }