/* Pasek postępu (w kodzie: rail) stoi w lewym wcięciu nawigacji i nie
   przesuwa etykiety: ujemny lewy margines oddaje jego szerokość (.28rem)
   oraz odstęp flex linku Material (.4rem), a ujemny dolny margines jego
   wysokość, więc etykieta i kolejne pozycje zostają dokładnie tam, gdzie
   w książce, a pozycje bez ćwiczeń nie zmieniają się wcale.
   Właściwość --interactive-progress-rail-shift dosuwa pasek do krawędzi
   linku (boczne panele) albo do etykiety (szuflada nawigacji); jej wartość
   zależy od układu i od obramowania linku w extra.css. */
.interactive-progress-rail {
  --interactive-progress-rail-color: var(--md-default-fg-color--lighter);
  --interactive-progress-rail-shift: .15rem;

  position: relative;
  inset-inline-start: var(--interactive-progress-rail-shift);
  order: -1;
  display: inline-flex;
  flex: 0 0 .28rem;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: .28rem;
  height: 1rem;
  margin-top: .08rem;
  margin-bottom: -1.08rem;
  margin-inline-start: -.68rem;
  color: var(--interactive-progress-rail-color);
  line-height: 1;
}

.interactive-progress-rail__visual {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: .22rem;
  height: .88rem;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid currentcolor;
  border-radius: 1px;
}

.interactive-progress-rail--none_completed {
  --interactive-progress-rail-color: #b3261e;
}

.interactive-progress-rail--partial {
  --interactive-progress-rail-color: #8a5300;
}

.interactive-progress-rail--partial
  .interactive-progress-rail__visual::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50%;
  background-color: currentcolor;
  content: "";
}

.interactive-progress-rail--completed {
  --interactive-progress-rail-color: #2e7d32;
}

.interactive-progress-rail--completed
  .interactive-progress-rail__visual {
  background-color: currentcolor;
}

[data-md-color-scheme="slate"]
  .interactive-progress-rail--none_completed {
  --interactive-progress-rail-color: #ffb4ab;
}

[data-md-color-scheme="slate"] .interactive-progress-rail--partial {
  --interactive-progress-rail-color: #ffb95c;
}

[data-md-color-scheme="slate"] .interactive-progress-rail--completed {
  --interactive-progress-rail-color: #81c784;
}

@media screen and (min-width: 60em) {
  /* Prawy spis treści bez stylów extra.css (60–76.25em): link nie ma
     wcięcia, więc pasek przechodzi do wcięcia listy, przed krawędź linku. */
  .md-sidebar--secondary .interactive-progress-rail {
    --interactive-progress-rail-shift: .25rem;
  }
}

@media screen and (min-width: 76.25em) {
  /* extra.css nadaje linkom wcięcie .4rem, a obramowanie 3px (aktywna
     pozycja lewej nawigacji) albo 2px (prawy spis treści). Pasek stoi
     we wcięciu listy przed krawędzią linku i nie zasłania obramowania,
     które pozostaje niezależnym sygnałem bieżącego położenia. */
  .md-sidebar--primary .interactive-progress-rail {
    --interactive-progress-rail-shift: -.15rem;
  }

  .md-sidebar--primary .md-nav__link--active > .interactive-progress-rail {
    --interactive-progress-rail-shift: calc(-.15rem - 3px);
  }

  .md-sidebar--secondary .interactive-progress-rail {
    --interactive-progress-rail-shift: calc(-.15rem - 2px);
  }
}

.md-typeset details.interactive-activity-group {
  margin: 1.5rem 0 0;
  padding: 0;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem;
  box-shadow: none;
  font-size: inherit;
}

.md-typeset details.interactive-activity-group
  > summary.interactive-activity-group__summary {
  box-sizing: border-box;
  margin: 0;
  padding-block: .55rem;
  padding-inline: .75rem 2rem;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-fg-color--lightest);
  border: 0;
  border-radius: inherit;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.md-typeset details.interactive-activity-group
  > summary.interactive-activity-group__summary::before {
  content: none;
}

.md-typeset details.interactive-activity-group[open]
  > summary.interactive-activity-group__summary {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem .3rem 0 0;
}

.md-typeset details.interactive-activity-group
  > summary.interactive-activity-group__summary:is(:focus-visible, .focus-visible) {
  outline: .14rem solid #1565c0;
  outline-offset: .12rem;
}

[data-md-color-scheme="slate"] .md-typeset
  details.interactive-activity-group
  > summary.interactive-activity-group__summary:is(:focus-visible, .focus-visible) {
  outline-color: #90caf9;
}

.md-typeset .interactive-activity-group__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
  padding: .8rem;
}

.md-typeset .interactive-activity-group__content > .interactive-activity {
  margin: 0;
}

