/* The demo.shotwell.ai top bar on the showcase player. The rules copy the
   #demo-topbar block of templates/labeller/demo_workspace.html, so both demo
   pages look the same. Change both together. */

body.sc-demo { --topbar-h: 46px; --tabs-h: 46px; }
#demo-topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; font-size: 13px; }
#demo-brand-row {
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 16px;
  background: linear-gradient(100deg, #16233f 0%, #2f5a8a 40%, #55489c 72%, #9c4a74 100%);
}
#demo-brand-row .spacer { flex: 1; }
#demo-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
#demo-brand:hover { text-decoration: none; }
#demo-brand-mark {
  width: 28px; height: 28px; border-radius: 8px; background: #fffaf4;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(8, 14, 28, 0.4);
}
#demo-brand-mark img { width: 16px; height: 16px; display: block; }
#demo-brand-name { color: #ffffff; font-size: 15px; font-weight: 750; letter-spacing: 0.01em; }
#demo-brand-name .demos-word { font-weight: 450; color: #ccd8ef; margin-left: 2px; }
#demo-tabs-row {
  display: flex; align-items: stretch; gap: 10px;
  height: 46px; padding: 0 10px 0 8px;
  background: #ffffff; border-bottom: 1px solid #e1e4e8;
}
#demo-topbar .demo-switch {
  display: inline-flex; align-items: stretch; gap: 0;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
#demo-topbar .demo-switch::-webkit-scrollbar { display: none; }
.demo-group { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.demo-group + .demo-group { margin-left: 8px; padding-left: 12px; border-left: 1px solid #e6e9ed; }
.demo-group[data-group="xdof"] { --tab-accent: #3b6ea8; --tab-accent-soft: #e9f1f9; }
.demo-group[data-group="dm"]   { --tab-accent: #b3641f; --tab-accent-soft: #fdf1e4; }
.demo-group[data-group="ego"]  { --tab-accent: #6a4fa8; --tab-accent-soft: #f1ecfa; }
.demo-group-label {
  align-self: center; margin-right: 6px; padding: 3px 9px;
  font-size: 10px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--tab-accent, #57606a); background: var(--tab-accent-soft, #f0f1f2);
  border-radius: 999px; white-space: nowrap;
}
#demo-topbar .demo-switch a {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  padding: 0 12px; font-size: 12.5px; font-weight: 600;
  color: #57606a; text-decoration: none; white-space: nowrap;
  flex: 0 0 auto;
  border-top: 2px solid transparent; border-bottom: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
#demo-topbar .demo-switch a .tab-tags {
  font-size: 9px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: lowercase; color: #98a1ab;
}
#demo-topbar .demo-switch a:hover {
  color: var(--tab-accent, #24292f); background: var(--tab-accent-soft, #f3f5f7);
  text-decoration: none;
}
#demo-topbar .demo-switch a:hover .tab-tags { color: var(--tab-accent, #57606a); opacity: 0.75; }
#demo-topbar .demo-switch a.active {
  color: var(--tab-accent, #1f3f5f); border-bottom-color: var(--tab-accent, #1f3f5f);
  background: transparent; font-weight: 700;
}
#demo-topbar .demo-switch a.active .tab-tags { color: var(--tab-accent, #1f3f5f); opacity: 0.8; }
#demo-download-json {
  flex: 0 0 auto; background: rgba(255, 255, 255, 0.14);
  color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 5px; padding: 4px 11px;
  font-size: 12px; font-weight: 600; text-decoration: none;
}
#demo-download-json:hover { background: rgba(255, 255, 255, 0.26); color: #fff; text-decoration: none; }
#demo-source { flex: 0 0 auto; color: #d4ddf0; font-size: 11px; text-decoration: none; }
a#demo-source:hover { color: #ffffff; text-decoration: underline; }