/* =========================================================================
   Learn landing and the seven modules (layout redesign, 2026-09-25;
   plan L13, navigation plan step 9). Markup comes from
   scripts/layout_learn.py (progress strip, Next buttons, foot line,
   Continue slot), docs/javascripts/listen.js (Listen in the meta line on
   narrated pages, the Listen row in news briefs) and
   docs/javascripts/layout-learn.js (Continue where you left off). Loaded
   after layout.css.
   ========================================================================= */

/* Screen-reader-only text (speed announcements, a brief's name). */
.listen-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Listen ------------------------------------------------------------------
   On a narrated page or module, audio is a utility: one small Listen
   button at the end of the head meta line, beside the minutes, and the
   player (slider, time, Speed menu, AI-voice note) folded under the line
   until the recording starts (.listen--compact, 2026-09-26). Before that
   the page shows nothing else for audio, so the text starts right under
   the head. In a news brief the Listen row stays: two outline buttons and
   the note as one muted line. Applies wherever listen.js has enhanced a
   player (data-listen-ready); without JavaScript the native player in
   extra.css shows instead. */
.md-typeset .listen[data-listen-ready] {
  display: block;
  margin: 0.9rem 0 1.5rem;
}

.md-typeset .section-brief .listen[data-listen-ready] {
  margin: 0.4rem 0 0.6rem;
}

/* Folded, the compact player takes no room at all. */
.md-typeset .listen--compact[data-listen-ready] {
  margin: 0;
}

.md-typeset .meta-listen {
  display: inline-flex;
  align-items: center;
}

.md-typeset .meta-note + .meta-listen::before {
  content: "\00b7";
  margin: 0 0.45em;
  color: var(--md-default-fg-color--light);
}

/* 30px tall (WCAG 2.5.8 asks for 24), in the link colour with a hairline
   outline, so it reads as a control without competing with the text. */
.listen-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  margin: 0;
  padding: 0 0.6rem 0 0.4rem;
  border: 1px solid var(--md-typeset-a-color);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--md-typeset-a-color);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.listen-toggle svg {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

.listen-toggle:hover {
  background: rgba(7, 97, 140, 0.08);
}

[data-md-color-scheme="slate"] .listen-toggle:hover {
  background: rgba(90, 163, 199, 0.12);
}

.listen-toggle.is-playing {
  background: rgba(7, 97, 140, 0.08);
}

[data-md-color-scheme="slate"] .listen-toggle.is-playing {
  background: rgba(90, 163, 199, 0.12);
}

.listen-toggle:disabled {
  border-color: var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color--light);
  background: transparent;
  cursor: default;
}

/* The unfolded player: one quiet ruled panel under the meta line. */
.md-typeset .listen-panel {
  max-width: 30rem;
  margin: 0.1rem 0 1.2rem;
  padding: 0.35rem 0.7rem 0.5rem;
  border: 1px solid var(--hub-row-rule);
  border-radius: 0.4rem;
  background: var(--hub-quiet-bg);
}

.md-typeset .listen-panel .listen-progress {
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  max-width: none;
  margin-top: 0;
}

.listen-speed-field {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.listen-speed {
  min-height: 1.6rem;
  padding: 0 0.3rem;
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 0.25rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.md-typeset .listen-panel .listen-note {
  display: block;
  margin-top: 0.3rem;
  line-height: 1.45;
}

.listen-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.listen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border: 2px solid var(--md-typeset-a-color);
  border-radius: 0.3rem;
  background: transparent;
  color: var(--md-typeset-a-color);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

.listen-btn svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.listen-btn:hover {
  background: rgba(7, 97, 140, 0.08);
}

[data-md-color-scheme="slate"] .listen-btn:hover {
  background: rgba(90, 163, 199, 0.12);
}

.listen-btn:disabled {
  border-color: var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color--light);
  cursor: default;
}

.listen-btn:disabled:hover {
  background: transparent;
}

/* On a phone both fit one 358px row (Listen takes what Speed leaves);
   below about 350px Speed wraps under it rather than squeezing. */
.listen-play {
  flex: 1 1 auto;
  min-width: 0;
}

.listen-rate {
  flex: 0 0 auto;
  min-width: 6rem;
  font-variant-numeric: tabular-nums;
}

@media screen and (min-width: 45em) {
  .listen-play {
    flex: 0 0 auto;
    min-width: 13rem;
  }
}

.listen-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 30rem;
  margin-top: 0.5rem;
}

