/* Схемы (hooks/diagrams.py) и справочник API (hooks/apiref.py).
   Токены — из theme.css. Рамка и фон у обеих схем одинаковые: --pp-diagram-bg. */

.md-typeset .pp-seq,
.md-typeset .pp-statusmap {
  --pp-diagram-bg: var(--md-default-bg-color);
  display: block;
  width: 100%;
  max-width: none;
  margin: var(--pp-space-5) 0 var(--pp-space-6);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-l);
  background: var(--pp-diagram-bg);
}

[data-md-color-scheme="slate"] .md-typeset .pp-seq,
[data-md-color-scheme="slate"] .md-typeset .pp-statusmap {
  --pp-diagram-bg: color-mix(in srgb, #fff 2%, var(--md-default-bg-color));
}

/* ---------- последовательность ---------- */

.md-typeset .pp-seq {
  --pp-seq-line: color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
  --pp-seq-arrow: var(--md-accent-fg-color);
  padding: var(--pp-space-5) var(--pp-space-5) var(--pp-space-4);
  counter-reset: pp-step;
}

/* Материал задаёт спискам display: flow-root и отступы слева: селекторы длиннее, чтобы
   дорожки, стрелки и подписи сидели на одной сетке. */
.md-typeset .pp-seq .pp-seq__head,
.md-typeset .pp-seq .pp-seq__lifelines,
.md-typeset .pp-seq ol.pp-seq__steps {
  display: grid;
  grid-template-columns: repeat(var(--lanes), minmax(0, 1fr));
}

.md-typeset .pp-seq__actor {
  grid-column: var(--col);
  justify-self: center;
  padding: var(--pp-space-2) var(--pp-space-4);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-ink);
  color: #fff;
  font-family: var(--pp-font-display);
  font-size: var(--pp-text-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

[data-md-color-scheme="slate"] .md-typeset .pp-seq__actor {
  background: #2a2270;
}

.md-typeset .pp-seq__body {
  position: relative;
  margin-top: var(--pp-space-2);
}

.md-typeset .pp-seq .pp-seq__lifelines {
  position: absolute;
  inset: 0;
}

.md-typeset .pp-seq__lifelines span {
  justify-self: center;
  width: 0;
  border-left: 2px dashed var(--pp-seq-line);
}

.md-typeset .pp-seq ol.pp-seq__steps {
  position: relative;
  row-gap: var(--pp-space-2);
  margin: 0;
  padding: var(--pp-space-3) 0 0;
  list-style: none;
}

.md-typeset .pp-seq ol.pp-seq__steps > li.pp-seq__step {
  position: relative;
  grid-column: var(--from) / var(--to);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: var(--pp-space-1) 0 var(--pp-space-4);
  counter-increment: pp-step;
}

.md-typeset .pp-seq ol.pp-seq__steps > li.pp-seq__step--self {
  padding-bottom: var(--pp-space-3);
}

/* Заметка крайнего участника занимает две дорожки и прижата к его линии. */
.md-typeset .pp-seq ol.pp-seq__steps > li.pp-seq__step--start {
  align-items: flex-start;
  padding-left: max(0px, calc(100% / 4 - 4rem));
}

.md-typeset .pp-seq ol.pp-seq__steps > li.pp-seq__step--end {
  align-items: flex-end;
  padding-right: max(0px, calc(100% / 4 - 4rem));
}

.md-typeset .pp-seq__step--start .pp-seq__note,
.md-typeset .pp-seq__step--end .pp-seq__note {
  max-width: 17rem;
  text-align: left;
}

/* Заметка среднего участника шире своей дорожки, но не доходит до соседних линий. */
.md-typeset .pp-seq__step--self:not(.pp-seq__step--start, .pp-seq__step--end) .pp-seq__note {
  width: max-content;
  max-width: min(15rem, 150%);
}

.md-typeset .pp-seq__who {
  display: none;
}

.md-typeset .pp-seq__label,
.md-typeset .pp-seq__note {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding: 0 var(--pp-space-2);
  background: var(--pp-diagram-bg);
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: center;
}

.md-typeset .pp-seq__label::before,
.md-typeset .pp-seq__note::before {
  content: counter(pp-step);
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--pp-coral);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: 0.08em;
}

.md-typeset .pp-seq__note {
  padding: var(--pp-space-2) var(--pp-space-3);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-m);
  box-shadow: var(--pp-shadow-card);
}

