/* crosswalk-callout.css — Crosswalk Callout (spec §4).
   The callout always banners full-width above the document body, regardless of
   whether the TOC renders. This was changed from the original two-mode layout
   (right column when TOC visible, top banner otherwise) because the inconsistency
   confused reviewers — same screen, different feature placement depending on the
   doc's heading count. Banner-everywhere keeps it discoverable and uniform. */

.crosswalk-callout {
  margin: 0 0 14px 0;
  padding: 14px 14px 12px;
  border: 1px solid;
  border-radius: 8px;
  font: 13px/1.45 "Inter", sans-serif;
  background: var(--paper);
  color: var(--ink-2);
}
.crosswalk-callout.policy { background: var(--gold-bg); border-color: var(--gold-bright); }
.crosswalk-callout.ap     { background: var(--green-bg); border-color: var(--green-bright); }

.crosswalk-callout .cc-eyebrow {
  font: 600 10.5px/1 "Inter", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.crosswalk-callout.policy .cc-eyebrow { color: var(--gold); }
.crosswalk-callout.ap     .cc-eyebrow { color: var(--green); }

.crosswalk-callout .cc-block + .cc-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 24, 20, .08);
}

.crosswalk-callout .cc-title {
  display: block;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 6px;
  font-size: 13.5px;
}
.crosswalk-callout .cc-title:hover { text-decoration: underline; }

.crosswalk-callout .cc-desc {
  margin: 0 0 8px;
  color: var(--ink-2);
}

.crosswalk-callout .cc-meta {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.crosswalk-callout .cc-meta div { display: flex; gap: 6px; margin: 0; }
.crosswalk-callout .cc-meta dt  { color: var(--ink-4); margin: 0; font-weight: 500; }
.crosswalk-callout .cc-meta dd  { color: var(--ink-2); margin: 0; }

.crosswalk-callout .cc-cta {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  font-size: 12.5px;
}
.crosswalk-callout.policy .cc-cta { color: var(--gold); }
.crosswalk-callout.ap     .cc-cta { color: var(--green); }
.crosswalk-callout .cc-cta:hover { text-decoration: underline; }

/* The callout is the last child of .reader-shell in DOM order. Banner everywhere:
   force it to span all grid columns and sit at the top of the shell via order:-1.
   This applies at every viewport — no responsive switch — so reviewers see the
   same chrome whether the doc has a TOC or not. */
.reader-shell .crosswalk-callout {
  grid-column: 1 / -1;
  order: -1;
  margin: 0 0 12px;
}

@media (max-width: 980px) {
  .crosswalk-callout { padding: 12px; }
}