/* The test platform's top bar, the row of pages under it and the engineer view strip. The test platform and the
   Workflow Builder both show them to Opal's own people, so moving between the two stays in one place. Its colors are its
   own, so each page keeps its own tokens. */
:root {
  --shell-ink: #0a0a0a;
  --shell-ink2: #2f3033;
  --shell-gray: #4b5563;
  --shell-muted: #6b7280;
  --shell-line: #ebebee;
  --shell-soft: #f5f5f7;
}
.top, .subnav, .viewing { line-height: normal; }

/* top bar: the Opal mark on the left, the pages in a pill in the middle and the Opal app on the right */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  height: 76px;
  padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
}
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: var(--shell-ink); text-decoration: none; }
.brand svg { width: 24px; height: 24px; flex: none; }
.brand-sub { font-size: 14px; color: var(--shell-muted); white-space: nowrap; }
.nav {
  justify-self: center; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: #fff;
  border: 1px solid var(--shell-line); box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 28px rgba(10, 10, 10, 0.06);
}
.nav a { font-size: 13px; font-weight: 500; color: var(--shell-gray); padding: 8px 15px; border-radius: 999px; white-space: nowrap; text-decoration: none; }
.nav a:hover { color: var(--shell-ink); }
.nav a.on { color: #fff; background: var(--shell-ink); }
.top-right { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.top .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--shell-ink); background: var(--shell-ink); color: #fff; font-size: 13px;
  font-weight: 600; white-space: nowrap; text-decoration: none; transition: background 0.15s ease;
}
.top .btn:hover { background: #2a2a2a; }
.who { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--shell-muted); }
.who .me { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--shell-soft); color: var(--shell-ink2); font-weight: 500; }
.who button { border: 0; background: none; color: var(--shell-muted); padding: 6px 8px; font-size: 13px; cursor: pointer; }
.who button:hover { color: var(--shell-ink); }
.who-local { padding: 4px 10px; border: 1px solid var(--shell-line); border-radius: 999px; font-size: 12px; color: var(--shell-ink2); }

/* the pages of the group in the top bar, when it has more than one */
.subnav { display: flex; justify-content: center; padding: 6px max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); }
.subnav-group { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.subnav-group::-webkit-scrollbar { display: none; }
.subnav a { font-size: 14px; color: var(--shell-muted); padding: 8px 0; white-space: nowrap; border-bottom: 2px solid transparent; text-decoration: none; }
.subnav a:hover { color: var(--shell-ink); }
.subnav a.on { color: var(--shell-ink); border-bottom-color: var(--shell-ink); }

/* the strip an admin sees on every page while they view the platform as an engineer does. Each page sets how wide
   its column runs (--viewing-width) and its side gutter (--viewing-gutter), so the strip lines up with it. */
.viewing {
  padding: 14px max(var(--viewing-gutter, 24px), env(safe-area-inset-right, 0px)) 0
    max(var(--viewing-gutter, 24px), env(safe-area-inset-left, 0px));
}
.viewing-in {
  width: min(var(--viewing-width, 1072px), 100%); margin: 0 auto; display: flex; align-items: center; gap: 12px 16px;
  flex-wrap: wrap; padding: 7px 7px 7px 22px; border-radius: 999px; background: var(--shell-ink); color: #fff; font-size: 14px;
}
.viewing-text { flex: 1; min-width: 0; }
.viewing-text strong { font-weight: 600; }
.viewing-back {
  min-height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: #fff; color: var(--shell-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.viewing-back:hover:not(:disabled) { background: var(--shell-soft); }

/* Below the width where the tabs fit between the brand and the buttons, the tabs take a row of their own. */
@media (max-width: 959px) {
  .top { grid-template-columns: minmax(0, 1fr) auto; height: auto; padding-top: 12px; padding-bottom: 12px; row-gap: 12px; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 1 0 auto; text-align: center; padding: 8px 13px; }
}
@media (max-width: 720px) {
  .top { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .subnav { justify-content: flex-start; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .subnav-group { gap: 22px; }
  .brand-sub { display: none; }
  .who .me { display: none; }
  .viewing { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .viewing-in { border-radius: 22px; padding: 12px 12px 12px 18px; }
}