.listen-progress[hidden] {
  display: none;
}

.listen-seek {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--hub-button-bg);
  cursor: pointer;
}

.listen-time {
  flex: none;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.md-typeset .listen[data-listen-ready] .listen-note {
  display: block;
  margin-top: 0.45rem;
  line-height: 1.45;
}

/* --- Head meta line (landing and modules) -----------------------------------
   The shared meta line puts a dot before each item after the first. When
   the line wraps on a phone, that dot started the second line. Here each
   dot sits in its item's left padding, and the paragraph is shifted left
   by that much and clipped, so a dot at the start of any line is cut off
   while dots between items stay. The clip reaches past the top, right and
   bottom edges, so the Listen button's focus ring is never cut. */
.md-typeset p.learn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.2rem;
  margin-left: -0.9rem;
  clip-path: polygon(0.9rem -0.5rem, calc(100% + 0.5rem) -0.5rem,
                     calc(100% + 0.5rem) calc(100% + 0.5rem), 0.9rem calc(100% + 0.5rem));
}

.md-typeset p.learn-meta > .meta-chip {
  position: relative;
  padding-left: 0.9rem;
}

.md-typeset p.learn-meta > .meta-chip::before {
  content: "\00b7";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.9rem;
  margin: 0;
  text-align: center;
  line-height: 1;
  color: var(--md-default-fg-color--light);
  transform: translateY(-50%);
}

/* --- Module head: "Module N of 7" -----------------------------------------
   Title, strip, meta line (with Listen), then straight into the module:
   the first section heading sits 1.2rem under the head rather than
   Material's 2rem, so "What you will be able to do" is on the first
   screen of a phone with its first objective. */
body[data-page-type="lesson"] .md-typeset h1 {
  margin-bottom: 0.7rem;
}

body[data-page-type="lesson"] .md-typeset p.learn-meta {
  margin-top: 0.6rem;
}

body[data-page-type="lesson"] .md-typeset p.learn-meta + h2,
body[data-page-type="lesson"] .md-typeset p.learn-meta + .listen + h2 {
  margin-top: 1.2rem;
}

.md-typeset .learn-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  line-height: 1.4;
}

.md-typeset .learn-progress__label {
  flex: none;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-typeset .learn-progress__track {
  display: flex;
  flex: 0 1 12rem;
  gap: 0.2rem;
}

.md-typeset .learn-progress__track > span {
  flex: 1 1 0;
  height: 0.3rem;
  border-radius: 0.15rem;
  background: var(--md-default-fg-color--lightest);
}

.md-typeset .learn-progress__track > .is-current {
  background: var(--aua-figure-fill);
}

/* --- Module end: the authored Next line as buttons -------------------------- */
.md-typeset .learn-next {
  margin: 2.2rem 0 1.4rem;
}

.md-typeset .learn-next__label {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-typeset .learn-next__text {
  margin: 0 0 0.8rem;
}

.md-typeset .learn-next__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 3.4rem;
  margin: 0;
  padding: 0.65rem 3rem 0.65rem 1rem;
  border-width: 2px;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  text-align: left;
  text-decoration: none;
}

.md-typeset .learn-next__btn::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  transform: translateY(-50%);
  font-size: 1.1rem;
  font-weight: 400;
}

.md-typeset .learn-next__title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
}

.md-typeset .learn-next__sub {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
}

/* The one filled button at the end of a module. Material's own hover and
   focus turn buttons amber; here they darken to navy instead. */
