/* Help & learn (D46 7): guides, how-tos and the glossary. Reading pages:
   one column at a readable measure, quiet headings, links in the text. */

.help {
  max-width: 860px;
}

/* Links in prose read as the product's references do (.ref): the text
   colour, a quiet underline that darkens on hover. */
.help a:not([class]),
.help-guide__title {
  color: var(--accent-base);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

.help a:not([class]):hover,
.help-guide__title:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

.help__part {
  margin-top: var(--space-700);
}

.help__heading {
  margin: 0 0 var(--space-300);
  font-size: var(--type-section);
  font-weight: 650;
}

.help-guides {
  display: grid;
  gap: var(--space-300);
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-guide {
  padding: var(--space-350) var(--space-400);
  border: var(--rule-hairline) solid var(--border-subtle);
  border-radius: var(--radius-300);
  background: var(--surface-raised);
}

.help-guide__title {
  font-weight: 650;
}

.help-guide__summary {
  margin: var(--space-100) 0 0;
  color: var(--text-muted);
}

.help-howtos {
  margin: 0;
}

.help-howto + .help-howto {
  margin-top: var(--space-350);
}

.help-howto > dt {
  font-weight: 650;
}

.help-howto > dd {
  margin: var(--space-100) 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* A guide: steps of short prose, a reader's measure. */
.guide {
  max-width: 68ch;
  line-height: 1.65;
}

/* A worked example in a guide keeps its lines and scrolls in its own box. */
.guide pre {
  overflow-x: auto;
}

.guide__step + .guide__step {
  margin-top: var(--space-600);
}

.guide__heading {
  margin: 0 0 var(--space-200);
  font-size: var(--type-section);
  font-weight: 650;
}

.guide__parts > div + div {
  margin-top: var(--space-300);
}

.guide__parts dt {
  font-weight: 650;
}

.guide__parts dd {
  margin: var(--space-50) 0 0;
}

.guide__next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200) var(--space-600);
  margin-top: var(--space-800);
  padding-top: var(--space-400);
  border-top: var(--rule-hairline) solid var(--border-subtle);
}

/* THE EXPLAINER (DS-50): still drawings of one invented example that only grow,
   played like a video. Without script every step shows as a list of figures;
   with script (data-enhanced) one step at a time. */
.explainer {
  max-width: 68ch;
  margin-top: var(--space-500);
}

.explainer__steps {
  display: grid;
  gap: var(--space-700);
  margin: 0;
  padding: 0;
  list-style: none;
}

.explainer[data-enhanced] .explainer__steps {
  display: block;
}

.explainer[data-enhanced]:not([data-all]) .explainer__step[hidden] {
  display: none;
}

.explainer[data-all] .explainer__steps {
  display: grid;
}

.explainer__count {
  margin: 0 0 var(--space-150);
  color: var(--text-muted);
  font-size: var(--type-meta);
  letter-spacing: calc(var(--type-tracking-meta) * 1em);
  text-transform: uppercase;
}

.explainer__title {
  margin: 0 0 var(--space-300);
  font-size: var(--type-section);
  font-weight: 650;
  color: var(--text-primary);
}

.explainer__figure {
  position: relative;
  margin: 0;
}

/* The marker definitions the drawings share: present, never shown. */
.explainer__defs {
  position: absolute;
  width: 0;
  height: 0;
}

.explainer__drawing {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border: var(--rule-hairline) solid var(--border-subtle);
  border-radius: var(--radius-300);
  background: var(--surface-raised);
}

.explainer__caption {
  margin-top: var(--space-300);
  color: var(--text-secondary);
  font-size: var(--type-text);
  line-height: 1.65;
}

.explainer__caption p {
  margin: 0;
}

.explainer__caption p + p {
  margin-top: var(--space-200);
}

.explainer__example {
  margin: var(--space-400) 0 0;
  color: var(--text-muted);
  font-size: var(--type-meta);
}

.explainer__real {
  max-width: 68ch;
  margin-top: var(--space-700);
  line-height: 1.65;
}

/* The player: a large play button on the picture, a bar under it. */
.explainer__big-play {
  position: absolute;
  top: var(--ex-big-top, 45%);
  left: 72%;
  width: 76px;
  height: 76px;
  padding-left: var(--space-150);
  border: 0;
  border-radius: 50%;
  corner-shape: round;
  background: var(--accent-base);
  color: var(--text-inverse);
  font-size: var(--type-display);
  line-height: 76px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: var(--elevation-raised);
}

/* The two play buttons are the primary button made round: its colours, and it
   lifts on hover as `.button--primary` does. */
.explainer__big-play:hover {
  box-shadow: var(--elevation-overlay);
}

.explainer__play:hover {
  box-shadow: var(--elevation-subtle);
}

.explainer__big-label {
  position: absolute;
  top: calc(var(--ex-big-top, 45%) + var(--space-1200));
  left: 72%;
  padding: var(--space-50) var(--space-200);
  border-radius: var(--radius-200);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: var(--type-small);
  white-space: nowrap;
  transform: translateX(-50%);
}

.explainer__big-play[hidden],
.explainer__big-label[hidden],
.explainer__player[hidden],
.explainer__controls[hidden] {
  display: none;
}

/* The end: the finished picture fades back and Play again sits in the middle. */
.explainer__figure.is-ended {
  --ex-big-top: min(40%, 170px);
}

.explainer__figure.is-ended .explainer__drawing {
  opacity: 0.3;
}

.explainer__figure.is-ended .explainer__big-play,
.explainer__figure.is-ended .explainer__big-label {
  left: 50%;
}

.explainer__player {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  max-width: 560px;
  margin-top: var(--space-200);
}

.explainer__play {
  flex: none;
  width: var(--control-min-height);
  height: var(--control-min-height);
  border: 0;
  border-radius: 50%;
  corner-shape: round;
  background: var(--accent-base);
  color: var(--text-inverse);
  font-size: var(--type-text);
  cursor: pointer;
}

.explainer__progress {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-100);
}

