/* Compatibility article ("Can I shoot X in Y?"). Editorial page: the markup sits in
   .container-editorial, prose runs on the serif at --text-prose, kickers carry .eyebrow,
   the verdict tones are the brand status colours. One sheet per article, identical
   content, so a page can still diverge later without touching the others. */
.compat-header {
  padding: var(--page-top) 0 var(--space-8);
  border-bottom: 1px solid var(--color-border-default);
}

.article-kicker { margin-bottom: var(--space-4); }
.aph-kicker-link { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.aph-kicker-link:hover { color: var(--color-accent); }
.aph-kicker-sep { margin: 0 var(--space-2); }

.compat-title {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  color: var(--color-text-heading);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
}

.verdict-banner {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border-left: 4px solid;
}
.verdict-banner.green { background: color-mix(in srgb, var(--color-success) 10%, transparent); border-color: var(--color-success); }
.verdict-banner.amber { background: color-mix(in srgb, var(--color-caution) 10%, transparent); border-color: var(--color-caution); }
.verdict-banner.red   { background: color-mix(in srgb, var(--color-warning) 12%, transparent); border-color: var(--color-warning); }
.verdict-label { margin-bottom: var(--space-2); }
/* The label is text on the banner's own tint, so it takes the status hue's -ink shade (AA 4.5:1
   on the 10-12% tint); the base hues stay on the rule and the wash. */
.verdict-banner.green .verdict-label { color: var(--color-success-ink); }
.verdict-banner.amber .verdict-label { color: var(--color-caution-ink); }
.verdict-banner.red .verdict-label   { color: var(--color-warning-ink); }
.verdict-text {
  font-family: var(--font-ui);
  font-size: var(--text-lede);
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: var(--lh-snug);
}
.verdict-sub {
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  margin-top: var(--space-2);
  line-height: var(--lh-body);
}

.compat-body { padding: var(--section-standard) 0 var(--section-spacious); }

.compat-section { margin-bottom: var(--section-spacious); }
.compat-section-label { margin-bottom: var(--space-3); }
.compat-section h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  color: var(--color-text-heading);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-4);
}
.compat-section p {
  font-family: var(--font-serif);
  font-size: var(--text-prose);
  line-height: var(--lh-prose);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.compat-section p:last-child { margin-bottom: 0; }
.compat-section p a, .callout a, .callout-warning a { color: var(--color-accent); text-decoration: underline; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-family: var(--font-mono);
  font-size: var(--text-data);
  line-height: var(--lh-data);
  font-variant-numeric: tabular-nums;
}
.spec-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  font: 700 var(--text-label)/1 var(--font-ui);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-emphasis);
}
.spec-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  vertical-align: top;
}
.spec-table tr:last-child td { border-bottom: none; }
.spec-row-label { color: var(--color-text-muted); font-size: var(--text-data-sm); }
.spec-highlight { color: var(--color-text-heading); font-weight: 700; }

.callout, .callout-warning {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-emphasis);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}
.callout strong { color: var(--color-text-heading); }
.callout-warning {
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 25%, transparent);
  border-left-color: var(--color-warning);
}
.callout-warning strong { color: var(--color-warning); }

/* Rated / not rated list (9mm +P). The status column is a .status-badge tone. */
.check-list { margin: var(--space-4) 0; }
.check-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-default);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  line-height: var(--lh-body);
}
.check-item:last-child { border-bottom: none; }
.check-item .status-badge { flex-shrink: 0; margin-top: 1px; }

.bottom-line {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-emphasis);
  padding: var(--space-6);
  margin: var(--space-10) 0 0;
}
.bottom-line-label { margin-bottom: var(--space-2); }
.bottom-line p {
  font-size: var(--text-body);
  color: var(--color-text-heading);
  line-height: var(--lh-body);
  margin: 0;
}

.related-links {
  margin-top: var(--section-spacious);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-default);
}
.related-links-label { margin-bottom: var(--space-4); }
.related-links-grid { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
/* A related link can be a whole question; on a phone it wraps instead of overflowing the column.
   Two classes deep so it outranks the .btn tier's nowrap, which layout.css loads after this sheet. */
.related-links-grid .related-link { display: inline-block; white-space: normal; }