/* Shared editorial layer for guides using .guide-article-page. */
/* stylelint-disable no-descending-specificity */
html:has(> body.guide-article-page) {
  --color-bg: var(--nd-bg);
  --color-bg-sunken: var(--nd-bg);
  --color-bg-elevated: var(--nd-panel);
  --color-surface: var(--nd-panel);
  --color-surface-hover: var(--nd-hover);
  --color-border: var(--nd-line);
  --color-border-strong: var(--nd-muted);
  --color-text-primary: var(--nd-text);
  --color-text-secondary: var(--nd-muted);
  --color-text-tertiary: var(--nd-muted);
  --color-text-on-accent: var(--ambient-ink);
}

.guide-article-page {
  --content-col: var(--guide-article-content-width);
  --section-gap: var(--guide-article-section-space);

  overflow-x: clip;
}

.guide-article-page main, .guide-article-page .guide-hero {
  background: var(--nd-bg);
}

.guide-article-page .guide-hero-actions {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 100%;
}

.guide-article-page .guide-hero {
  padding: var(--guide-article-hero-space) var(--nd-gutter) var(--guide-article-hero-after);
}

.guide-article-page .guide-hero-glow {
  display: none;
}

.guide-article-page .guide-hero > .guide-hero-grid {
  max-width: var(--home-width);
}

.guide-article-page .guide-hero-grid {
  grid-template-columns: minmax(0, var(--guide-article-copy-width)) minmax(240px, 1fr);
  grid-template-areas: "copy brief";
  gap: clamp(32px, 6vw, 96px);
}

.guide-article-page .guide-hero-copy h1 {
  max-width: none;
  color: var(--nd-text);
  font-size: var(--guide-article-title-size);
  font-weight: 500;
  letter-spacing: -0.062em;
  line-height: 1.04;
  text-wrap: balance;
}

.guide-article-page .guide-hero-meta {
  gap: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-xs);
}

.guide-article-page .guide-hero-meta dt, .guide-article-page .guide-hero-meta dd {
  color: var(--nd-muted);
  font-size: var(--text-sm);
  font-weight: 450;
}

.guide-article-page .guide-hero-lead, .guide-article-page .guide-content p, .guide-article-page .guide-field-list span, .guide-article-page .guide-anatomy-text, .guide-article-page .guide-anatomy-note, .guide-article-page .guide-decisions-table tbody td {
  color: var(--nd-muted);
  font-size: var(--guide-article-reading-size);
  line-height: var(--guide-article-reading-leading);
}

.guide-article-page .guide-hero-lead {
  max-width: var(--guide-article-copy-width);
}

.guide-article-page .guide-content a:not([class]), .guide-article-page .guide-hero-lead a, .guide-article-page .guide-source-note a {
  color: var(--nd-text);
  text-decoration-line: underline;
  text-decoration-color: rgb(var(--ambient-mint-rgb) / 55%);
  text-underline-offset: 0.18em;
}

.guide-article-page .guide-content a:not([class]):hover, .guide-article-page .guide-content a:not([class]):focus-visible, .guide-article-page .guide-hero-lead a:hover, .guide-article-page .guide-hero-lead a:focus-visible, .guide-article-page .guide-source-note a:hover, .guide-article-page .guide-source-note a:focus-visible {
  text-decoration-color: var(--ambient-mint);
}

/* The hero link back to the catalogue is a .ui-link-quiet; only the gap below. */
.guide-article-page .guide-hero .guide-back-link {
  margin-bottom: var(--layout-back-gap);
}