.md-typeset .interactive-activity {
  --interactive-focus: #1565c0;
  --interactive-primary-bg: #1565c0;
  --interactive-primary-fg: #fff;
  --interactive-type-color: #00695c;
  --interactive-neutral-border: #546e7a;
  --interactive-neutral-bg: #eceff1;
  --interactive-success-border: #2e7d32;
  --interactive-success-bg: #e8f5e9;
  --interactive-incorrect-border: #9a5b00;
  --interactive-incorrect-bg: #fff8e1;
  --interactive-error-border: #b71c1c;
  --interactive-error-bg: #ffebee;

  box-sizing: border-box;
  margin: 1.1rem 0;
  padding: .9rem 1rem 1rem;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-inline-start: .2rem solid var(--interactive-type-color);
  border-radius: .3rem;
}

[data-md-color-scheme="slate"] .md-typeset .interactive-activity {
  --interactive-focus: #90caf9;
  --interactive-primary-bg: #90caf9;
  --interactive-primary-fg: #102027;
  --interactive-type-color: #80cbc4;
  --interactive-neutral-border: #90a4ae;
  --interactive-neutral-bg: rgb(144 164 174 / 12%);
  --interactive-success-border: #81c784;
  --interactive-success-bg: rgb(129 199 132 / 12%);
  --interactive-incorrect-border: #ffb74d;
  --interactive-incorrect-bg: rgb(255 183 77 / 12%);
  --interactive-error-border: #ef9a9a;
  --interactive-error-bg: rgb(239 154 154 / 12%);
}

.md-typeset .interactive-activity--acknowledgement {
  --interactive-type-color: #00695c;
}

.md-typeset .interactive-activity--single-choice {
  --interactive-type-color: #8a4b00;
}

.md-typeset .interactive-activity--code {
  --interactive-type-color: #5e35b1;
}

[data-md-color-scheme="slate"] .md-typeset
  .interactive-activity--acknowledgement {
  --interactive-type-color: #80cbc4;
}

[data-md-color-scheme="slate"] .md-typeset
  .interactive-activity--single-choice {
  --interactive-type-color: #ffb74d;
}

[data-md-color-scheme="slate"] .md-typeset .interactive-activity--code {
  --interactive-type-color: #b39ddb;
}

