/* Deluxe23 1.2: native, explicitly marked knowledge-base components. */
.entry-content,
.editor-styles-wrapper {
  --d23-info-bg: color-mix(in srgb, var(--surface) 94%, var(--link));
  --d23-green-bg: color-mix(in srgb, var(--surface) 94%, var(--success));
  --d23-warning-bg: color-mix(in srgb, var(--surface) 93%, var(--warning));
  --d23-prose-width: 72ch;
  counter-reset: d23-solution;
}

.article-header h1 {
  font-size: clamp(1.875rem, 1.1rem + 2.2vw, 3rem);
  line-height: 1.17;
  text-wrap: pretty;
}

.article-intro,
.entry-content > :where(p, ul, ol, blockquote) {
  max-inline-size: var(--d23-prose-width, 72ch);
}

.entry-content h2 {
  font-size: clamp(1.375rem, 1.1rem + .65vw, 1.75rem);
  line-height: 1.3;
}

.entry-content h3 {
  font-size: clamp(1.1875rem, 1rem + .45vw, 1.375rem);
  line-height: 1.35;
}

/* The same saved classes style the editing canvas without frontend decorations. */
:is(.entry-content, .editor-styles-wrapper) :is(
  .is-style-deluxe23-short-solution,
  .is-style-deluxe23-tip,
  .is-style-deluxe23-note,
  .is-style-deluxe23-warning,
  .is-style-deluxe23-special-case,
  .is-style-deluxe23-result,
  .d23-component
) {
  --d23-tone: var(--link);
  position: relative;
  max-inline-size: none;
  margin: 24px 0;
  padding: 20px 24px 20px 54px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--d23-tone);
  border-radius: 10px;
  background: var(--surface-alt);
  background: var(--d23-info-bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
  font-style: normal;
  box-shadow: none;
}

:is(.entry-content, .editor-styles-wrapper) :is(.is-style-deluxe23-tip, .is-style-deluxe23-result, .d23-component-tip, .d23-component-result) {
  --d23-tone: var(--success);
  background: var(--d23-green-bg);
}

:is(.entry-content, .editor-styles-wrapper) :is(.is-style-deluxe23-warning, .d23-component-warning) {
  --d23-tone: var(--warning);
  background: var(--d23-warning-bg);
}

:is(.entry-content, .editor-styles-wrapper) :is(.is-style-deluxe23-special-case, .d23-component-special-case) {
  --d23-tone: var(--muted);
  border-inline-start-style: dashed;
  background: var(--surface-alt);
}

:is(.entry-content, .editor-styles-wrapper) :is(.is-style-deluxe23-short-solution, .d23-component-short-solution) {
  border-color: color-mix(in srgb, var(--link) 28%, var(--border));
  border-inline-start-color: var(--link);
}

.d23-component-icon {
  position: absolute;
  inset-inline-start: 18px;
  inset-block-start: 23px;
  line-height: 1;
  color: var(--d23-tone);
  pointer-events: none;
}

.d23-component-icon .icon {
  width: 20px;
  height: 20px;
}

:is(.entry-content, .editor-styles-wrapper) :is(
  .is-style-deluxe23-short-solution, .is-style-deluxe23-tip,
  .is-style-deluxe23-note, .is-style-deluxe23-warning,
  .is-style-deluxe23-special-case, .is-style-deluxe23-result, .d23-component
) > :where(h2, h3, h4) {
  margin: 0 0 10px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--d23-tone);
  padding: 0;
}

:is(.entry-content, .editor-styles-wrapper) :is(
  .is-style-deluxe23-short-solution, .is-style-deluxe23-tip,
  .is-style-deluxe23-note, .is-style-deluxe23-warning,
  .is-style-deluxe23-special-case, .is-style-deluxe23-result, .d23-component
) > :where(p, ul, ol) {
  max-inline-size: var(--d23-prose-width);
  margin-inline: 0 !important;
  margin-block: 0 12px;
}

:is(.entry-content, .editor-styles-wrapper) :is(
  .is-style-deluxe23-short-solution, .is-style-deluxe23-tip,
  .is-style-deluxe23-note, .is-style-deluxe23-warning,
  .is-style-deluxe23-special-case, .is-style-deluxe23-result, .d23-component
) > :last-child {
  margin-block-end: 0;
}

:is(.entry-content, .editor-styles-wrapper) :is(.is-style-deluxe23-short-solution, .d23-component-short-solution) li {
  margin-block: 4px;
  padding-inline-start: 3px;
}

.d23-component > p:first-of-type > strong:first-child {
  color: var(--d23-tone);
}

/* Only a deliberately marked Group increments the solution counter. */
:is(.entry-content, .editor-styles-wrapper) .is-style-deluxe23-step {
  position: relative;
  counter-increment: d23-solution;
  margin-block: 36px;
  padding: 0;
  border: 0;
  background: none;
  min-inline-size: 0;
}

:is(.entry-content, .editor-styles-wrapper) .is-style-deluxe23-step > h2:first-of-type {
  margin-block: 0 18px;
  padding-inline-start: 50px;
  min-block-size: 36px;
  padding-block-start: 1px;
}

.d23-step-number {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: #0868dc;
  color: #fff;
  font-size: 17px;
  font-weight: 750;
  line-height: 1;
}

.d23-step-number::before {
  content: counter(d23-solution);
}

.is-style-deluxe23-step > :where(p, ul, ol) {
  max-inline-size: var(--d23-prose-width);
  margin-inline: 0 !important;
}

.is-style-deluxe23-step > :where(.code-shell, figure, .table-scroll) {
  max-inline-size: 100%;
  margin-inline: 0 !important;
}

/* The toolbar exists in the initial HTML, so enabling Copy adds no block height. */
.code-toolbar {
  min-block-size: 46px;
}

.entry-content :is(.is-style-deluxe23-error-code, .is-style-error-code) {
  font-family: var(--mono);
  color: var(--link);
  font-size: .9375rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.entry-content a > code,
.entry-content code > a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content .is-style-deluxe23-screenshot {
  max-inline-size: 100%;
  inline-size: 100%;
  margin: 26px 0;
}

.is-style-deluxe23-screenshot img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.is-style-deluxe23-screenshot figcaption {
  text-align: start;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin-block-start: 9px;
}

@media (max-width: 600px) {
  :is(.entry-content, .editor-styles-wrapper) :is(
    .is-style-deluxe23-short-solution, .is-style-deluxe23-tip,
    .is-style-deluxe23-note, .is-style-deluxe23-warning,
    .is-style-deluxe23-special-case, .is-style-deluxe23-result, .d23-component
  ) {
    padding: 17px 16px 17px 43px;
    font-size: 14px;
  }
  .d23-component-icon {
    inset-inline-start: 13px;
    inset-block-start: 20px;
  }
  .d23-component-icon .icon {
    width: 18px;
    height: 18px;
  }
  :is(.entry-content, .editor-styles-wrapper) .is-style-deluxe23-step > h2:first-of-type {
    padding-inline-start: 43px;
  }
  .d23-step-number {
    inline-size: 30px;
    block-size: 30px;
    font-size: 15px;
  }
}

@media print {
  .d23-component,
  .entry-content [class*="is-style-deluxe23-"] {
    --d23-tone: #172033;
    color: #172033;
    background: white;
  }
  .d23-step-number {
    color: #172033;
    background: white;
    border: 1px solid #172033;
  }
}