.guide-article-page .guide-brief {
  align-self: start;

  /* top of the figures = top of the h1: skip the "Все гайды" row above it */
  margin-top: var(--touch-target);
  max-width: 320px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.guide-article-page .guide-brief p, .guide-article-page .guide-brief li {
  color: var(--nd-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.guide-article-page .guide-brief p:first-child {
  margin: 0 0 var(--spacing-related);
  color: var(--nd-text);
  font-weight: 550;
}

.guide-article-page .guide-brief ul {
  display: grid;
  gap: var(--spacing-label);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-article-page .guide-brief li {
  padding: 0;
}

.guide-article-page .guide-brief li::before {
  content: none;
}

.guide-article-page .guide-brief p:last-child {
  margin: var(--spacing-related) 0 0;
  padding-top: var(--spacing-related);
  border-top: 1px solid var(--nd-line);
}

.guide-article-page .guide-layout {
  grid-template-columns: var(--guide-article-sidebar-width) minmax(0, 1fr);
  justify-content: start;
  align-items: start;
  gap: clamp(32px, 5vw, 88px);
  width: calc(100% - 2 * var(--nd-gutter));
  max-width: calc(var(--home-width) - 2 * var(--nd-gutter));
  padding: 0 0 var(--guide-article-bottom);
}

.guide-article-page .guide-toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-xs));
  align-self: start;
}

.guide-article-page .guide-toc summary {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: var(--touch-target);
  color: var(--nd-text);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 550;
  list-style: none;
}

.guide-article-page .guide-toc summary::-webkit-details-marker { display: none; }

.guide-article-page .guide-toc-current,
.guide-article-page .guide-toc-chevron { display: none; }

.guide-article-page .guide-toc nav {
  display: grid;
  margin-top: var(--space-2xs);
  border-top: 1px solid var(--nd-line);
}

.guide-article-page .guide-toc nav a {
  min-height: var(--touch-target);
  padding: 10px var(--spacing-related);
  border-bottom: 1px solid var(--nd-line);
  color: var(--nd-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-decoration: none;
}

.guide-article-page .guide-toc nav a:hover, .guide-article-page .guide-toc nav a:focus-visible {
  color: var(--nd-text);
  text-decoration: underline;
  text-decoration-color: var(--ambient-mint);
  text-underline-offset: 0.18em;
}

.guide-article-page .guide-toc nav a[aria-current="location"] {
  background: var(--nd-hover);
  border-bottom-color: var(--ambient-mint);
  color: var(--nd-text);
  font-weight: 600;
}

.guide-article-page .guide-toc nav span, .guide-article-page .guide-step-num, .guide-article-page .guide-anatomy-tag {
  color: var(--ambient-mint);
  background: none;
  -webkit-text-fill-color: currentcolor;
}

.guide-article-page .guide-content > section:not(.guide-finish), .guide-article-page .guide-step, .guide-article-page .guide-prepare, .guide-article-page .guide-problems, .guide-article-page .guide-russia {
  display: block;
  padding-top: var(--guide-article-section-space);
  border-top: 0;
  scroll-margin-top: calc(var(--header-height) + var(--space-xs));
}

.guide-article-page .guide-step-head {
  display: block;
  padding: 0;
  border: 0;
}

.guide-article-page .guide-step-num {
  display: inline;
  height: auto;
  margin-top: 0;
  margin-left: 0.25em;
  font-family: var(--font-mono);
  font-size: 0.42em;
  font-weight: 550;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: middle;
}

.guide-article-page .guide-step-head > div:not([class]) {
  display: block;
}

.guide-article-page .guide-step-head h2, .guide-article-page .guide-prepare h2, .guide-article-page .guide-problems h2, .guide-article-page .guide-russia h2, .guide-article-page .guide-finish h2 {
  display: block;
  margin: 0;
  color: var(--nd-text);
  font-size: var(--guide-article-heading-size);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.guide-article-page .guide-step > p, .guide-article-page .guide-subtitle, .guide-article-page .guide-actions, .guide-article-page .guide-shot, .guide-article-page .guide-callout, .guide-article-page .guide-field-list, .guide-article-page .guide-problem-list {
  margin-top: var(--space-xs);
}

.guide-article-page .guide-actions {
  list-style: none;
}

.guide-article-page .guide-shot, .guide-article-page .guide-table-wrap, .guide-article-page .guide-diagram svg, .guide-article-page .keeper-demo, .guide-article-page .guide-live-result, .guide-article-page .guide-prompt-panel {
  border-color: var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-panel);
  box-shadow: none;
}

.guide-article-page .guide-field-list {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.guide-article-page .guide-field-list > div {
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid var(--nd-line);
  background: transparent;
}

.guide-article-page .guide-field-list > div:first-child {
  border-top: 1px solid var(--nd-line);
}

.guide-article-page .guide-field-list > div:last-child {
  border-bottom: 1px solid var(--nd-line);
}

.guide-article-page .guide-field-list strong {
  color: var(--nd-text);
  font-family: var(--font-body);
  font-weight: 550;
}

.guide-article-page .guide-callout {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.guide-article-page .guide-callout-warning {
  padding: var(--space-xs);
  border: 1px solid color-mix(in srgb, var(--color-warning) 42%, var(--nd-line));
  background: color-mix(in srgb, var(--color-warning) 8%, var(--nd-panel));
}

.guide-article-page .guide-problem-list {
  gap: 0;
}

.guide-article-page .guide-problem, .guide-article-page .guide-problem-compact {
  display: block;
  padding: var(--space-xs) 0;
  border: 0;
  border-bottom: 1px solid var(--nd-line);
  border-radius: 0;
  background: transparent;
}

.guide-article-page .guide-problem:first-child {
  border-top: 1px solid var(--nd-line);
}

.guide-article-page .guide-problem-index {
  display: none;
}

.guide-article-page .guide-table-wrap:focus-visible {
  outline-color: var(--ambient-mint);
}

.guide-article-page .guide-decisions-table th, .guide-article-page .guide-decisions-table td {
  border-color: var(--nd-line);
  vertical-align: baseline;
}

.guide-article-page .guide-decisions-table thead th {
  background: transparent;
  color: var(--nd-muted);
  letter-spacing: normal;
  text-transform: none;
}

.guide-article-page .guide-decisions-table thead th:nth-child(1) {
  width: 30%;
}

.guide-article-page .guide-decisions-table thead th:nth-child(2) {
  width: 12%;
}

.guide-article-page .guide-decisions-table thead th:nth-child(3) {
  width: 58%;
}

.guide-article-page .guide-decisions-table tbody th, .guide-article-page .guide-subtitle, .guide-article-page .guide-live-result h3, .guide-article-page .guide-problem h3 {
  color: var(--nd-text);
}

.guide-article-page .guide-code {
  border-color: var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-panel);
  color: var(--nd-text);
}

.guide-article-page .guide-content code {
  border-color: var(--nd-line);
  background: rgb(var(--ambient-mint-rgb) / 10%);
  color: var(--nd-text);
}

.guide-article-page .guide-code code {
  border: 0;
  background: transparent;
}

.guide-article-page .guide-code-wrap {
  position: relative;
  margin-top: var(--space-xs);
}

/* The scroll hint sits over the block's top padding, out of the flow: JS
   hiding it when the code fits moves nothing. */
.guide-article-page .guide-content .guide-code-wrap > p {
  position: absolute;
  top: var(--space-3xs);
  right: calc(var(--space-xs) + 1px);
  left: calc(var(--space-xs) + 1px);
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nd-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  pointer-events: none;
}

.guide-article-page .guide-code-wrap .guide-code {
  margin: 0;
  padding-top: calc(var(--text-xs) * var(--leading-normal) + var(--space-2xs));
}

.guide-article-page .guide-code:focus-visible {
  outline: 2px solid var(--ambient-mint);
  outline-offset: 2px;
}

.guide-article-page .guide-live-result {
  align-items: stretch;
  border-color: var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-panel);
}

.guide-article-page .guide-live-result > div:first-child {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
}

.guide-article-page .guide-live-result h3 { margin: 0; }
.guide-article-page .guide-live-result p { margin: 0; }

.guide-article-page .guide-live-links {
  display: grid;
  flex: none;
  align-self: center;
  gap: var(--space-2xs);
}

.guide-article-page .guide-prompt-panel {
  margin-top: var(--space-xs);
  padding: var(--space-xs);
  border: 1px solid var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-panel);
}

.guide-article-page .guide-prompt-start { margin: 0 0 var(--space-2xs); }

.guide-article-page .guide-prompt-text {
  box-sizing: border-box;
  display: block;
  width: 100%;
  field-sizing: content;
  padding: var(--space-2xs);
  border: 1px solid var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-bg);
  color: var(--nd-text);
  font: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  resize: none;
}