.md-typeset .interactive-activity__header {
  --interactive-header-control-min-height: 1.45rem;
  --interactive-header-control-font-size: .68rem;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem .8rem;
  align-items: center;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .interactive-activity__heading {
  min-width: 0;
}

.md-typeset .interactive-activity__header-state {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  justify-content: flex-end;
}

.md-typeset .interactive-activity__header
  .interactive-activity__header-control {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--interactive-header-control-min-height);
  padding: .14rem .45rem;
  font-size: var(--interactive-header-control-font-size);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.md-typeset .interactive-activity__type,
.md-typeset .interactive-activity__title,
.md-typeset .interactive-activity__progress,
.md-typeset .interactive-activity__prompt,
.md-typeset .interactive-activity__message,
.md-typeset .interactive-activity__runtime-status,
.md-typeset .interactive-activity__meta,
.md-typeset .interactive-activity__editor-help,
.md-typeset .interactive-activity__output-title {
  margin: 0;
}

.md-typeset .interactive-activity__type {
  color: var(--interactive-type-color);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.md-typeset .interactive-activity__title {
  margin-top: .12rem;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.md-typeset .interactive-activity__progress {
  justify-self: end;
  color: var(--md-default-fg-color);
  background-color: var(--interactive-neutral-bg);
  border: 1px solid var(--interactive-neutral-border);
  border-radius: 999px;
}

.md-typeset .interactive-activity__state-action {
  border-color: var(--interactive-neutral-border);
  border-radius: .25rem;
}

.md-typeset .interactive-activity[data-progress-state="completed"]
  .interactive-activity__progress {
  background-color: var(--interactive-success-bg);
  border-color: var(--interactive-success-border);
}

.md-typeset .interactive-activity[data-progress-state="unknown"]
  .interactive-activity__progress {
  border-style: dashed;
}

.md-typeset .interactive-activity__body {
  padding-top: .7rem;
}

.md-typeset .interactive-activity__prompt {
  margin-bottom: .7rem;
  line-height: 1.5;
}

.md-typeset .interactive-activity__fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.md-typeset .interactive-activity__form {
  margin: 0;
}

.md-typeset .interactive-activity__options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
}

.md-typeset .interactive-activity__option {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  box-sizing: border-box;
  padding: .38rem .5rem;
  color: var(--md-default-fg-color);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem;
  cursor: pointer;
}

.md-typeset .interactive-activity__option:has(input:checked) {
  background-color: var(--interactive-neutral-bg);
  border-color: var(--interactive-neutral-border);
}

.md-typeset .interactive-activity__option:has(input:disabled) {
  cursor: not-allowed;
  opacity: .6;
}

.md-typeset .interactive-activity__option input {
  flex: 0 0 auto;
  margin: .16rem 0 0;
  accent-color: var(--interactive-focus);
}

.md-typeset .interactive-activity__confirmation {
  display: inline-flex;
}

.md-typeset .interactive-activity__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-top: .65rem;
}

.md-typeset .interactive-activity__button {
  min-height: 2rem;
  padding: .3rem .65rem;
  color: var(--md-default-fg-color);
  background-color: transparent;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .22rem;
  font: inherit;
  font-size: .72rem;
  line-height: 1.3;
  cursor: pointer;
}

.md-typeset .interactive-activity__button--primary {
  color: var(--interactive-primary-fg);
  background-color: var(--interactive-primary-bg);
  border-color: var(--interactive-primary-bg);
}

.md-typeset .interactive-activity__button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.md-typeset .interactive-activity :is(input, textarea, button):focus-visible {
  outline: .14rem solid var(--interactive-focus);
  outline-offset: .12rem;
}

.md-typeset .interactive-activity__editor-label {
  display: block;
  margin-bottom: .1rem;
  font-weight: 600;
}

.md-typeset .interactive-activity__editor-help {
  margin-bottom: .35rem;
  color: var(--md-default-fg-color--light);
  font-size: .64rem;
}

.md-typeset .interactive-activity__editor {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: .5rem;
  color: var(--md-code-fg-color);
  background-color: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .22rem;
  font-family: var(--md-code-font-family);
  font-size: .72rem;
  line-height: 1.45;
  tab-size: 4;
  resize: vertical;
  /* Bez zawijania: długi wiersz przewija się poziomo w polu (wrap="off"). */
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.md-typeset .interactive-activity__outputs {
  display: grid;
  gap: .65rem;
  margin-top: .75rem;
}

.md-typeset .interactive-activity__output-title {
  margin-bottom: .18rem;
  font-size: .68rem;
  font-weight: 700;
}

.md-typeset .interactive-activity__output {
  box-sizing: border-box;
  min-height: 1.8rem;
  margin: 0;
  padding: .5rem;
  color: var(--md-code-fg-color);
  background-color: var(--md-code-bg-color);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.md-typeset .interactive-activity__output-group--stderr:has(
  .interactive-activity__output:empty
) {
  display: none;
}

.md-typeset .interactive-activity__messages {
  display: grid;
  gap: .4rem;
  margin-top: .75rem;
}

.md-typeset .interactive-activity__messages:not(:has(> :not([hidden]))) {
  display: none;
}

.md-typeset .interactive-activity__message,
.md-typeset .interactive-activity__runtime-status {
  padding: .4rem .5rem;
  color: var(--md-default-fg-color);
  background-color: var(--interactive-neutral-bg);
  border-inline-start: .16rem solid var(--interactive-neutral-border);
  line-height: 1.45;
}

.md-typeset .interactive-activity__message-result,
.md-typeset .interactive-activity__message-explanation {
  display: block;
}

.md-typeset .interactive-activity__message-explanation {
  margin-top: .15rem;
}

.md-typeset .interactive-activity__message--correct {
  background-color: var(--interactive-success-bg);
  border-inline-start-color: var(--interactive-success-border);
}

.md-typeset .interactive-activity__message--incorrect {
  background-color: var(--interactive-incorrect-bg);
  border-inline-start-color: var(--interactive-incorrect-border);
}

.md-typeset .interactive-activity__message--error {
  background-color: var(--interactive-error-bg);
  border-inline-start-color: var(--interactive-error-border);
}

.md-typeset .interactive-activity__meta {
  color: var(--md-default-fg-color--light);
  font-size: .64rem;
}

.md-typeset .interactive-activity__solution-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  margin-inline-start: .2rem;
  padding-inline-start: .6rem;
  border-inline-start: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .interactive-activity__solution-label {
  color: var(--md-default-fg-color--light);
  font-size: .64rem;
  font-weight: 600;
  white-space: nowrap;
}

.md-typeset .interactive-activity__help-button,
.md-typeset .interactive-activity__technical-actions
  .interactive-activity__button {
  min-height: 1.7rem;
  padding: .2rem .45rem;
  font-size: .64rem;
}

.md-typeset .interactive-activity__technical-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  justify-content: flex-end;
  margin-top: .35rem;
}

.md-typeset .interactive-activity__help-panel {
  margin-top: .55rem;
  padding: .55rem .65rem;
  color: var(--md-default-fg-color);
  background-color: var(--interactive-neutral-bg);
  border-inline-start: .16rem solid var(--interactive-neutral-border);
}

.md-typeset .interactive-activity__help-panel[hidden] {
  display: none;
}

.md-typeset .interactive-activity__solution-heading,
.md-typeset .interactive-activity__alternative-label {
  display: block;
  margin: 0 0 .3rem;
  font-size: .7rem;
}

.md-typeset .interactive-activity__solution-answer,
.md-typeset .interactive-activity__discussion-text {
  margin: 0;
  line-height: 1.5;
}

.md-typeset .interactive-activity__solution-code {
  box-sizing: border-box;
  margin: .35rem 0 0;
  padding: .5rem;
  color: var(--md-code-fg-color);
  background-color: var(--md-code-bg-color);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.md-typeset .interactive-activity__alternative {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset .interactive-activity__alternative
  .interactive-activity__discussion-text {
  margin-top: .4rem;
}

.interactive-activity__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Typy aktywności schema 4. Kolor paska typu odróżnia rodzaj zadania,
   a pozostałe kolory pochodzą ze zmiennych aktywności i motywu Material. */
.md-typeset .interactive-activity--multiple-choice {
  --interactive-type-color: #8a4b00;
}

.md-typeset .interactive-activity--predict-output {
  --interactive-type-color: #283593;
}

.md-typeset .interactive-activity--fill-blanks {
  --interactive-type-color: #ad1457;
}

.md-typeset .interactive-activity--ordering {
  --interactive-type-color: #00695c;
}

.md-typeset .interactive-activity--matching {
  --interactive-type-color: #6d4c41;
}

.md-typeset .interactive-activity--categorize {
  --interactive-type-color: #6b6f00;
}

[data-md-color-scheme="slate"] .md-typeset
  .interactive-activity--multiple-choice {
  --interactive-type-color: #ffb74d;
}

[data-md-color-scheme="slate"] .md-typeset
  .interactive-activity--predict-output {
  --interactive-type-color: #9fa8da;
}

[data-md-color-scheme="slate"] .md-typeset
  .interactive-activity--fill-blanks {
  --interactive-type-color: #f48fb1;
}

[data-md-color-scheme="slate"] .md-typeset .interactive-activity--ordering {
  --interactive-type-color: #80cbc4;
}

[data-md-color-scheme="slate"] .md-typeset .interactive-activity--matching {
  --interactive-type-color: #bcaaa4;
}

[data-md-color-scheme="slate"] .md-typeset
  .interactive-activity--categorize {
  --interactive-type-color: #dce775;
}

/* Treść Markdown (polecenia, omówienia, podpowiedzi): akapity, listy
   i bloki kodu książki z ciaśniejszymi odstępami. */
.md-typeset .interactive-activity__rich > :first-child,
.md-typeset .interactive-activity__prompt--rich > :first-child,
.md-typeset .interactive-activity__hint > :first-child {
  margin-top: 0;
}

.md-typeset .interactive-activity__rich > :last-child,
.md-typeset .interactive-activity__prompt--rich > :last-child,
.md-typeset .interactive-activity__hint > :last-child {
  margin-bottom: 0;
}

.md-typeset .interactive-activity__prompt--rich > p,
.md-typeset .interactive-activity__rich > p,
.md-typeset .interactive-activity__hint > p {
  margin-block: 0 .55em;
}

.md-typeset .interactive-activity__prompt--rich > :is(ul, ol),
.md-typeset .interactive-activity__rich > :is(ul, ol) {
  margin-block: .3em .55em;
}

.md-typeset .interactive-activity__prompt--rich .highlight,
.md-typeset .interactive-activity__rich .highlight {
  margin-block: .5em;
}

/* Wstawki kodu w tekście ćwiczeń (polecenia, odpowiedzi, informacja
   zwrotna, omówienia; klasy nadaje activity-markup.js): krótka nie łamie się
   wcale, także po łączniku, np. `--update`; w dłuższej słowa z łącznikiem
   lub ukośnikiem (do 20 znaków) nie łamią się, więc wiersz łamie się na
   spacjach, a słowo dłuższe niż wiersz — w dowolnym miejscu. Bloki kodu
   (pre) przewijają się poziomo. Reguły nie dotyczą tekstu książki. */
.md-typeset .interactive-activity :not(pre) > code {
  word-break: normal;
  overflow-wrap: anywhere;
}

.md-typeset .interactive-activity :not(pre) > code.interactive-code--short,
.md-typeset .interactive-activity :not(pre) > code > .interactive-code__word {
  white-space: nowrap;
}

.md-typeset .interactive-activity__field-label {
  display: block;
  margin: 0 0 .25rem;
  color: var(--md-default-fg-color--light);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.md-typeset .interactive-activity__input-hint {
  margin: 0 0 .35rem;
  color: var(--md-default-fg-color--light);
  font-size: .64rem;
}

.md-typeset .interactive-activity__code .highlight {
  margin: 0;
}

.md-typeset .interactive-activity__code + .interactive-activity__field-label {
  margin-top: .65rem;
}

.md-typeset .interactive-activity__answer-text {
  min-height: 3.2rem;
}

/* Luki fill_blanks: pola wpisane w blok kodu książki. */
.md-typeset .interactive-activity__blank {
  box-sizing: content-box;
  max-width: calc(100% - 1rem);
  margin: 0 .1em;
  padding: .02em .3em;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--interactive-type-color);
  border-radius: .2rem;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

.md-typeset .interactive-activity__blank::placeholder {
  color: var(--md-default-fg-color--lighter);
}

.md-typeset .interactive-activity__blank:disabled {
  opacity: .7;
}

.md-typeset .interactive-activity__blank-answer {
  padding: .02em .25em;
  background-color: var(--interactive-success-bg);
  border-bottom: 2px solid var(--interactive-success-border);
  border-radius: .15rem;
}

.md-typeset .interactive-activity__solution-list {
  margin: .1rem 0 0;
  padding-inline-start: 1.2rem;
}

.md-typeset .interactive-activity__solution-list li {
  margin-block: .2rem;
}

.md-typeset .interactive-activity__solution-note {
  margin: .45rem 0 0;
  color: var(--md-default-fg-color--light);
  font-size: .68rem;
}

/* ordering: listy z przyciskami zamiast przeciągania. */
.md-typeset .interactive-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .7rem;
}

.md-typeset .interactive-order__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-typeset .interactive-order__list > li.interactive-order__item {
  display: flex;
  gap: .45rem;
  align-items: center;
  margin: 0;
  padding: .3rem .4rem .3rem .5rem;
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .25rem;
}

.md-typeset .interactive-order__group--answer
  .interactive-order__list > li.interactive-order__item {
  background-color: var(--interactive-neutral-bg);
  border-color: var(--interactive-neutral-border);
}

.md-typeset .interactive-order__number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  color: var(--interactive-primary-fg);
  background-color: var(--interactive-type-color);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
}

.md-typeset .interactive-order__content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.md-typeset .interactive-order--code
  .interactive-order__list > li.interactive-order__item,
.md-typeset .interactive-order--code .interactive-order__group--answer
  .interactive-order__list > li.interactive-order__item {
  padding: 0;
  background-color: transparent;
  border: 0;
}

.md-typeset .interactive-order--code .interactive-order__content {
  overflow-x: auto;
  font-family: var(--md-code-font-family);
  font-size: .72rem;
}

/* Wiersz programu wygląda jak fragment bloku kodu książki (to samo tło
   i te same kolory składni w obu trybach). */
.md-typeset .interactive-order--code .interactive-order__content code.highlight {
  display: block;
  padding: .25rem .5rem;
  overflow-x: auto;
  color: var(--md-code-fg-color);
  background-color: var(--md-code-bg-color);
  border-radius: .2rem;
  white-space: pre;
}

/* Kod pokolorowany w wierszu (np. elementy zbędne w rozwiązaniu) ma tło
   bloków kodu książki, ponieważ kolory składni dobrano do tego tła. */
.md-typeset .interactive-activity :not(pre) > code.highlight {
  padding: .1em .4em;
  color: var(--md-code-fg-color);
  background-color: var(--md-code-bg-color);
  border-radius: 3px;
}

.md-typeset .interactive-order__controls {
  display: inline-flex;
  flex: 0 0 auto;
  gap: .2rem;
}

.md-typeset .interactive-order__add {
  flex: 0 0 auto;
  white-space: nowrap;
}

.md-typeset .interactive-order__button {
  min-width: 1.75rem;
  min-height: 1.6rem;
  padding: .1rem .4rem;
  font-size: .64rem;
}

.md-typeset .interactive-order__empty {
  margin: 0;
  padding: .45rem .5rem;
  color: var(--md-default-fg-color--light);
  border: 1px dashed var(--md-default-fg-color--lighter);
  border-radius: .25rem;
  font-size: .66rem;
}

.md-typeset .interactive-order__empty[hidden] {
  display: none;
}

/* matching: lewa kolumna, strzałka i lista wyboru. Kolumny wszystkich
   wierszy są wyrównane (subgrid): lewa zajmuje tyle, ile potrzebuje jej
   treść (najwyżej 40% szerokości), a lista — resztę wiersza. W wąskim
   bloku lewa strona i lista stoją jedna pod drugą. Gdy lista ucina wybraną
   odpowiedź, jej pełny tekst pojawia się pod listą
   (.interactive-match__chosen). */
.md-typeset .interactive-match {
  display: grid;
  grid-template-columns: fit-content(40%) auto minmax(0, 1fr);
  row-gap: .35rem;
  container-type: inline-size;
}

.md-typeset .interactive-match__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: fit-content(40%) auto minmax(0, 1fr);
  grid-template-columns: subgrid;
  column-gap: .5rem;
  row-gap: .2rem;
  align-items: center;
  padding: .3rem .45rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .25rem;
}

.md-typeset .interactive-match__chosen {
  grid-column: 3;
  min-width: 0;
  color: var(--md-default-fg-color--light);
  font-size: .68rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.md-typeset .interactive-match__chosen[hidden] {
  display: none;
}

.md-typeset .interactive-match__chosen-label {
  font-weight: 700;
}

@container (max-width: 24rem) {

  .md-typeset .interactive-match__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .interactive-match__arrow {
    display: none;
  }

  .md-typeset .interactive-match__chosen {
    grid-column: auto;
  }
}

.md-typeset .interactive-match__left {
  min-width: 0;
  overflow-wrap: anywhere;
}

.md-typeset .interactive-match__arrow,
.md-typeset .interactive-match__solution-arrow {
  color: var(--md-default-fg-color--light);
}

.md-typeset .interactive-activity__discussion
  > .interactive-activity__solution-heading:not(:first-child) {
  margin-top: .7rem;
}

.md-typeset .interactive-match__select {
  box-sizing: border-box;
  width: 100%;
  min-height: 1.8rem;
  padding: .2rem .4rem;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .22rem;
  font: inherit;
  font-size: .72rem;
}

.md-typeset .interactive-match__select--code {
  font-family: var(--md-code-font-family);
}

.md-typeset .interactive-match__select:disabled {
  opacity: .6;
}

.md-typeset .interactive-activity :is(select):focus-visible {
  outline: .14rem solid var(--interactive-focus);
  outline-offset: .12rem;
}

/* categorize: element i przyciski kategorii (radio). */
.md-typeset .interactive-categorize {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
}

.md-typeset fieldset.interactive-categorize__row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  align-items: center;
  justify-content: space-between;
  min-inline-size: 0;
  margin: 0;
  padding: .35rem .45rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .25rem;
}

.md-typeset .interactive-categorize__item {
  float: left;
  max-width: 100%;
  padding: 0;
  overflow-wrap: anywhere;
}

.md-typeset .interactive-categorize__choices {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-inline-start: auto;
}

.md-typeset .interactive-categorize__choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: .1rem .6rem;
  color: var(--md-default-fg-color);
  background-color: transparent;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 999px;
  font-size: .68rem;
  line-height: 1.3;
  cursor: pointer;
}

.md-typeset .interactive-categorize__choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.md-typeset .interactive-categorize__choice:has(input:checked) {
  color: var(--interactive-primary-fg);
  background-color: var(--interactive-primary-bg);
  border-color: var(--interactive-primary-bg);
  font-weight: 600;
}

.md-typeset .interactive-categorize__choice:has(input:checked) code {
  color: inherit;
  background-color: transparent;
}

.md-typeset .interactive-categorize__choice:has(input:focus-visible) {
  outline: .14rem solid var(--interactive-focus);
  outline-offset: .12rem;
}

.md-typeset .interactive-categorize__row:disabled
  .interactive-categorize__choice {
  cursor: not-allowed;
  opacity: .6;
}

.md-typeset .interactive-categorize__solution-group + .interactive-categorize__solution-group {
  margin-top: .4rem;
}

.md-typeset .interactive-categorize__solution-title {
  font-size: .68rem;
  font-weight: 700;
}

/* Podpowiedzi, informacje i wynik uruchomienia. */
.md-typeset .interactive-activity__hints {
  margin-top: .55rem;
  padding: .45rem .65rem .5rem;
  color: var(--md-default-fg-color);
  background-color: var(--interactive-neutral-bg);
  border-inline-start: .16rem solid var(--interactive-type-color);
}

.md-typeset .interactive-activity__hints[hidden] {
  display: none;
}

.md-typeset .interactive-activity__hint-list {
  margin: 0;
  padding-inline-start: 1.1rem;
}

.md-typeset .interactive-activity__hint-list > li.interactive-activity__hint {
  margin-block: .15rem;
  line-height: 1.5;
}

.md-typeset .interactive-activity__message--notice {
  border-inline-start-style: dashed;
}

.md-typeset .interactive-activity__message-detail {
  display: block;
  margin-top: .2rem;
  font-size: .68rem;
  overflow-wrap: anywhere;
}

.md-typeset .interactive-activity__program-output {
  margin-top: .65rem;
}

.md-typeset .interactive-activity__program-output[hidden],
.md-typeset .interactive-activity__runtime-status[hidden] {
  display: none;
}

.md-typeset .interactive-activity__terminal-note {
  margin: .5rem 0 0;
  color: var(--md-default-fg-color--light);
  font-size: .66rem;
}

.md-typeset .interactive-activity__stdin {
  margin-top: .55rem;
}

/* Karta aktywności nigdy nie jest szersza niż kolumna treści: długie bloki
   kodu, wyniki i wiersze przewijają się wewnątrz karty. */
.md-typeset .interactive-activity {
  min-width: 0;
  max-width: 100%;
}

.md-typeset .interactive-activity :is(.highlight, pre) {
  max-width: 100%;
}

.md-typeset .interactive-activity pre {
  overflow-x: auto;
}

.md-typeset .interactive-activity__output,
.md-typeset .interactive-activity__solution-code {
  overflow-x: auto;
}

/* Stan uruchomienia programu z przyciskiem „Zatrzymaj”. */
.md-typeset .interactive-activity__run-status {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  justify-content: space-between;
}

.md-typeset .interactive-activity__run-status[hidden] {
  display: none;
}

.md-typeset .interactive-activity__blank-label {
  font-weight: 600;
}

/* Strona rozdziałowa „Sprawdź się!”. */
.md-typeset .interactive-chapter-intro {
  margin-bottom: 1rem;
}

.md-typeset .interactive-chapter {
  --interactive-chapter-done: #2e7d32;
  --interactive-chapter-pending: var(--md-default-fg-color--lightest);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
  margin-top: .5rem;
}

[data-md-color-scheme="slate"] .md-typeset .interactive-chapter {
  --interactive-chapter-done: #81c784;
}

.md-typeset .interactive-chapter__summary {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  align-items: center;
  padding: .5rem .75rem;
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem;
}

.md-typeset .interactive-chapter__score {
  font-size: .8rem;
  font-weight: 700;
}

.md-typeset .interactive-chapter__meter {
  display: inline-flex;
  flex: 1 1 8rem;
  gap: .2rem;
  max-width: 16rem;
}

.md-typeset .interactive-chapter__segment {
  flex: 1 1 0;
  height: .4rem;
  background-color: var(--interactive-chapter-pending);
  border-radius: 999px;
}

.md-typeset .interactive-chapter__segment--done {
  background-color: var(--interactive-chapter-done);
}

.md-typeset .interactive-chapter__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

.md-typeset .interactive-chapter__content > .interactive-activity {
  margin: 0;
}

.md-typeset .interactive-activity__covers {
  margin: .75rem 0 0;
  padding-top: .55rem;
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--md-default-fg-color--lightest);
  font-size: .68rem;
  line-height: 1.5;
}

