/* Plugin guides (pages/guides): the parts a plugin page does not have. Step lists, a short note,
   the Auto Layout illustration and a comparison table, in the pixel frame of the shared
   screenshots (sections/minimalPluginPage: 1px strong border, offset shadow). */

/* Showcases with their own contentHtml (illustration, table, code) take their content's height,
   like the media showcases (.plugin-detail__showcase), not the 4:3 image box. */
.plugin-guide .content-block.image-container { aspect-ratio: auto; }

.plugin-guide__steps { margin: var(--space-md) 0 0; padding: 0; list-style: none; counter-reset: guide-step; display: grid; gap: var(--space-sm); }
.plugin-guide__steps li { counter-increment: guide-step; display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-sm); align-items: start; font-size: 16px; line-height: 1.6; color: var(--color-text-primary); }
.plugin-guide__steps li::before { content: counter(guide-step); display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--color-border-strong); background: var(--color-surface); font: 700 14px/1 var(--font-primary); }

.plugin-guide__note { margin: var(--space-md) 0 0; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); }

.plugin-guide__list { margin: var(--space-md) 0 0; padding-inline-start: var(--space-md); display: grid; gap: var(--space-xs); font-size: 16px; line-height: 1.6; color: var(--color-text-primary); }

/* A code sample in the same frame as the screenshots. */
.plugin-guide__code { margin: 0 auto; width: 100%; max-width: 560px; }
.plugin-guide__code pre { margin: 0; border-radius: 0; padding: var(--space-md); overflow-x: auto; border: 1px solid var(--color-border-strong); box-shadow: 6px 6px 0 var(--color-border); background: var(--color-surface); font: 400 14px/1.7 var(--font-mono, 'Monaco', 'Menlo', 'Consolas', monospace); color: var(--color-text-primary); }
.plugin-guide__code code { font: inherit; color: inherit; background: none; padding: 0; border: 0; }
.plugin-guide__code figcaption { margin-top: var(--space-sm); font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); }

/* Illustration: one horizontal Auto Layout frame holding vertical columns of uneven cards. */
.plugin-guide__diagram { margin: 0 auto; width: 100%; max-width: 520px; }
.plugin-guide__frame { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; padding: 36px 14px 14px; border: 1px dashed var(--color-border-strong); background: var(--color-surface); box-shadow: 6px 6px 0 var(--color-border); }
.plugin-guide__frame-label, .plugin-guide__column-label { font: 600 11px/1.2 var(--font-primary); color: var(--color-text-secondary); }
.plugin-guide__frame-label { position: absolute; top: 12px; left: 14px; }
.plugin-guide__column { display: grid; gap: 8px; padding: 8px; border: 1px dashed var(--color-border-strong); }
.plugin-guide__card { display: block; height: calc(var(--card-rows) * 14px); border: 1px solid var(--color-border-strong); background: color-mix(in srgb, var(--plugin-brand, var(--color-primary)) 18%, var(--color-surface)); }
.plugin-guide__diagram figcaption { margin-top: var(--space-sm); font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); }

/* Comparison table: scrolls sideways inside its frame on narrow screens, never the page. */
.plugin-guide__table { overflow-x: auto; border: 1px solid var(--color-border-strong); box-shadow: 6px 6px 0 var(--color-border); background: var(--color-surface); }
.plugin-guide__table:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 2px; }
.plugin-guide__table table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; line-height: 1.5; text-align: left; }
.plugin-guide__table th, .plugin-guide__table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.plugin-guide__table thead th { font: 600 12px/1.4 var(--font-primary); color: var(--color-text-secondary); background: var(--color-surface-alt); }
.plugin-guide__table tbody th { font-weight: 700; color: var(--color-text-primary); }
.plugin-guide__table tbody tr:last-child th, .plugin-guide__table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 768px) {
  .plugin-guide__frame, .plugin-guide__table { box-shadow: 4px 4px 0 var(--color-border); }
}