/* Without field-sizing the height is set by JS; with no JS keep a handle. */
@supports not (field-sizing: content) {
  .guide-article-page .guide-prompt-text { resize: vertical; }
}

.guide-article-page .guide-prompt-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}
.guide-article-page .guide-prompt-actions [hidden] { display: none; }

.guide-article-page .guide-prompt-actions p {
  margin: 0;
  color: var(--nd-muted);
  font-size: var(--text-sm);
}

.guide-article-page .guide-shot-link {
  position: relative;
  display: block;
  color: inherit;
  cursor: zoom-in;
}
.guide-article-page .guide-shot-link img { display: block; }

/* The whole frame opens the viewer; the visible hint is a small corner icon
   that never covers the screenshot. The text stays for assistive tech. */
.guide-article-page .guide-shot-zoom {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  display: grid;
  place-items: center;
  width: var(--guide-article-zoom-size);
  height: var(--guide-article-zoom-size);
  border: 1px solid var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--guide-article-zoom-bg);
  color: var(--nd-text);
  opacity: 0.8;
  transition: opacity var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}

/* 44px hit area without enlarging the visible icon */
.guide-article-page .guide-shot-zoom::after {
  content: "";
  position: absolute;
  inset: calc((var(--guide-article-zoom-size) - var(--touch-target)) / 2);
}