.md-typeset .interactive-activity__covers-label {
  font-weight: 700;
}

@media (max-width: 30rem) {

  .md-typeset .interactive-activity {
    padding: .75rem;
  }

  .md-typeset .interactive-match {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .interactive-match__row {
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem;
  }

  .md-typeset .interactive-match__arrow {
    display: none;
  }

  .md-typeset .interactive-match__chosen {
    grid-column: auto;
  }

  .md-typeset .interactive-categorize__choices {
    margin-inline-start: 0;
  }

  /* W wąskim oknie element odpowiedzi zajmuje cały wiersz, a przyciski
     przechodzą pod niego; element do wyboru i „Dodaj” stoją obok siebie. */
  .md-typeset .interactive-order__list > li.interactive-order__item--placed {
    flex-wrap: wrap;
  }

  .md-typeset .interactive-order__item--placed .interactive-order__content {
    flex-basis: calc(100% - 2rem);
  }

  .md-typeset .interactive-order__item--placed .interactive-order__controls {
    margin-inline-start: auto;
  }


  .md-typeset .interactive-activity__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-typeset .interactive-activity__progress {
    justify-self: start;
  }

  .md-typeset .interactive-activity__header-state {
    justify-content: flex-start;
  }

  .md-typeset .interactive-activity__actions
    > .interactive-activity__button {
    flex: 1 1 8rem;
  }

  .md-typeset .interactive-activity__solution-actions {
    flex: 1 0 100%;
    margin-inline-start: 0;
    padding-block-start: .45rem;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--md-default-fg-color--lightest);
    border-inline-start: 0;
  }

  .md-typeset .interactive-activity__technical-actions {
    justify-content: flex-start;
  }
}

