/* Hand-written translator pair pages (.tr-guide), built from data/translate-pages/<pair>.json.
   Only what aiwa-seo.css does not already provide: readable prose columns, the quick-answer box,
   the recorded runs with their notes, a two-column card grid and the review line. Tokens only,
   so dark mode comes from the same variables as the rest of the explainer. */

.tr-guide .tr-guide-prose { max-width: 760px; margin-inline: auto; }
.tr-guide .tr-guide-prose .wx-p { color: var(--aiwa-text); font-size: 16.5px; line-height: 1.75; }
.tr-guide .tr-guide-prose .wx-p + .wx-p { margin-top: 16px; }
.tr-guide .wx-head + .tr-guide-prose { margin-top: 28px; }
.tr-guide .tr-guide-table { margin: 28px 0; }
.tr-guide .tr-guide-table .wx-table { min-width: 0; }
.tr-guide .tr-guide-table + .wx-p { margin-top: 0; }

.tr-guide .tr-answer { max-width: 760px; margin: 32px auto 0; }
.tr-guide .tr-answer-q { margin: 0 0 6px; color: var(--aiwa-ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

.tr-guide .tr-runs { display: grid; gap: clamp(36px, 4vw, 52px); max-width: 1040px; margin-inline: auto; }
.tr-guide .tr-run > .wx-t { margin-bottom: 14px; }
.tr-guide .tr-run .wx-note { margin: 12px 0 0; color: var(--aiwa-muted); font-size: 13.5px; }
.tr-guide .tr-notes { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 20px; color: var(--aiwa-text); font-size: 15.5px; line-height: 1.65; }

.tr-guide .wx-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; }
.tr-guide .tr-human { max-width: 760px; margin: 28px auto 0; color: var(--aiwa-text); font-size: 15.5px; line-height: 1.7; }
.tr-guide .tr-reverse { text-align: center; }
.tr-guide .tr-reverse a, .tr-guide .tr-reviewed a { color: var(--aiwa-brand-dark); }

.tr-guide .tr-reviewed { max-width: 760px; margin-inline: auto; color: var(--aiwa-muted); font-size: 14px; line-height: 1.6; text-align: center; }
.tr-guide .tr-reviewed p { margin: 0; }
.tr-guide section.wx:has(.tr-reviewed) { padding: 28px 0; }

@media (max-width: 760px) {
  .tr-guide .wx-g2 { grid-template-columns: 1fr; }
  .tr-guide .wx-io { grid-template-columns: 1fr; }
}