/* Match the smooth, opaque silver menu bar in the supplied 10.6 reference. */
.menu-bar {
  background: linear-gradient(#f7f7f7 0, #e7e7e7 12%, #c9c9c9 52%, #aeaeae 100%);
  border-bottom-color: #777;
  box-shadow: 0 1px 3px #0005;
  color: #191919;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  text-shadow: 0 1px 0 #ffffff70, 0 0 .3px #0005;
  -webkit-font-smoothing: auto;
}

.menu-left, .menu-right { gap: 20px; flex-shrink: 0; }
.menu-left { padding-left: 20px; }
.menu-left strong { font-weight: 700; }
.apple {
  width: 18px;
  height: 21px;
  /* The original mark darkens at the top and catches gray light underneath. */
  filter: drop-shadow(0 1px 0 #ffffffa6);
  margin-right: 1px;
}
.menu-right { gap: 16px; padding-right: 18px; }
.menu-bar button {
  font: inherit;
  line-height: 22px;
  padding: 0 6px;
  height: var(--menu-bar-height);
  align-self: flex-start;
  border-radius: 0;
}
.menu-bar button:is(:hover, :focus-visible, :active) {
  background: linear-gradient(#5b9bea 0%, #367bd7 45%, #2465c6 100%);
  color: #fff;
  text-shadow: 0 1px 1px #154c94;
  box-shadow: inset 0 1px #8cb8f3, inset 0 -1px #174fa0;
  outline: none;
}
.menu-right time { font-size: 13px; }
.menu-wifi {
  display: block;
  width: 19px;
  height: 15px;
  transform: none;
  fill: #222;
  filter: drop-shadow(0 1px 0 #ffffff60);
}
.battery { width: 23px; height: 10px; border-color: #292929; }
.battery::before { inset: 1px 2px 1px 1px; background: linear-gradient(#575757, #161616); }
.spotlight { width: 11px; height: 11px; border-width: 2px; }

/* Keep complete menu names clear of the notch as the desktop narrows. */
@media (min-width: 701px) {
  .menu-left span:nth-last-child(-n+3) { display: inline; }
}
@media (min-width: 701px) and (max-width: 1280px) {
  .menu-left span:last-child { display: none; }
}
@media (min-width: 701px) and (max-width: 1120px) {
  .menu-left span:nth-last-child(-n+2) { display: none; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .menu-left span:nth-last-child(-n+3) { display: none; }
  .menu-right { gap: 12px; }
  .menu-right time { display: none; }
}
@media (min-width: 701px) and (max-width: 840px) {
  .menu-left span:nth-last-child(-n+4) { display: none; }
  .menu-left { gap: 17px; }
  .menu-right .battery { display: none; }
}
@media (max-width: 700px) {
  .menu-left { gap: 17px; padding-left: 15px; }
  .menu-right { gap: 14px; padding-right: 15px; }
  .menu-bar button { font-size: 12px; }
}
@media (max-width: 420px) {
  .menu-right .spotlight { display: none; }
  .menu-bar button { font-size: 11px; }
}
@media (max-width: 360px) {
  .menu-right { padding-right: 10px; }
  .menu-bar button { font-size: 10px; padding-inline: 4px; }
}