@media (forced-colors: active) {
  .interactive-progress-rail {
    --interactive-progress-rail-color: CanvasText;

    forced-color-adjust: auto;
  }
}

/* Przycisk ćwiczeń przy tytule strony: pływa po prawej, więc krótki tytuł zostaje na
   miejscu, a długi go opływa; tekst strony nie przesuwa się po wczytaniu manifestu. */
.md-typeset a.interactive-exercises-link {
  --interactive-exercises-link-color: var(--md-primary-fg-color);

  float: right;
  margin: .45rem 0 .3rem .8rem;
  padding: .18rem .5rem;
  color: var(--interactive-exercises-link-color);
  font-weight: 500;
  font-size: .62rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--interactive-exercises-link-color) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--interactive-exercises-link-color) 28%, transparent);
  border-radius: .12rem;
  transition: background-color 125ms;
}

[data-md-color-scheme="slate"] .md-typeset a.interactive-exercises-link {
  --interactive-exercises-link-color: #90caf9;
}

.md-typeset a.interactive-exercises-link[data-state="completed"] {
  --interactive-exercises-link-color: #2e7d32;
}

[data-md-color-scheme="slate"] .md-typeset a.interactive-exercises-link[data-state="completed"] {
  --interactive-exercises-link-color: #81c784;
}