.md-typeset .pp-seq__arrow {
  position: absolute;
  bottom: var(--pp-space-2);
  left: calc(100% / var(--span) / 2);
  right: calc(100% / var(--span) / 2);
  height: 2px;
  background: var(--pp-seq-arrow);
}

.md-typeset .pp-seq__step--reply .pp-seq__arrow {
  height: 0;
  border-top: 2px dashed var(--pp-seq-arrow);
  background: none;
}

.md-typeset .pp-seq__arrow::after {
  content: "";
  position: absolute;
  top: -5px;
  border: 6px solid transparent;
}

.md-typeset .pp-seq__step--reply .pp-seq__arrow::after {
  top: -7px;
}

.md-typeset .pp-seq__step--right .pp-seq__arrow::after {
  right: -2px;
  border-right: 0;
  border-left: 9px solid var(--pp-seq-arrow);
}

.md-typeset .pp-seq__step--left .pp-seq__arrow::after {
  left: -2px;
  border-left: 0;
  border-right: 9px solid var(--pp-seq-arrow);
}

.md-typeset .pp-seq code {
  font-size: 0.92em;
  word-break: break-word;
}

/* На телефоне дорожки не помещаются: шаги — список карточек «кто → кому». */
@media screen and (max-width: 44em) {
  .md-typeset .pp-seq {
    padding: var(--pp-space-3);
    border-radius: var(--pp-radius-m);
  }

  .md-typeset .pp-seq .pp-seq__head,
  .md-typeset .pp-seq .pp-seq__lifelines,
  .md-typeset .pp-seq__arrow {
    display: none;
  }

  .md-typeset .pp-seq ol.pp-seq__steps {
    display: flex;
    flex-direction: column;
    gap: var(--pp-space-2);
    padding: 0;
  }

  .md-typeset .pp-seq ol.pp-seq__steps > li.pp-seq__step {
    align-items: flex-start;
    padding: var(--pp-space-3);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-s);
    background: var(--md-default-bg-color);
  }

  .md-typeset .pp-seq__who {
    display: block;
    margin-bottom: var(--pp-space-1);
    color: var(--pp-seq-arrow);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .md-typeset .pp-seq__label,
  .md-typeset .pp-seq__note {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    text-align: left;
  }

  .md-typeset .pp-seq__step--self .pp-seq__note,
  .md-typeset .pp-seq__step--self:not(.pp-seq__step--start, .pp-seq__step--end) .pp-seq__note {
    width: auto;
    max-width: none;
  }
}

/* ---------- статусы заявки ---------- */

.md-typeset .pp-statusmap {
  padding: var(--pp-space-4);
  overflow-x: auto;
}

.md-typeset .pp-statusmap svg {
  display: block;
  width: 100%;
  min-width: 640px;
  max-width: 860px;
  margin: 0 auto;
  height: auto;
  font-family: var(--md-text-font-family, "Onest"), system-ui, sans-serif;
}

.pp-sm__group {
  fill: color-mix(in srgb, var(--md-default-fg-color) 4%, transparent);
  stroke: color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
  stroke-dasharray: 4 4;
}

