/* experiment-chrome.css: the site's thin bar over every experiment
   (experiment-chrome.js; docs/frontend-protocol.md, v1.23). Neutral on
   purpose: system type, no background of its own (the experiment's ground
   shows through), a hairline under it. Theme: html[data-xc-theme]. */

html.xc { --xc-h: 32px; }

.xc-bar {
  --xc-fg: rgb(22 22 20 / 0.82);
  --xc-fg-2: rgb(22 22 20 / 0.52);
  --xc-rule: rgb(22 22 20 / 0.14);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--xc-h);
  margin: 0;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--xc-rule);
  background: transparent;
  color: var(--xc-fg);
  font: 500 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 2147483000;
}
html[data-xc-theme="dark"] .xc-bar {
  --xc-fg: rgb(236 235 230 / 0.86);
  --xc-fg-2: rgb(236 235 230 / 0.55);
  --xc-rule: rgb(236 235 230 / 0.16);
}

.xc-crumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.xc-crumbs li { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; }
.xc-crumbs li:last-child { flex: 1 1 auto; overflow: hidden; }
.xc-sep { padding: 0 8px; color: var(--xc-fg-2); }
.xc-crumbs a {
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
  padding: 4px 0;
}
.xc-crumbs a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.xc-crumbs a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.xc-plain { color: var(--xc-fg-2); }
.xc-title { overflow: hidden; text-overflow: ellipsis; color: var(--xc-fg-2); }

/* inset: an experiment laid out against the viewport (fixed, overflow
   hidden) gets the viewport less the bar: its body is the containing block
   of its fixed layers, starting under the bar */
html.xc-inset { height: 100%; }
html.xc-inset > .xc-bar { position: fixed; top: 0; left: 0; right: 0; }
html.xc-inset > body {
  margin-top: var(--xc-h) !important;
  height: calc(100% - var(--xc-h)) !important;
  min-height: 0 !important;
  transform: translate(0, 0);
}

@media print { .xc-bar { display: none; } }