.md-typeset .learn-next__btn.md-button--primary,
.md-typeset .learn-next__btn.md-button--primary:focus {
  background-color: var(--hub-button-bg);
  border-color: var(--hub-button-bg);
  color: var(--hub-button-fg);
}

.md-typeset .learn-next__btn.md-button--primary:hover {
  background-color: var(--hub-navy);
  border-color: var(--hub-navy);
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-typeset .learn-next__btn.md-button--primary:hover {
  background-color: #1f6690;
  border-color: #1f6690;
}

/* A choice ("Module 4, 5, or 6"): equal outline buttons, with "or"
   between them as the source line has it. */
[dir] .md-typeset .learn-next__choices {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[dir] .md-typeset .learn-next__choices > li {
  margin: 0;
  padding: 0;
}

.md-typeset .learn-next__choices > li + li::before {
  content: "or";
  display: block;
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

.md-typeset .learn-next__btn--choice,
.md-typeset .learn-next__btn--choice:focus {
  background: transparent;
  border-color: var(--md-typeset-a-color);
  color: var(--md-typeset-a-color);
}

.md-typeset .learn-next__btn--choice:hover {
  background: rgba(7, 97, 140, 0.08);
  border-color: var(--md-typeset-a-color);
  color: var(--md-typeset-a-color);
}

[data-md-color-scheme="slate"] .md-typeset .learn-next__btn--choice:hover {
  background: rgba(90, 163, 199, 0.12);
}

.md-typeset .learn-next__btn--choice .learn-next__sub {
  color: var(--md-default-fg-color--light);
}

/* The competency domain, moved from the head to the foot. The review
   date now sits once, inside the shared page ending. */
.md-typeset .learn-foot {
  margin: 1.8rem 0 0;
  line-height: 1.45;
}

body[data-page-type="lesson"] .md-typeset .learn-foot + .page-end {
  margin-top: 0.8rem;
}

/* --- Learn landing ----------------------------------------------------------
   Intro and the reference shelf side by side from 60em, the route map
   across the full width under them; one column on phones, in reading
   order (intro, map, shelf). */
.md-typeset .learn-door__intro > p,
.md-typeset .learn-door__intro > ul {
  max-width: 36rem;
}

@media screen and (min-width: 60em) {
  .md-typeset .learn-door {
    display: grid;
    grid-template-columns: minmax(0, 36rem) minmax(16rem, 21rem);
    grid-template-areas:
      "intro shelf"
      "map map"
      "legend legend";
    justify-content: space-between;
    column-gap: 3rem;
    align-items: start;
  }
  .md-typeset .learn-door__intro {
    grid-area: intro;
  }
  .md-typeset .learn-door .route-map {
    grid-area: map;
  }
  .md-typeset .learn-door .route-legend {
    grid-area: legend;
  }
  .md-typeset .learn-door .learn-shelf {
    grid-area: shelf;
    margin-top: 0.4rem;
  }
}

/* Continue where you left off: filled in by layout-learn.js from this
   browser's storage; hidden (and empty) when nothing is stored. */
.md-typeset .learn-continue {
  max-width: 36rem;
  margin: -0.4rem 0 1.6rem;
  padding: 0.75rem 1rem 0.6rem;
  border: 1px solid var(--hub-row-rule);
  border-left: 3px solid var(--aua-figure-line);
  border-radius: 0.4rem;
  background: var(--hub-quiet-bg);
}

.md-typeset .learn-continue[hidden] {
  display: none;
}

.md-typeset h2.learn-continue__title {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--md-default-fg-color);
}

.md-typeset .learn-continue__lead {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
}

.md-typeset .learn-continue__row {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.8rem;
  margin: 0 -0.5rem;
  padding: 0.5rem 2.3rem 0.5rem 0.5rem;
  border-top: 1px solid var(--hub-row-rule);
  border-radius: 0.2rem;
  text-decoration: none;
}

.md-typeset .learn-continue__row:hover {
  background: rgba(7, 97, 140, 0.06);
}

.md-typeset .learn-continue__row::after {
  content: "\203a";
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--md-typeset-a-color);
}

.md-typeset .learn-continue__row:hover .learn-continue__name {
  text-decoration: underline;
}

.md-typeset .learn-continue__name {
  font-weight: 700;
  color: var(--md-typeset-a-color);
}

.md-typeset .learn-continue__sub {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .learn-continue__foot {
  margin: 0.3rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--hub-row-rule);
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.learn-continue__forget {
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--md-typeset-a-color);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* The route map carries the minutes: each stop names its length (checked
   against the page's own chip at build time), role modules name their
   audience, and the hands-on guides are open dots, not numbers. The whole
   row is the link. */
[dir] .md-typeset .route-stage ul > li {
  position: relative;
  align-items: flex-start;
  padding: 0.35rem 0.3rem 0.35rem 0;
  border-radius: 0.3rem;
}

.md-typeset .route-stage ul > li:hover {
  background: var(--hub-quiet-bg);
}

.md-typeset .route-stage ul > li:has(a:focus-visible) {
  outline: 2px solid var(--hub-focus);
  outline-offset: 1px;
}

.md-typeset .route-stage ul > li a:focus-visible {
  outline: none;
}

.md-typeset .route-n {
  pointer-events: none;
}

.md-typeset .route-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding-top: 0.2rem;
}

.md-typeset .route-text a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.md-typeset .route-for {
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .route-min {
  flex: none;
  margin-left: auto;
  padding-top: 0.25rem;
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.md-typeset .route-stage--optional .route-n--guide {
  border: 0;
  background: transparent;
}

.md-typeset .route-n--guide::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--aua-figure-line);
  border-radius: 50%;
  background: var(--md-default-bg-color);
}

/* "Opened" or "Finished" on this device (layout-learn.js). */
.md-typeset .route-status {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--md-default-fg-color--light);
}

.md-typeset .route-status--done {
  color: var(--aua-ok, #2e7d32);
}

.md-typeset .route-status--done::before {
  content: "\2713\00a0";
}

/* The reference shelf: five rows beside the intro on wide screens. */
.md-typeset .learn-shelf {
  padding: 0.8rem 1rem 0.3rem;
  border: 1px solid var(--hub-row-rule);
  border-radius: 0.4rem;
}

.md-typeset .learn-shelf h2 {
  margin: 0 0 0.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
}

.md-typeset .learn-shelf > p {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .learn-shelf ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rows reach 0.5rem into the panel's padding, so the hover tint and the
   focus ring clear the text while the text stays aligned with the title. */
[dir] .md-typeset .learn-shelf ul > li {
  position: relative;
  margin: 0 -0.5rem;
  padding: 0.5rem 2.1rem 0.5rem 0.5rem;
  border-top: 1px solid var(--hub-row-rule);
  border-radius: 0.2rem;
  line-height: 1.35;
}

.md-typeset .learn-shelf li::after {
  content: "\203a";
  position: absolute;
  top: 50%;
  right: 0.8rem;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .learn-shelf li > a {
  display: block;
  font-weight: 600;
  text-decoration: none;
}

.md-typeset .learn-shelf li > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.md-typeset .learn-shelf li:hover {
  background: var(--hub-quiet-bg);
}

.md-typeset .learn-shelf li:has(> a:focus-visible) {
  outline: 2px solid var(--hub-focus);
  outline-offset: 1px;
}

.md-typeset .learn-shelf li > a:focus-visible {
  outline: none;
}

.md-typeset .learn-shelf__sub {
  display: block;
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 59.9375em) {
  .md-typeset .learn-shelf {
    margin-top: 1.6rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .listen-btn,
  .md-typeset .learn-next__btn {
    transition: background-color 0.12s ease, border-color 0.12s ease;
  }
}

/* =========================================================================
   ART: the Learn plate (Specimen and Signal, added 2026-09-26).
   Everything above this line is the learn package and is unchanged.
   -------------------------------------------------------------------------
   One decorative plate under Module 1's title: a multipolar
   neuron and, across a dashed division, a small artificial network drawn
   as a diagram (circles and straight lines). The division keeps the
   comparison a metaphor: the network is modelled on the neuron, it is not
   part of it. Markup: an empty, aria-hidden wrapper under the title of
   docs/pathway/how-ai-works.md (Module 1, How AI Works); drawing:
   docs/assets/art/learn-plate.svg; behaviour: the ART section at the end
   of layout-learn.js. It stood beside the Learn landing's title until
   2026-09-28, when that head took the telescope (data/art_slots.yaml).

   Where it sits. In the empty space under Module 1's title, meta line and
   Listen control, beside the goals panel: the head's main column stretches
   to the row, and the plate stands at its foot, 21rem wide, its bottom on
   the goals panel's bottom edge and its height what the column leaves (at
   most 8.064rem, with 1rem clear above; layout-learn.js measures it). It is
   absolutely placed, so it takes no space and moves nothing. With less
   than 5rem of room (narrow windows, where the head is one column), the
   plate is neither drawn nor downloaded.

   Colour. The light palette is inspired by brightfield microscopy (ink on
   a pale plate), the dark one by darkfield (bright edges on navy). They are
   palettes, not optical claims. The SVG only names these tokens, so
   Material's scheme toggle switches the plate with no reload. */
.md-typeset .learn-plate {
  display: none;
}

body[data-md-color-scheme="default"] .learn-plate {
  --lp-g1: #f7fafc;
  --lp-g2: #ebf3f8;
  --lp-rule: rgba(7, 97, 140, 0.2);
  --lp-ink: #1b4165;
  --lp-ink2: #4d7091;
  --lp-ink3: #8ba7bf;
  --lp-tint: #dbe9f2;
  --lp-myelin: #f3f8fb;
  --lp-nuc: #f8fbfd;
  --lp-nissl: #07618c;
  --lp-net: #07618c;
  --lp-node: #ffffff;
  --lp-div: rgba(27, 65, 101, 0.35);
  --lp-spark: #f5a300;
  --lp-halo: #ffb014;
}

body[data-md-color-scheme="slate"] .learn-plate {
  --lp-g1: #0a1b2d;
  --lp-g2: #0c2338;
  --lp-rule: rgba(143, 196, 226, 0.18);
  --lp-ink: #a9d3ea;
  --lp-ink2: #7ea8c3;
  --lp-ink3: #557e9b;
  --lp-tint: #1f5378;
  --lp-myelin: #1a4868;
  --lp-nuc: #0f2c45;
  --lp-nissl: #a6d6ee;
  --lp-net: #8ec3e0;
  --lp-node: #0f2c45;
  --lp-div: rgba(169, 211, 234, 0.3);
  --lp-spark: #ffe0a0;
  --lp-halo: #ffba46;
}

@media screen and (min-width: 60em) {
  .md-typeset .w-head__main:has(> .learn-plate) {
    position: relative;
    align-self: stretch;
  }

  .md-typeset .learn-plate[data-room] {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 21rem;
    max-width: 100%;
    margin: 0;
  }

  .learn-plate__panel {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--lp-rule);
    border-radius: 0.4rem;
    background: linear-gradient(180deg, var(--lp-g1), var(--lp-g2));
    opacity: 0;
    pointer-events: none;
    user-select: none;
  }

  .learn-plate__panel[data-state] {
    opacity: 1;
  }

  /* The arbor fades toward the plate's left edge, so the eye settles on
     the soma rather than on where the frame cuts the dendrites. */
  .md-typeset .learn-plate__panel > svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.28), #000 24%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.28), #000 24%);
  }
}

/* The plate fades in once, as its signal starts. layout-learn.js turns the
   fade off when it would end after the 5-second mark. */
@media screen and (min-width: 60em) and (prefers-reduced-motion: no-preference) {
  .learn-plate__panel[data-state] {
    transition: opacity 0.4s ease-out;
  }
}

@media print {
  .md-typeset .learn-plate {
    display: none;
  }
}