.md-typeset a.interactive-exercises-link:is(:hover, :focus-visible) {
  color: var(--interactive-exercises-link-color);
  background-color: color-mix(in srgb, var(--interactive-exercises-link-color) 18%, transparent);
}

[data-activity-slot] {
  scroll-margin-top: calc(var(--pn-naglowek, 2.4rem) + 1.2rem);
}

@media print {
  .md-typeset a.interactive-exercises-link {
    display: none;
  }
}

/* Slot bez ćwiczeń po chwili oczekiwania: komunikat z CSS działa także wtedy, gdy skrypty
   w ogóle się nie wczytały, i nie trafia do wyszukiwarki, bo nie jest treścią strony. */
[data-activity-slot]:empty::before {
  display: block;
  margin-block: .8rem;
  padding: .5rem .7rem;
  color: var(--md-default-fg-color--light);
  font-size: .7rem;
  background-color: var(--md-default-fg-color--lightest);
  border-radius: .2rem;
  opacity: 0;
  animation: interactive-slot-notice 0s linear 2.5s forwards;
  content: "Wczytywanie ćwiczeń… Jeśli się nie pojawią, odśwież stronę.";
}

@keyframes interactive-slot-notice {
  to {
    opacity: 1;
  }
}

/* Panel zapisu postępu (wersja publiczna): przycisk w belce i okno dialogowe. */
.interactive-session-button {
  display: inline-flex;
  flex: 0 0 auto;
  gap: .25rem;
  align-items: center;
  margin-inline: .2rem;
  padding: .2rem .5rem;
  color: var(--md-primary-bg-color);
  font-size: .65rem;
  line-height: 1.2;
  border: 1px solid currentcolor;
  border-radius: 1rem;
  cursor: pointer;
}

