/* Production host only. Component visuals come from the handoff stylesheet. */
body.surface-customer {
  min-height: 100dvh;
  color: var(--cv-text);
  background: var(--cv-customer-canvas);
}

.customer-production-shell {
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--cv-customer-pearl);
}

.customer-production-shell > .screen {
  width: 100%;
  min-height: calc(100dvh - 72px);
  flex: 1 0 auto;
}

.customer-production-shell > .bottom-nav {
  width: min(100%, 760px);
  position: sticky;
  left: auto;
  bottom: 0;
  flex: 0 0 auto;
  transform: none;
}

.bottom-nav a {
  min-width: 0;
  min-height: 60px;
  padding: 5px 1px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  color: var(--cv-text-muted);
  border-radius: 11px;
  text-decoration: none;
}

.bottom-nav a span { font-size: var(--type-caption); font-weight: 620; white-space: nowrap; }
.bottom-nav a.active { color: var(--cv-pink); }
.bottom-nav a.active span { font-weight: 760; }

.customer-utilitybar a { color: inherit; text-decoration: none; }
.customer-utilitybar > div > a {
  width: 44px;
  min-width: 44px;
  height: 44px;
  position: relative;
  display: grid;
  place-items: center;
  color: #f8f3fa;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}

.customer-utilitybar > div > .sign-in-chip {
  width: auto;
  padding: 0 16px;
  color: var(--cv-pink);
  background: var(--cv-pink-soft);
  border-color: rgba(201,35,101,.16);
  font-weight: 760;
}

@media (min-width: 821px) {
  .customer-production-shell {
    width: min(100%, 1120px);
    border-inline: 1px solid var(--cv-line);
  }
  .customer-production-shell > .screen { padding-inline: clamp(24px, 5vw, 72px); }
  .customer-production-shell > .bottom-nav { width: min(100%, 1120px); }
}