/* B-WEB-DEMO-01: site note on the packaged showcase pages (/terminal/). Copied as web/dist/terminal/site-note.css.
   No external resources. The showcase's own fiction banner (fixed, 30 px, from the app bundle) stays on top; on the
   terminal page the note sits directly below it and the app shell is moved down by the note's height. */
:root { --amt-site-note-height: 28px; }

.amt-site-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--amt-site-note-height);
  padding: 4px 14px;
  box-sizing: border-box;
  background: #10243a;
  color: #e6edf5;
  border-bottom: 1px solid #2b4a6b;
  font: 600 12px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
}
.amt-site-note a { flex: none; color: #9fd0ff; text-decoration: underline; white-space: nowrap; }
.amt-site-note a:focus-visible { outline: 2px solid #f2c94c; outline-offset: 2px; }

/* Terminal page: fixed below the 30 px showcase banner; the routed app starts below both. */
.amt-site-demo--app .amt-site-note {
  position: fixed;
  inset: var(--showcase-banner-height, 30px) 0 auto 0;
  z-index: 999;
  height: var(--amt-site-note-height);
  white-space: nowrap;
}
/* Narrow screens: the note text shortens with an ellipsis; the link always stays visible. The full note is on the
   /terminal/ landing page, where it wraps. */
.amt-site-demo--app .amt-site-note span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.amt-site-demo--app .showcase-frame .showcase-frame__app { padding-top: calc(var(--showcase-banner-height, 30px) + var(--amt-site-note-height)); }
.amt-site-demo--app .showcase-frame .amt-shell { height: calc(100vh - var(--showcase-banner-height, 30px) - var(--amt-site-note-height)); }