/* /field-guide/ammo-prices/9mm (field-guide/ammo-prices/9mm.astro). Editorial page on
   tokens; container, lede, seg/filter-chip and CTA tiers come from layout.css. */

.a9-breadcrumb {
  font-size: var(--text-body-sm);
  color: var(--color-ink-3);
  padding: var(--page-top) 0 var(--space-1);
}
.a9-breadcrumb a { color: var(--color-ink-2); text-decoration: none; }
.a9-breadcrumb a:hover { color: var(--color-accent); }
.a9-breadcrumb .sep { margin: 0 var(--space-2); opacity: 0.5; }
/* .a9-title and .a9-lede retired with the global PageHead: both carried only margins from before
   .page-head became a grid, and the head supplies its own gap now. */
.a9-updated {
  font-size: var(--text-body-sm);
  color: var(--color-ink-3);
  padding: var(--space-4) 0 var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}
.a9-updated a { color: var(--color-ink-3); }

.a9-section { padding: var(--section-compact) 0; border-bottom: 1px solid var(--color-border); }
.a9-section--last { border-bottom: none; }
.a9-section h2 { margin-bottom: var(--space-4); }
.a9-section p { font-size: var(--text-prose); line-height: var(--lh-prose); color: var(--color-ink); margin-bottom: var(--space-4); }
.a9-section p:last-child { margin-bottom: 0; }
.a9-after { margin-top: var(--space-4); }

/* Snapshot tiles */
.a9-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-20) * 2), 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: var(--space-2);
}
.a9-tile { background: var(--color-surface); padding: var(--space-4); }
.a9-tile .lbl { margin-bottom: var(--space-2); }
.a9-tile .val {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-ink);
  line-height: var(--lh-tight);
}
.a9-tile .sub { font-size: var(--text-body-sm); color: var(--color-ink-2); margin-top: var(--space-2); }
.a9-tile .up { color: var(--color-warning); }
.a9-tile .down { color: var(--color-success); }

/* Chart */
.a9-chart-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-4) var(--space-2);
  margin-top: var(--space-2);
}
.a9-chart-box { position: relative; height: calc(var(--space-20) * 4 + var(--space-5)); }
.a9-toggle-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: var(--space-3) 0 var(--space-1); }
.a9-cap { font-size: var(--text-body-sm); color: var(--color-ink-3); margin-top: var(--space-3); line-height: var(--lh-body); }

/* Table */
.a9-table-scroll { overflow-x: auto; margin-top: var(--space-2); }
table.a9-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-data); line-height: var(--lh-data); }
.a9-table th, .a9-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.a9-table th { font-size: var(--text-label-sm); letter-spacing: var(--tracking-label-sm); text-transform: uppercase; color: var(--color-ink-3); font-weight: 700; }
.a9-table td.num { text-align: right; }
.a9-table .yoy-up { color: var(--color-warning); }
.a9-table .yoy-dn { color: var(--color-success); }
.a9-table .evt { color: var(--color-ink-2); white-space: normal; }

/* Caliber comparison bars */
.a9-cmp { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.a9-cmp-row {
  display: grid;
  grid-template-columns: calc(var(--space-20) + var(--space-10)) 1fr var(--space-16);
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-data);
}
.a9-cmp-row .nm { color: var(--color-ink); }
.a9-cmp-bar { height: var(--space-4); background: var(--color-accent-tint); position: relative; }
.a9-cmp-bar span { --w: 0%; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--color-accent); }
.a9-cmp-row.peer .a9-cmp-bar span { background: var(--color-info); }
.a9-cmp-row .pr { text-align: right; color: var(--color-ink); }

/* FAQ */
.a9-faq { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.a9-faq-item { border-left: 2px solid var(--color-border); padding-left: var(--space-4); }
.a9-faq-q { font-family: var(--font-ui); font-size: var(--text-body); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-2); }
.a9-faq-a { font-size: var(--text-body-sm); line-height: var(--lh-body); color: var(--color-ink-2); margin: 0; }

/* Related links */
.a9-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); }