.guide-article-page .guide-shot-link:hover .guide-shot-zoom,
.guide-article-page .guide-shot-link:focus-visible .guide-shot-zoom {
  background: var(--nd-bg);
  opacity: 1;
}

.guide-article-page .guide-shot-zoom svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.guide-article-page .guide-shot-zoom-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.guide-article-page .guide-image-dialog {
  width: var(--guide-article-image-width);
  max-width: none;
  max-height: var(--guide-article-image-height);
  padding: var(--space-2xs);
}

.guide-article-page .guide-image-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.guide-article-page .guide-image-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
}

.guide-article-page .guide-image-dialog h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.guide-article-page .guide-image-dialog-close {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

.guide-article-page .guide-image-dialog-view {
  overflow: auto;
  min-height: 0;
  max-height: calc(var(--guide-article-image-height) - var(--guide-article-image-chrome-height));
  border: 1px solid var(--nd-line);
}

.guide-article-page .guide-image-dialog-view img {
  display: block;
  width: 100%;
  height: auto;
}

.guide-article-page .guide-image-dialog-view.is-zoomed img {
  width: auto;
  max-width: none;
}

.guide-article-page .guide-image-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

@media (width <= 760px) {
  .guide-article-page .guide-image-dialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .guide-article-page .guide-image-dialog-view {
    flex: 1 1 auto;
    max-height: none;
  }

  .guide-article-page .guide-image-dialog-actions .ui-btn { flex: 1 1 auto; }

  /* Original size on a phone: about 2.5 screens wide, text stays legible */
  .guide-article-page .guide-image-dialog-view.is-zoomed img {
    width: 250%;
    max-width: none;
  }
}

.guide-article-page .guide-finish {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 0;
  margin-top: var(--guide-article-finish-before);
  padding: var(--guide-article-finish-padding);
  border: 1px solid var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-panel);
  box-shadow: none;
}

.guide-article-page .guide-finish-copy {
  display: block;
}

.guide-article-page .guide-finish-copy > * {
  grid-column: auto;
}

.guide-article-page .guide-finish-copy p {
  max-width: var(--guide-article-copy-width);
  margin-top: var(--space-2xs);
}

.guide-article-page .guide-finish-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}

@media (width > 1080px) {
  .guide-article-page .guide-toc nav {
    max-height: var(--guide-article-toc-nav-max-height-wide);
    overflow-y: auto;
  }

  .guide-article-page .guide-toc summary {
    pointer-events: none;
    cursor: default;
  }
}

