/* Article: Can AI crawlers actually read your site? (resources/ai-crawlers-read-your-site). Scoped with the acr- prefix.
   Page-only pieces: the crawler table, the browser versus crawler figure and the numbered access check. */

/* Crawler table: three vendors by job, bot names in code style. On narrow phones the shared .table-wrap scrolls sideways */
.prose > .acr-bots { margin-top: 1.4em; }
.prose > .acr-bots + * { margin-top: 1.4em; }
.acr-bots .table { font-size: 14.5px; }
.acr-bots .table th, .acr-bots .table td { padding: 12px 14px; vertical-align: middle; }
.acr-bots .table tbody th { white-space: nowrap; color: var(--ink); font-weight: 600; }
.acr-bots code { font-size: 13px; white-space: nowrap; }
.acr-bots .acr-none { color: var(--muted); }
.acr-bots figcaption { margin-top: 10px; text-wrap: pretty; }
/* Phones: each engine becomes a small card of label and bot name, so the Training column isn't hidden off to the side.
   The table keeps explicit ARIA roles in the markup because display changes can drop native table semantics. */
@media (max-width: 639px) {
  .acr-bots .table-wrap > .table { min-width: 0; }
  .acr-bots .table, .acr-bots tbody, .acr-bots tr { display: block; }
  .acr-bots thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .acr-bots tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .acr-bots tbody tr:last-child { border-bottom: 0; }
  .acr-bots .table tbody th, .acr-bots .table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; }
  .acr-bots .table tbody th { padding-bottom: 6px; }
  .acr-bots tbody td::before { content: attr(data-label); color: var(--muted); font-size: 13.5px; }
}

/* Browser versus crawler: the same hypothetical page twice, side by side from 640px */
.prose > .acr-compare { margin-top: 1.6em; }
.prose > .acr-compare + * { margin-top: 1.6em; }
.acr-panes { display: grid; gap: 12px; }
@media (min-width: 640px) { .acr-panes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.acr-pane {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--highlight), var(--shadow-sm); font-size: 14px; line-height: 1.45;
}
.acr-pane-bot { border-style: dashed; border-color: var(--accent-line); }
.prose .acr-pane p { margin: 0; }
.prose .acr-pane .acr-pane-label { margin-bottom: 6px; }
.acr-pane-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; }
.acr-pane-label .icon { width: 16px; height: 16px; color: var(--accent); }
.acr-page-title { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.acr-page-sub { color: var(--muted); font-size: 13.5px; }
.acr-line { display: block; height: 7px; width: 92%; border-radius: 4px; background: var(--line); }
.acr-line-short { width: 64%; }
.acr-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; }
.acr-specs > div { padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--bg); }
.prose .acr-specs dt { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.prose .acr-specs dd { margin: 2px 0 0; color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.acr-empty {
  flex: 1; display: grid; place-items: center; min-height: 118px; margin-top: 6px; padding: 12px;
  border: 1.5px dashed var(--accent-line); border-radius: var(--r-sm); background: var(--accent-soft);
  color: var(--accent-text); font-size: 13px; font-weight: 500; text-align: center; text-wrap: balance;
}
.acr-compare figcaption { margin-top: 12px; text-align: center; text-wrap: balance; }

/* The access check: a numbered card list */
.acr-check {
  list-style: none; margin: 0; padding: 4px 0; counter-reset: acr;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--highlight), var(--shadow-sm); font-size: .95em; line-height: 1.6;
}
.prose > .acr-check { margin-top: 1.1em; }
.acr-check > li { counter-increment: acr; position: relative; padding: 16px 20px 16px 64px; }
.prose .acr-check > li + li { margin-top: 0; border-top: 1px solid var(--line-soft); }
.acr-check > li::before {
  content: counter(acr, decimal-leading-zero);
  position: absolute; left: 20px; top: 15px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-text);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
@media (max-width: 479px) {
  .acr-check > li { padding: 14px 16px 14px 54px; }
  .acr-check > li::before { left: 14px; top: 14px; width: 28px; height: 28px; }
}

/* Sources: publisher reads first, the title is the link */
.sources .acr-pub { color: var(--ink-2); font-weight: 500; }