/* exhibit/banner.css: the exhibit strip and the embed footer note.

   Token-only. The strip reads the page's own tokens: theme.css on the app
   pages, the changelog and the about page; the inlined copy on Discover; the
   card's own isolated tokens on the public card. So it follows light and
   dark exactly as the page does (html[data-theme="dark"] on the app pages,
   html[data-card-theme="dark"] and the presets on the card).

   banner.js sets data-exhibit-banner on <html> ("strip" or "note") and
   --exhibit-banner-h on :root from the strip's measured height. Every offset
   below is scoped to the strip mode, so nothing moves before the script runs
   or inside an embed. Strip rules are id-scoped so the pages' own element and
   class rules (the * reset, the phone touch-target floor on buttons) never
   reach into it. No animation anywhere. */

:root { --exhibit-banner-h: 0px; }

/* ---- The strip ---------------------------------------------------------- */
#exhibit-banner {
  --exb-on-accent: var(--surface);   /* label on an --accent fill (design system) */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 990;                      /* above page chrome (sticky banners 100, sidebars 50 to 100,
                                        loading screens), below modals (1000+) and toasts (9999) */
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  margin: 0;
  padding: calc(6px + env(safe-area-inset-top, 0px))
           max(14px, env(safe-area-inset-right, 0px))
           6px
           max(14px, env(safe-area-inset-left, 0px));
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: anywhere;
}
/* The card's label-on-accent token (the card's --accent is the shop's brand). */
html[data-exhibit-ctx="card"] #exhibit-banner { --exb-on-accent: var(--accent-contrast); }

#exhibit-banner .exb-msg {
  flex: 1 1 26rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--text-2);
  font: inherit;
}
#exhibit-banner .exb-tag {
  display: inline-block;
  margin: 0;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--exb-on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.04em;
}
#exhibit-banner .exb-sep { color: var(--text-2); }

#exhibit-banner .exb-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
#exhibit-banner .exb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  min-height: 28px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#exhibit-banner .exb-btn:hover { border-color: var(--text-2); color: var(--text); }
#exhibit-banner .exb-btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
#exhibit-banner .exb-btn[aria-current="page"] { border-color: var(--text-2); }

@media (max-width: 480px) {
  #exhibit-banner {
    column-gap: 10px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    font-size: 12px;
    line-height: 17px;
  }
  #exhibit-banner .exb-msg { flex-basis: 100%; }
  #exhibit-banner .exb-btn { padding: 4px 11px; line-height: 17px; }
}

/* ---- Strip mode: push the page down by the strip's height --------------- */
html[data-exhibit-banner="strip"] { scroll-padding-top: var(--exhibit-banner-h); }
html[data-exhibit-banner="strip"] body { padding-top: var(--exhibit-banner-h); }

/* Fixed at top:0 on dashboard, analytics, import and discover (the sidebar,
   including its slide-in phone state). */
html[data-exhibit-banner="strip"] .sidebar { top: var(--exhibit-banner-h); }

/* Sticky at top:0. Dashboard: the beta and trial banners (sticky from 769px;
   static below, where top does nothing). Dashboard, analytics, import: the
   phone topbar (sticky up to 768px; hidden above). */
html[data-exhibit-banner="strip"] .beta-banner,
html[data-exhibit-banner="strip"] .trial-banner,
html[data-exhibit-banner="strip"] .topbar { top: var(--exhibit-banner-h); }

/* Dashboard in-page sticky panels, each keeping its original offset. */
html[data-exhibit-banner="strip"] .preview-card { top: calc(var(--exhibit-banner-h) + 1rem); }
html[data-exhibit-banner="strip"] .card-editor-layout > .cel-right { top: calc(var(--exhibit-banner-h) + 16px); }
html[data-exhibit-banner="strip"] .card-action-bar { top: calc(var(--exhibit-banner-h) + var(--topbar-h, 0px)); }

/* Fixed layers that start at the top edge: the toast (top-center, per the
   toast contract) and the boot loading screen. */
html[data-exhibit-banner="strip"] .toast { top: calc(var(--exhibit-banner-h) + 1.5rem); }
html[data-exhibit-banner="strip"] .loading-screen { top: var(--exhibit-banner-h); }
/* The shim's own exhibit-notice toast sets top:1.5rem as an inline style, which
   only an !important rule can offset. */
html[data-exhibit-banner="strip"] .exhibit-toast { top: calc(var(--exhibit-banner-h) + 1.5rem) !important; }

/* ---- Note mode: the one-line footer inside an ?embed= frame ------------- */
#exhibit-embed-note {
  box-sizing: border-box;
  margin: 0;
  padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  color: var(--text-2);
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  text-align: center;
  letter-spacing: normal;
}