@media (width <= 1080px) {
  .guide-article-page .guide-layout {
    grid-template-columns: minmax(0, var(--guide-article-content-width));
    row-gap: var(--space-xs);
    justify-content: center;
    width: 100%;
    padding-inline: var(--nd-gutter);
  }

  .guide-article-page .guide-toc {
    position: sticky;
    z-index: 2;
    top: var(--header-height);
    width: 100%;
    margin-top: 0;
    padding: 0 var(--space-2xs);
    border: 1px solid var(--nd-line);
    border-radius: var(--radius-xs);
    background: var(--nd-panel);
  }


  .guide-article-page .guide-toc-title { flex: none; }
  .guide-article-page .guide-toc-tail { display: none; }

  .guide-article-page .guide-toc-current {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--nd-muted);
    font-weight: 450;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .guide-article-page .guide-toc-current:not(:empty)::before { content: "· "; }

  .guide-article-page .guide-toc-chevron {
    display: block;
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0 var(--space-3xs) 3px auto;
    border-right: 2px solid var(--nd-text);
    border-bottom: 2px solid var(--nd-text);
    transform: rotate(45deg);
    transition: transform var(--duration-base) var(--ease-out), margin var(--duration-base) var(--ease-out);
  }

  .guide-article-page .guide-toc[open] .guide-toc-chevron {
    margin-bottom: -3px;
    transform: rotate(-135deg);
  }

  .guide-article-page .guide-toc-current + .guide-toc-chevron { margin-left: 0; }

  .guide-article-page .guide-toc:not([open]) nav { display: none; }

  /* Before JS has set the compact state the list is still hidden (JS closes
     it on narrow screens): otherwise closing it shifts the whole article. */
  @media (scripting: enabled) {
      .guide-article-page .guide-toc:not([data-toc-ready]) nav {
      max-height: 0;
      margin-top: 0;
      overflow: hidden;
      border-top-width: 0;
      visibility: hidden;

      /* Safety net: if no script ever marks the TOC ready, show it after 2 s. */
      animation: guide-toc-fallback 0s 2s forwards;
    }
  }

  @keyframes guide-toc-fallback {
    to {
      max-height: var(--guide-article-toc-nav-max-height);
      margin-top: var(--space-2xs);
      border-top-width: 1px;
      visibility: visible;
    }
  }

  .guide-article-page .guide-toc nav {
    max-height: var(--guide-article-toc-nav-max-height);
    overflow-y: auto;
  }

  .guide-article-page .guide-content > section:not(.guide-finish), .guide-article-page .guide-step, .guide-article-page .guide-prepare, .guide-article-page .guide-problems, .guide-article-page .guide-russia {
    scroll-margin-top: calc(var(--header-height) + var(--touch-target) + var(--space-2xs));
  }

  /* The contents bar sits between the hero and the text with one even gap on
     each side. Without this the hero's bottom padding, the desktop column gap
     (now a row gap, set on .guide-layout above) and the first section's top
     padding stacked into 60-90 px holes around a 46 px bar. */
  .guide-article-page .guide-hero {
    padding-bottom: var(--space-xs);
  }

  .guide-article-page .guide-content > section:first-child:not(.guide-finish) {
    padding-top: 0;
  }
}

@media (width <= 820px) {
  .guide-article-page .guide-hero-grid {
    grid-template-columns: minmax(0, var(--guide-article-copy-width));
    grid-template-areas: "copy" "brief";
    gap: var(--space-xs);
  }
}

@media (width <= 600px) {
  .guide-article-page .guide-hero {
    padding-top: var(--guide-article-hero-space);
    padding-bottom: var(--guide-article-hero-after);
  }

  .guide-article-page .guide-hero-copy h1 {
    font-size: var(--guide-article-title-size-mobile);
  }

  .guide-article-page .guide-hero-meta {
    display: grid;
  }

  .guide-article-page .guide-hero-actions {
    display: flex;
  }

  .guide-article-page .guide-hero-actions, .guide-article-page .guide-live-links, .guide-article-page .guide-finish-actions {
    flex-direction: column;
  }

  .guide-article-page .guide-hero-actions .ui-btn, .guide-article-page .guide-live-links .ui-btn, .guide-article-page .guide-finish-actions a {
    width: 100%;
  }

  .guide-article-page .guide-live-links {
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch;
    width: 100%;
  }

  .guide-article-page .guide-layout {
    padding-bottom: var(--guide-article-bottom);
  }

  .guide-article-page .guide-hero-lead, .guide-article-page .guide-content p, .guide-article-page .guide-field-list span, .guide-article-page .guide-anatomy-text, .guide-article-page .guide-anatomy-note, .guide-article-page .guide-decisions-table tbody td {
    font-size: var(--text-base);
  }
}

@media (width <= 600px) {
  .guide-article-page .guide-decisions-wrap {
    overflow: visible;
  }

  .guide-article-page .guide-decisions-table, .guide-article-page .guide-decisions-table tbody, .guide-article-page .guide-decisions-table tr {
    display: block;
    min-width: 0;
  }

  .guide-article-page .guide-decisions-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .guide-article-page .guide-decisions-table tr {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--nd-line);
  }

  .guide-article-page .guide-decisions-table tbody th, .guide-article-page .guide-decisions-table tbody td {
    padding: 0;
    border: 0;
    width: auto;
}

  .guide-article-page .guide-decisions-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-2xs);
  }

  .guide-article-page .guide-decisions-table tbody td:nth-child(2) {
    margin-top: 0;
    padding: 0;
  }

  .guide-article-page .guide-decisions-table tbody td:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: var(--space-2xs);
  }

  .guide-article-page .guide-decisions-table tbody td::before { content: none; }


}

