/* The bar bleeds out of the body's padding to span the full width, and the negative margin and
   offset are measured against .o-appshell__body, which is the scroll container rather than the
   window, so they pin it to that element's top edge. The amber is in the ink and not in a fill:
   the page ground plus a hairline reads as a note rather than as an alarm. Inside a section's
   sticky head, c-stickyhead takes the bleed and the offset over. */
.c-ai-notice {
  position: sticky;
  top: calc(var(--space-lg) * -1);
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: calc(var(--space-lg) * -1) calc(var(--gutter-page) * -1) var(--space-lg);
  /* The left inset is the menu bar's own padding plus its brand's, so the mark starts on the same
     column as the one in the bar above rather than at the page gutter. */
  padding: var(--space-2xs) var(--gutter-page) var(--space-2xs)
           calc(var(--space-xs) + var(--space-sm));
  background: var(--surface);
  color: var(--accent);
  border-bottom: var(--bw) solid var(--line);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

.c-ai-notice__mark { line-height: 1; }
.c-ai-notice__text { text-wrap: balance; }

/* Narrow screens: the menu bar drops its own padding and its brand tightens, so the column the
   mark aligns to moves left with them. */
@media (max-width: 40rem) {
  .c-ai-notice { padding-left: var(--space-xs); }
}