/* ==========================================================================
   Public demo only (demo.groundsight-ai.org): the bar above every screen
   that says the data is simulated and leads back to the landing page.
   The screens below it keep the mockup's layout: body becomes a column,
   the bar takes its height and the active screen fills the rest.
   ========================================================================== */

body { display: flex; flex-direction: column; }
#scr-login, #scr-app { flex: 1 1 auto; min-height: 0; }
#scr-app { height: auto; }

.demo-bar {
  flex: none; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 6px 16px; background: var(--text); color: #fff; font-size: 12.5px;
}
.demo-bar .tag { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.demo-bar .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.demo-bar .tag span { font-weight: 400; color: rgba(255, 255, 255, .75); }
.demo-bar nav { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.demo-bar a { color: #fff; text-decoration: none; font-weight: 600; }
.demo-bar a:hover { text-decoration: underline; }
.demo-bar a.cta { padding: 3px 12px; border-radius: 999px; background: var(--pink); }
.demo-bar a.cta:hover { background: var(--pink-d); text-decoration: none; }
.demo-bar .lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: 1px; }
.demo-bar .lang button { border: 0; background: none; color: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; cursor: pointer; }
.demo-bar .lang button[aria-pressed="true"] { background: #fff; color: var(--text); }
.demo-bar :focus-visible { outline: 2px solid var(--pink-line); outline-offset: 2px; }

@media (max-width: 640px) {
  .demo-bar { padding: 6px 12px; gap: 6px 12px; }
  .demo-bar .tag span, .demo-bar .back { display: none; }
}