.guide-article-page .guide-diagram svg {
  padding: var(--space-2xs);
}

.guide-article-page .guide-diagram-label, .guide-article-page .guide-diagram-num, .guide-article-page .guide-diagram-center {
  font-size: var(--text-base);
}

.guide-article-page .guide-diagram-label {
  fill: var(--nd-text);
}

.guide-article-page .guide-diagram-center {
  fill: var(--nd-muted);
}

.guide-article-page .guide-diagram .guide-loop-narrow {
  display: none;
}

@media (width <= 768px) {
  .guide-article-page .guide-diagram .guide-loop-wide {
    display: none;
  }

  .guide-article-page .guide-diagram .guide-loop-narrow {
    display: block;
    max-width: 320px;
    margin-inline: auto;
  }
}

/* On phones the schema is as wide as the other panels. */
@media (width <= 480px) {
  .guide-article-page .guide-diagram .guide-loop-narrow { max-width: none; }
}

.guide-article-page .guide-decisions-table thead th:nth-child(2),
.guide-article-page .guide-decisions-table tbody td:nth-child(2) {
  padding-inline: var(--space-3xs);
}

.guide-article-page .guide-decisions-table .guide-who {
  padding: 3px var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 550;
  white-space: nowrap;
}

/* human = warm lime, AI = cool teal: two calm, clearly different tints */
.guide-article-page .guide-who-human {
  background: rgb(var(--ambient-lime-rgb) / 16%);
  color: var(--ambient-lime);
}

.guide-article-page .guide-who-ai {
  background: rgb(var(--ambient-teal-rgb) / 28%);
  color: var(--ambient-sea);
}


@media (width <= 600px) {
  .guide-article-page .guide-decisions-table tbody tr { padding-inline: var(--space-2xs); }
}

.guide-article-page .guide-decisions-table { min-width: 0; }

.guide-article-page .keeper-demo-controls[hidden] { display: none; }

/* One segmented was/now switch on the left, Pause + New series on the right,
   the score on its own line. On phones each group is a full-width row. */
.guide-article-page .keeper-demo-top {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
}

.guide-article-page .keeper-demo-controls {
  display: flex;
  gap: var(--space-2xs);
  margin: 0 0 0 auto;
}

.guide-article-page .keeper-demo-score {
  flex: 1 0 100%;
  color: var(--nd-muted);
}
.guide-article-page .keeper-demo-legend { padding: var(--space-2xs) var(--space-xs); }

.guide-article-page .keeper-demo-legend p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.guide-article-page .keeper-demo-legend p + p { margin-top: var(--space-3xs); }

@media (width <= 600px) {
  .guide-article-page .guide-prompt-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .guide-article-page .guide-prompt-actions button { width: 100%; }
}

.guide-article-page .guide-prompt-text:focus-visible,
.guide-article-page .guide-image-dialog-view:focus-visible,
.guide-article-page .guide-shot-link:focus-visible {
  outline: 2px solid var(--ambient-mint);
  outline-offset: 2px;
}

/* ===== Round 2: visual review fixes ===== */

/* Shot header: one line, caption shortens with an ellipsis */
.guide-article-page .guide-shot-top {
  flex-flow: row nowrap;
  align-items: center;
  min-width: 0;
}

.guide-article-page .guide-shot-top span { flex: none; }

.guide-article-page .guide-shot-top b {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Callouts and lists read at the same size as paragraphs; a callout stands
   out by its rule, not by smaller type. */
.guide-article-page .guide-callout > div,
.guide-article-page .guide-actions li {
  color: var(--nd-muted);
  font-size: var(--guide-article-reading-size);
  line-height: var(--guide-article-reading-leading);
}

.guide-article-page .guide-callout strong,
.guide-article-page .guide-actions strong { color: var(--nd-text); }

.guide-article-page .guide-callout:not(.guide-callout-warning) {
  padding-left: var(--space-xs);
  border-left: 3px solid var(--ambient-mint);
}

/* Prompt breakdown: label on top, wording and comment as two equal columns */
.guide-article-page .guide-anatomy {
  border-color: var(--nd-line);
  border-radius: var(--radius-xs);
}

.guide-article-page .guide-anatomy-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "tag tag" "text note";
  gap: var(--space-2xs) var(--space-xs);
  padding: var(--space-xs);
  border-color: var(--nd-line);
}

