/* 06-components/_ai-notice.css — the amber-on-dark warning bar that marks a page whose
   text is LLM-generated (the replay pages and the whole reference section). It bleeds out
   of the body's padding to span the full width and sticks flush under the menu bar;
   .o-appshell__body is the scroll container, so the negative top offset pins it to that
   element's top edge. It is drawn on the page ground rather than an amber fill — the
   amber is in the ink, so the bar reads as a note and not an alarm — and a hairline keeps
   it separated from the content that scrolls under it. */
.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 — its padding plus the brand's — so the ▲ starts
     on the same column as the ⨝ 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; }
/* Balanced so a narrow viewport breaks the sentence into even lines rather than
   leaving one orphaned word on the second. */
.c-ai-notice__text { text-wrap: balance; }

/* The bar carries both phrasings and shows one; the short one is off by default and
   swaps in below the breakpoint, where the full sentence would wrap to several lines. */
.c-ai-notice__text--narrow { display: none; }

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