.interactive-session-button svg {
  width: .8rem;
  height: .8rem;
  fill: currentcolor;
}

.interactive-session-button__count {
  opacity: .8;
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 44.9375em) {
  .interactive-session-button__text,
  .interactive-session-button__count {
    display: none;
  }

  .interactive-session-button {
    padding: .35rem;
  }
}

.interactive-session {
  width: min(58rem, calc(100vw - 1.2rem));
  max-height: calc(100dvh - 1.2rem);
  padding: 0;
  color: var(--md-default-fg-color);
  font-size: .7rem;
  line-height: 1.45;
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .4rem;
}

.interactive-session::backdrop {
  background-color: rgb(0 0 0 / 55%);
}

.interactive-session [hidden] {
  display: none;
}

.interactive-session h2,
.interactive-session h3,
.interactive-session h4,
.interactive-session p {
  margin: 0;
}

.interactive-session__top,
.interactive-session__bottom {
  display: flex;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .9rem;
}

.interactive-session__top {
  border-block-end: 1px solid var(--md-default-fg-color--lightest);
}

.interactive-session__top h2 {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}

.interactive-session__eyebrow {
  color: var(--md-default-fg-color--light);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.interactive-session__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.interactive-session > .interactive-session__columns,
.interactive-session > .interactive-session__card,
.interactive-session > .interactive-session__message {
  margin: .6rem .9rem 0;
}

.interactive-session__card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .65rem .7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem;
}