.guide-article-page .guide-anatomy-tag { grid-area: tag; }
.guide-article-page .guide-anatomy-text { grid-area: text; }

.guide-article-page .guide-anatomy-note {
  grid-area: note;
  border-left-color: var(--nd-line);
}

/* Closing block */
.guide-article-page .guide-finish-actions .guide-back-link { margin: 0; }

/* Read next */
.guide-article-page .guide-next { margin-top: var(--guide-article-section-space); }

.guide-article-page .guide-next h2 {
  margin: 0;
  color: var(--nd-text);
  font-size: var(--guide-article-heading-size);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.guide-article-page .guide-next-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
}

.guide-article-page .guide-next-list li {
  position: relative;
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  padding: var(--space-xs);
  border: 1px solid var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-panel);
  transition: border-color var(--duration-base) var(--ease-out);
}

.guide-article-page .guide-next-list li:hover,
.guide-article-page .guide-next-list li:focus-within { border-color: var(--nd-muted); }

.guide-article-page .guide-next-list p {
  margin: 0;
  color: var(--ambient-mint);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* stretched link: the whole card is clickable, one tab stop */
.guide-article-page .guide-next-link {
  color: var(--nd-text);
  font-size: var(--text-lg);
  font-weight: 550;
  line-height: 1.3;
  text-decoration: none;
}

.guide-article-page .guide-next-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.guide-article-page .guide-next-link:focus-visible {
  outline: 2px solid var(--ambient-mint);
  outline-offset: 2px;
}

.guide-article-page .guide-next-list span {
  color: var(--nd-muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

@media (width <= 1080px) and (width > 600px) {
  .guide-article-page .guide-live-links {
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    justify-content: start;
  }
}

@media (width <= 820px) {
  .guide-article-page .guide-brief {
    max-width: none;
    margin-top: 0;
  }

  .guide-article-page .guide-anatomy-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tag" "text" "note";
  }

  .guide-article-page .guide-next-list { grid-template-columns: minmax(0, 1fr); }
}

@media (width <= 760px) {
  .guide-article-page .keeper-demo-modes,
  .guide-article-page .keeper-demo-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 0;
  }
}

@media (width <= 600px) {
  .guide-article-page { --guide-article-reading-size: var(--text-base); }

  .guide-article-page .keeper-demo-top { padding-inline: var(--space-2xs); }
  .guide-article-page .guide-finish-actions .guide-back-link { justify-content: center; }
}

/* Security guide: comparison and audit list in the shared article language. */
.guide-security-page .guide-table {
  min-width: 0;
  font-size: var(--text-base);
  line-height: var(--guide-article-reading-leading);
}

.guide-security-page .guide-table th,
.guide-security-page .guide-table td {
  border-color: var(--nd-line);
  vertical-align: top;
}

.guide-security-page .guide-table thead th {
  background: transparent;
  color: var(--nd-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
}

.guide-article-page .guide-terminal-frame {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.guide-article-page .guide-terminal-body { padding: 0; }

.guide-article-page .guide-terminal h2 {
  margin: 0;
  color: var(--nd-text);
  font-size: var(--guide-article-heading-size);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.guide-article-page .guide-command-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--nd-line);
}

.guide-article-page .guide-command-list > div {
  gap: var(--space-2xs);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--nd-line);
}

.guide-article-page .guide-command-list dt { color: var(--ambient-mint); }

.guide-article-page .guide-command-list dd {
  color: var(--nd-muted);
  font-size: var(--guide-article-reading-size);
  line-height: var(--guide-article-reading-leading);
}

@media (width <= 820px) {
  .guide-security-page .guide-table-wrap { overflow: visible; }

  .guide-security-page .guide-table,
  .guide-security-page .guide-table tbody,
  .guide-security-page .guide-table tr {
    display: block;
    width: 100%;
  }

  .guide-security-page .guide-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .guide-security-page .guide-table tbody tr {
    padding: var(--space-xs);
    border-bottom: 1px solid var(--nd-line);
  }

  .guide-security-page .guide-table tbody tr:last-child { border-bottom: 0; }

  .guide-security-page .guide-table tbody th,
  .guide-security-page .guide-table tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .guide-security-page .guide-table tbody td { margin-top: var(--space-2xs); }

  .guide-security-page .guide-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-3xs);
    color: var(--nd-text);
    font-size: var(--text-sm);
    font-weight: 550;
  }
}