.explainer__segment {
  display: flex;
  flex: var(--seg, 1) 1 0;
  align-items: center;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.explainer__segment::before {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-100);
  background: linear-gradient(
    to right,
    var(--accent-base) var(--fill, 0%),
    var(--border-subtle) var(--fill, 0%)
  );
}

.explainer__big-play:focus-visible,
.explainer__play:focus-visible,
.explainer__segment:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.explainer__time {
  flex: none;
  color: var(--text-muted);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
}

.explainer__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-300);
  margin-top: var(--space-400);
  padding-top: var(--space-300);
  border-top: var(--rule-hairline) solid var(--border-subtle);
}

.explainer__controls .button {
  font-size: var(--type-small);
}

/* The drawing: boxes and named arrows. Nothing moves between steps; a step
   only adds, and what it adds is outlined, tinted and arrives (`mark`). */
.ex-obj rect {
  fill: var(--surface-sunk);
  stroke: var(--border-emphasis);
  stroke-width: 1.5;
  /* The corner follows the roundness setting, as every other box does. */
  rx: var(--radius-200);
}

/* Type in a drawing takes the type tokens; the drawing scales with its width. */
.ex-obj text {
  fill: var(--text-primary);
  font-family: var(--type-body);
  font-size: var(--type-normal);
  font-weight: 600;
}

.ex-obj--class rect {
  fill: var(--surface-raised);
  stroke-dasharray: 2 4;
  stroke-linecap: round;
}

.ex-obj--class text {
  font-weight: 500;
  font-style: italic;
}

.ex-obj--record rect {
  fill: var(--surface-raised);
}

.ex-obj--record text {
  font-family: var(--type-code);
  font-size: var(--type-text);
  font-weight: 500;
}

.ex-kind {
  fill: var(--text-muted);
  font-family: var(--type-body);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: calc(var(--type-tracking-label) * 1em);
}

.ex-link line {
  fill: none;
  stroke: var(--border-emphasis);
  stroke-width: 1.5;
}

.ex-link text {
  fill: var(--text-secondary);
  font-family: var(--type-body);
  font-size: var(--type-normal);
  font-style: italic;
}

.ex-link--rule line {
  stroke-dasharray: 2 4;
  stroke-linecap: round;
}

.ex-note {
  fill: var(--text-primary);
  font-family: var(--type-body);
  font-size: var(--type-normal);
  font-weight: 600;
}

.ex-note--quiet {
  fill: var(--text-secondary);
  font-weight: 400;
}

.ex-note--sign {
  fill: var(--text-muted);
  font-size: var(--type-meta);
  letter-spacing: calc(var(--type-tracking-meta) * 1em);
}

.ex-arrow {
  fill: var(--border-emphasis);
}

.ex-arrow--new {
  fill: var(--accent-base);
}

/* What a step adds: the neutral selection fill and an outline (section 4:
   selection is a neutral fill plus a cue that is not colour) -- never a lens's
   category wash, which says which lens, not what is new. */
.is-new rect {
  fill: var(--surface-selected);
  stroke: var(--accent-base);
  stroke-width: 2.5;
}

.is-new line {
  stroke: var(--accent-base);
  stroke-width: 2.5;
}

.is-new text,
.ex-note.is-new {
  fill: var(--text-primary);
}

.ex-kind.is-new {
  fill: var(--accent-base);
}

.explainer__step:not([hidden]) .is-new {
  animation: mark var(--motion-reveal) var(--motion-easing-arrive) both;
}

/* Play only: a part waits for the narration (DS-50's exception to "nothing
   staggers"); reduced motion never sets it (explainer.js). */
.explainer__step .is-pending {
  opacity: 0;
  animation: none;
}

.is-path rect {
  stroke: var(--accent-base);
  stroke-width: 2.5;
}

.is-path line {
  stroke: var(--accent-base);
  stroke-width: 3.5;
}

.ex-dim {
  opacity: 0.45;
}

/* The glossary: a definition list per part, each entry an anchor. */
.glossary__parts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200) var(--space-500);
  margin-top: var(--space-500);
}

.glossary__count,
.glossary__source {
  color: var(--text-muted);
  font-size: var(--type-small);
  font-weight: 400;
}

.glossary__list {
  margin: 0;
}

.glossary__entry {
  padding: var(--space-300) 0;
  border-top: var(--rule-hairline) solid var(--border-subtle);
  scroll-margin-top: var(--space-600);
}

.glossary__entry:target {
  background: var(--surface-raised);
}

.glossary__term {
  font-weight: 650;
}

.glossary__term > dfn {
  font-style: normal;
}

.glossary__open {
  margin-left: var(--space-200);
  font-size: var(--type-small);
  font-weight: 400;
}

.glossary__meaning {
  margin: var(--space-100) 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.glossary__meaning > p {
  margin: 0;
}

.glossary__meaning > p + p {
  margin-top: var(--space-100);
}

.glossary__none {
  color: var(--text-muted);
}