.interactive-session__heading {
  color: var(--md-accent-fg-color);
  font-weight: 700;
  font-size: .78rem;
}

[data-md-color-scheme="default"] .interactive-session__heading {
  color: var(--md-primary-fg-color);
}

.interactive-session__hint {
  display: block;
  color: var(--md-default-fg-color--light);
  font-size: .64rem;
}

.interactive-session__option {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  padding: .45rem .5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .25rem;
  cursor: pointer;
}

.interactive-session__option input {
  margin-block-start: .2rem;
}

.interactive-session__option:has(input:checked) {
  border-color: var(--md-accent-fg-color);
}

.interactive-session__row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.interactive-session__count,
.interactive-session__label {
  font-weight: 700;
  font-size: .64rem;
}

.interactive-session__code {
  display: block;
  max-height: 6.2rem;
  padding: .4rem .5rem;
  overflow-y: auto;
  font-weight: 700;
  font-family: var(--md-code-font-family);
  font-size: .68rem;
  line-height: 1.5;
  color: var(--md-code-fg-color);
  overflow-wrap: anywhere;
  background-color: var(--md-code-bg-color);
  border-radius: .2rem;
  user-select: all;
}

.interactive-session__restore {
  display: flex;
  gap: .35rem;
}

.interactive-session__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .3rem .45rem;
  color: var(--md-default-fg-color);
  font-family: var(--md-code-font-family);
  font-size: .64rem;
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .2rem;
}

.interactive-session__primary,
.interactive-session__action,
.interactive-session__danger,
.interactive-session__close {
  padding: .28rem .6rem;
  font-weight: 700;
  font-size: .64rem;
  line-height: 1.3;
  border: 1px solid transparent;
  border-radius: .2rem;
  cursor: pointer;
}

.interactive-session__primary {
  color: var(--md-primary-bg-color);
  background-color: var(--md-primary-fg-color);
}

.interactive-session__action,
.interactive-session__close {
  color: var(--md-default-fg-color);
  border-color: var(--md-default-fg-color--lighter);
}

.interactive-session__danger {
  color: #b71c1c;
  border-color: #b71c1c;
}

[data-md-color-scheme="slate"] .interactive-session__danger {
  color: #ef9a9a;
  border-color: #ef9a9a;
}

.interactive-session__notice {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .45rem .5rem;
  font-size: .64rem;
  background-color: var(--md-default-fg-color--lightest);
  border-radius: .2rem;
}

.interactive-session__notice p {
  flex: 1 1 100%;
}

.interactive-session__guarantee {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-inline-start: .55rem;
  font-size: .64rem;
  border-inline-start: .18rem solid;
}

.interactive-session__guarantee h4 {
  font-weight: 700;
  font-size: .68rem;
}

.interactive-session__guarantee--yes {
  border-color: #2e7d32;
}

.interactive-session__guarantee--no {
  border-color: #ef6c00;
}

.interactive-session__message {
  padding: .4rem .6rem;
  font-weight: 700;
  font-size: .66rem;
  background-color: var(--md-default-fg-color--lightest);
  border-inline-start: .18rem solid #2e7d32;
  border-radius: .2rem;
}

.interactive-session__message[data-kind="error"] {
  border-color: #c62828;
}

@media screen and (max-width: 44.9375em) {
  .interactive-session__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .interactive-session__bottom {
    flex-direction: column;
    align-items: stretch;
  }
}