/* Publishing guide: file structure and short Git glossary. */
.guide-publish-page .guide-file-tree {
  margin-top: var(--space-xs);
  padding: var(--space-xs);
  border-color: var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-panel);
  box-shadow: none;
}

.guide-publish-page .guide-file-tree-title { border-color: var(--nd-line); }

.guide-publish-page .guide-file-tree-ok {
  background: rgb(var(--ambient-mint-rgb) / 10%);
  color: var(--ambient-mint);
}

.guide-publish-page .guide-glossary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.guide-publish-page .guide-term {
  min-width: 0;
  padding: var(--space-xs);
  border-color: var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-panel);
}

.guide-publish-page .guide-term > span { color: var(--ambient-mint); }

.guide-publish-page .guide-term h3 {
  color: var(--nd-text);
  font-weight: 550;
}

.guide-publish-page .guide-content .guide-term p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}



@media (width <= 820px) {
  .guide-publish-page .guide-glossary { grid-template-columns: minmax(0, 1fr); }
}

@media (width <= 600px) {
  .guide-publish-page .guide-command-list > div {
    flex-direction: column;
    gap: var(--space-3xs);
  }
}

/* Keep long interface paths within a screenshot header on small phones. */
.guide-publish-page .guide-shot-top span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-publish-page .guide-url-pattern {
  margin-top: var(--space-xs);
  padding: var(--space-xs);
  border-color: var(--nd-line);
  border-radius: var(--radius-xs);
  background: var(--nd-panel);
  box-shadow: none;
}

.guide-publish-page .guide-url-pattern > span {
  margin-bottom: var(--space-2xs);
  color: var(--nd-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
}

.guide-publish-page .guide-url-pattern code {
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nd-text);
  font-size: var(--text-base);
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Payment reference: compare columns on desktop, read labelled rows below
   the article's sidebar breakpoint. The same table stays in the DOM. */
.guide-payment-page .guide-table {
  min-width: 0;
  font-size: var(--text-base);
  line-height: var(--guide-article-reading-leading);
}

.guide-payment-page .guide-table th,
.guide-payment-page .guide-table td {
  border-color: var(--nd-line);
  vertical-align: top;
}

.guide-payment-page .guide-table thead th {
  background: transparent;
  color: var(--nd-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
}

.guide-payment-page .guide-risk {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.guide-payment-page .guide-table-methods th:nth-child(2),
.guide-payment-page .guide-table-methods td:nth-child(2) {
  padding-inline: var(--space-3xs);
}

@media (width <= 1080px) {
  .guide-payment-page .guide-table-wrap { overflow: visible; }

  .guide-payment-page .guide-table,
  .guide-payment-page .guide-table tbody,
  .guide-payment-page .guide-table tr {
    display: block;
    width: 100%;
  }

  .guide-payment-page .guide-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .guide-payment-page .guide-table tbody tr {
    padding: var(--space-xs);
    border-bottom: 1px solid var(--nd-line);
  }

  .guide-payment-page .guide-table tbody tr:last-child { border-bottom: 0; }

  .guide-payment-page .guide-table tbody th,
  .guide-payment-page .guide-table tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .guide-payment-page .guide-table-methods th:nth-child(2),
  .guide-payment-page .guide-table-methods td:nth-child(2) { padding-inline: 0; }

  .guide-payment-page .guide-table tbody td { margin-top: var(--space-2xs); }

  .guide-payment-page .guide-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-3xs);
    color: var(--nd-text);
    font-size: var(--text-sm);
    font-weight: 550;
  }
}

@media (width <= 1200px) {
  .guide-article-page {
    --guide-article-finish-before: var(--spacing-section);
    --guide-article-finish-padding: var(--spacing-content);
  }
}

.guide-article-page .guide-content > section:first-child .guide-lead { margin-top: var(--spacing-related); }