.pp-sm__edge {
  fill: none;
  stroke: var(--pp-violet);
  stroke-width: 2;
  marker-end: url(#pp-sm-arrow);
}

[data-md-color-scheme="slate"] .pp-sm__edge:not(.pp-sm__edge--soft, .pp-sm__edge--dispute) {
  stroke: var(--md-accent-fg-color);
}

.pp-sm__edge--soft {
  marker-end: url(#pp-sm-arrow-bad);
  stroke: var(--pp-bad);
  stroke-dasharray: 5 5;
  opacity: 0.8;
}

.pp-sm__edge--dispute {
  marker-end: url(#pp-sm-arrow-warn);
  stroke: var(--pp-warn);
}

.pp-sm__edge--back {
  stroke-dasharray: 5 5;
}

.pp-sm__head--main { fill: var(--pp-violet); }
[data-md-color-scheme="slate"] .pp-sm__head--main { fill: var(--md-accent-fg-color); }
.pp-sm__head--warn { fill: var(--pp-warn); }
.pp-sm__head--bad { fill: var(--pp-bad); }

/* SVG ужимается под колонку текста примерно на четверть: кегль с запасом, чтобы подписи
   оставались не мельче 11 px. */
.pp-sm__label {
  fill: var(--md-default-fg-color--light);
  font-size: 15px;
}

.pp-sm__node rect {
  stroke-width: 1.5;
}

.pp-sm__node text {
  font-family: var(--md-code-font-family, "JetBrains Mono"), monospace;
  font-size: 16px;
  font-weight: 600;
}

.pp-sm__node--idle rect,
.pp-sm__node--muted rect { fill: var(--pp-muted-soft); stroke: var(--pp-muted); }
.pp-sm__node--idle text,
.pp-sm__node--muted text { fill: var(--pp-muted); }
.pp-sm__node--wait rect { fill: var(--pp-wait-soft); stroke: var(--pp-wait); }
.pp-sm__node--wait text { fill: var(--pp-wait); }
.pp-sm__node--ok rect { fill: var(--pp-ok-soft); stroke: var(--pp-ok); }
.pp-sm__node--ok text { fill: var(--pp-ok); }
.pp-sm__node--bad rect { fill: var(--pp-bad-soft); stroke: var(--pp-bad); }
.pp-sm__node--bad text { fill: var(--pp-bad); }
.pp-sm__node--warn rect { fill: var(--pp-warn-soft); stroke: var(--pp-warn); }
.pp-sm__node--warn text { fill: var(--pp-warn); }

/* ---------- справочник API ---------- */

.md-typeset .pp-endpoint {
  display: flex;
  align-items: center;
  gap: var(--pp-space-3);
  margin: 0 0 var(--pp-space-4);
  padding: var(--pp-space-3) var(--pp-space-4);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-m);
  background: var(--md-code-bg-color);
  overflow-x: auto;
}

.md-typeset .pp-endpoint code {
  padding: 0;
  background: none;
  color: var(--pp-heading);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.md-typeset .pp-method {
  flex: none;
  padding: 0.2rem 0.55rem;
  border-radius: var(--pp-radius-s);
  color: #fff;
  font-family: var(--md-code-font-family, "JetBrains Mono"), monospace;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.md-typeset .pp-method--get { background: var(--pp-wait); }
/* Белый текст на зелёном --pp-ok не дотягивает до 4.5:1 — фон бейджа на тон темнее. */
.md-typeset .pp-method--post { background: color-mix(in srgb, var(--pp-ok) 85%, #000); }
[data-md-color-scheme="slate"] .md-typeset .pp-method--post { background: var(--pp-ok); }
.md-typeset .pp-method--put,
.md-typeset .pp-method--patch { background: var(--pp-warn); }
.md-typeset .pp-method--delete { background: var(--pp-bad); }
[data-md-color-scheme="slate"] .md-typeset .pp-method { color: var(--pp-ink-deep); }

/* Обозначение адреса API перед путём: мерчант подставляет свой {{base_url}}. */
.md-typeset .pp-endpoint__base {
  color: var(--pp-muted);
  font-weight: 400;
}